Css style

Help creating CSS tables with ROWSPAN – HTML & CSS – SitePoint Forums

Hi friends. I’m trying to figure out how to convert a table with ROWSPANS to Flexbox. I want to be able to style selected cells – and possibly whole LINES and COLUMNS – with different fonts and hence my need to get away from tables (in this little project).

As usual, I like to start with a graphic of what it should look like and a modest one follows. I admit almost zero experience with ROWSPAN.

In the small chart, you see that the first cell is ROWSPANNING the three rows to its right.

What prompted me to explore this trick of what became an iceberg was that I had this silly table fully set up only to read from various sites that I couldn’t replace with any selected cell fonts: I had to choose a font and it was (essentially) for the whole table.

Disheartened, I started googling the topic and came across Chris Coyier’s seminal 2013 article “A Complete Guide to the Table Element” with the alluring anchor 8/2021 update “Make semantic elements behave like an array” just refute more than one thread I’ve read saying it can’t be done!

Massimo Cassandro’s 8/2015 “Layout Secret Weapon #1: The CSS Table Property” and Kevin Yank’s eldest 9/2008 “Rowspans & Colspans in CSS Tables” – right here on Sitepoint – finally got me wrapped up.

I need to be able to style the selected cells and do things melting with some of them – possibly, entire columns and selected rows. This is why I’m asking for help: take the little table i uploaded as a graph and show me how to represent it as a FLEXBOX. The pale green block should be the first row/column followed by rows 2, 3, and 4 to its right. Expand it to show other layouts (e.g. what if the pale green cell was on the other side of the table), then help me understand how and where to insert the style: should it be inline? Can I put it in the CSS? Next, how to style entire column banks and consecutive rows. Even if you get the feeling that a table like this screams GRID! do me a favor and flex it first.

I made a very simplified graph of (what should be considered) a row, below. Ignore background colors: I’ve inserted them to help refer to specific blocks of cells. Speaking of . . .

I don’t even know how to refer to that first cell – the pale green one: is it a ROW or is it a COLUMN? I guess . . . LINE? And note the thinner borders on the actual cells.

For example – suppose I want this orange cell to use monospace (Google) font “COURIER PRIME”. What if I do it for this cell and none of the other three? Here is a “font sampler” you can refer to to verify that your table displays the correct font. Copy and paste my styles to use in your board – simple! Thanks for the help ! -semicodin


99 STYLIN’ TABLE FONTS ᰄ by semicodin

Here are quick visuals of four fonts chosen for their disparateness: I want them to stand out (to make sure they’re displaying)! Plug the styles I created for you in wherever you want to display them in the CSS TABLE you post.

━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━
This is a sample of the (bolded) Google Font “COURIER PRIME” – a Monospace font developed by Mozilla!
This is a sample of the Google Font “CRETE ROUND” – shown here italicized
This is a sample of the Google Font “HENNY PENNY” – a playful display font by the font developer “brownfox”
This is a sample of the Google Font “METAL MANIA” – a Gothic font particularly suited to Shakespeare excerpts I have found.

I like to use the word ‘BUCKET’ for my Flex Container but feel free to use yours.