Hi friends. I’m trying to understand how to convert a table with ROWSPANS into a Flexbox. I want to be able to style select cells – and eventually entire ROWS and COLUMNS – with different fonts and thus my need to move away from tables (in this one little project).
As usual I like to begin with a graphic of what this should look like and a modest one follows. I admit near zero experience with ROWSPAN.
In the little graphic you see that first cell is ROWSPANNING the three rows to its right.
What prompted me to explore this tip of what has grown to be an iceberg was that I had this silly table all set up only to read on various sites that I couldn’t substitute any selected cells’ fonts: I had to pick one font and that was (essentially) for the entire table.
Dejected, I began Googling the subject and stumbled on Chris Coyier’s 2013 seminal article “ A Complete Guide to the Table Element” with the beguiling 8/2021 anchor update “Making Semantic Elements Behave Like a Table” just disproving more than one thread I read saying it couldn’t be done!
Massimo Cassandro’s 8/2015 “Layout Secret Weapon #1: The CSS Table Property” and Kevin Yank’s older 9/2008 “Rowspans & Colspans in CSS Tables” – right here, on Sitepoint – finally reeled me in.
I need to be able to style select cells and do things fontish with some of them – eventually, entire columns and select rows. This is what I’m asking for help in: take the little table I’ve uploaded as a graphic 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 & 4 to its right. Expand it to show other arrangements (eg., what if the pale green cell were on the other side of the table) and then help me understand how & where to insert styling: should it be inline? Can I put it in the CSS? Then how to style entire column banks and consecutive rows. Even if you feel strongly that a table such as this cries out GRID! humor me and Flex it first. 
I did a very simplified graphic of (what should be viewed as) one row, below. Disregard the background colors: I put them in to aid in referring to specific cell blocks. 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’m guessing . . . ROW? And note the slimmer borders on the actual cells.
For an example – suppose I wanted that orange cell to use the monospace (Google) font “COURIER PRIME". How would I do it when I do it for that one cell and none of the other three? Following is a ‘Font Sampler’ you can refer to for double checking that your table is showing the right font. Copy & paste my styles to use in your table – simple! Thanks for the help! –semicodin
<!DOCTYPE html>
<HTML LANG="en">
<HEAD>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Crete+Round:ital@0;1&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Henny+Penny&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Metal+Mania&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<TITLE>99 STYLIN’ TABLE FONTS ᰄ by semicodin</TITLE>
<STYLE>
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 1rem;
vertical-align: TOP;
}
HTML, BODY {
font-size: 16px;
line-height: 16px;
}
BODY {
margin-left: 10%;
margin-right: 10%;
margin-top: 2.5rem;
margin-bottom: 2.5rem;
padding: 0;
text-align: left;
font-size: .88rem;
line-height: 1.05;
font-weight: 400;
font-family: 'Roboto Slab', serif;
}
.CRIMB {color: CRIMSON; font-weight: 700;}
.NORMLC {
color: CRIMSON;
font-weight: normal;
}
.INTRO {
font-size: 1rem;
line-height: 1.05;
font-weight: 300;
font-family: 'Roboto Slab', serif;
/* ▬▬▬▬▬▬▬▬▬ FOUR FONTS, SAMPLED: ▬▬▬▬▬▬▬▬▬ */
.COU {
margin-top: 1rem;
line-height: 1.05;
font-weight: 700;
font-size: 1rem;
font-family: 'COURIER PRIME', monospace;
}
.CRE {
margin-top: 1rem;
font-style: ITALIC;
line-height: 1.1;
font-weight: 400;
font-size: 1rem;
font-family: 'CRETE ROUND', serif;
}
.HEN {
margin-top: 1rem;
line-height: 1.5;
font-weight: 400;
font-size: 1rem;
font-family: 'HENNY PENNY', display;
}
.MET {
margin-top: 1rem;
line-height: 1;
font-weight: 400;
font-size: 1rem;
font-family: 'METAL MANIA', display;
}
</style>
</head>
<body>
<div class"INTRO">
Here are quick visuals of four fonts chosen for their disparateness: I want them to stand out (to make sure they’re displaying)! <B>Plug the styles I created for you in wherever you want to display them in the CSS TABLE <span class="CRIMB"><i>you</i> post</span>.</B></div>
<BR>
━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━<BR>
<div class="COU">
This is a sample of the (bolded) Google Font “COURIER PRIME” – a Monospace font developed by Mozilla!</div>
<div class="CRE">
This is a sample of the Google Font <B><i>“CRETE ROUND”</i></B> – shown here italicized</div>
<div class="HEN">
This is a sample of the Google Font <B>“HENNY PENNY”</B>
– a playful display font by the font developer “brownfox”</div>
<div class="MET">
This is a sample of the Google Font <B>“METAL MANIA”</B>
– a Gothic font particularly suited to Shakespeare excerpts I have found.</div>
</body>
</html>
I like to use the word ‘BUCKET’ for my Flex Container but feel free to use your own.
If it is tabular then you really should use a table (as 
My god I hate math lol. I avoided responding to you in my last thread which I think I’d hoped might just . . . go away lol.
).
