Well I had (what I thought was) a good idea: Tucking the 2 THs into a div, with the Div getting the border. Example:
.TWOCOLS {
border: 6px GROOVE #00FFFF;
}
paired with
<TR>
<DIV class="TWOCOLS">
<TH>HEADING FOR THE LEFT COLUMN</TH>
<TH>HEADING FOR THE RIGHT COLUMN</TH>
</DIV>
</TR>
. . . but the THs wouldn’t go into the DIV! wtf!? I give them a perfectly good div – relieving them of the burden of a border – and get this:
I even added display: TABLE ROW; . . . nope.
You may like the use of inset box-shadow but it doesn’t give you exactly what you want.
I feel it looks wrong not to have some form of border between the headings.
It’s a fair observation but for now I’ve got to let them . . . FLOAT!?? I’ll give it a try. I’ll try anything – even detaching the THs altogether. I don’t like doing it but I may have to . . .
That is invalid html,.
You cannot have a div as a direct child of a tr element. A div needs to be inside a th or a td element as does all content in a table.
I know you don’t really want this now but here’s a rough draft of a CSS grid layout for anyone that’s interested.
The only slightly complex code is manipulating the borders to create the effect you wanted. Also the double borders on the header are achieved using the ridge value. If you actually wanted two sets of separate borders then it would require nesting another element in each header to hold an extra border.
Paul beat me to it, but he used named areas and I used span within the row and column starts, which is essentially the way the rowspan and colspan works on a table, but it’s done in the css.
The outer borders need to be exactly as in post #19. Don’t ask me why 
.
Paul, Dave, Archibald . . . late last night (I’m in California) I acted on Archibald’s thought and created another table to sit on top of the existing table snd once-and-for-all get turquoise to display. And even then I couldn’t get the damn thing to display correctly: amongst other issues (no black background; white lettering that jumped the fence and populated the green and pink cells) suffice to say it wouldn’t work (I have the code if anyone’s interested).
So I shopped Google for help and I landed on W3schools section about floats. I have never read such unintelligible code in my life! By the time you get to this masterpiece – and the site is recommending a “Clearfix hack” – you might do what I did: open your mind and try GRID.
Because all these strategies for getting a ridiculous bar of black with a turquoise border to display . . . as Paul says, my little project is precisely why a lot of very smart people put their heads together to come up with a solution that doesn’t rely on a hack, it just honestly addresses the mutual goal of taming the real estate and putting the elements of your web page precisely where you want them. I found myself looking at that page and saying Can Grid be as bad as this? NEVER! lol
I’m going to look at your code Paul right now. Thank you guys.
That’s it Paul! I tweaked just slightly in places so the look balances. The only question I had was inserting the nth-child striping. I should have known it was having none of this:
table tr:nth-child(odd){background-color: #FFFFCC}
table tr:nth-child(even){background-color: WHITE}
Here is the code in its entirety. Just get me in the saddle and I’ll produce a touch of Latin (or the Bard? Decisions Decisions . . .
I didn’t forget about you Dave. I’m doing yours next!
<!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>98 GRID ᰄ “Tables-B-Gone” by Paul O’Brien</TITLE>
<style>
/*lower case for selectors please */
html,
body {
margin: 0;
padding: 0;
}
p {
margin: 0 0 1rem;
}
body {
margin: 5% 2.5rem;
font-size: 1rem;
line-height: 1;
font-weight: 500;
font-family: "Roboto Slab", sans-serif;
}
.container {
display: grid;
margin: 0 auto;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
grid-template-areas:
"header1 header2"
"cou cre"
"cou hen"
"cou met";
border-bottom: 6px solid black;
}
table tr:nth-child(odd){background-color: #FFFFCC}
table tr:nth-child(even){background-color: WHITE}
.col1header,
.col2header {
margin: 0;
background: black;
color: #fff;
font-size: 1rem;
padding: 8px;
text-align: center;
line-height: 1;
font-weight: 600;
font-family: "Roboto Slab", sans-serif;
border: 6px groove #00FFFF;;
border-top-color: #00FFFF;
border-left-color: #00FFFF;
}
.col1header {
grid-area: header1;
border-right: none;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.col2header {
grid-area: header2;
border-left: none;
}
.cou {
grid-area: cou;
background-color: white;
line-height: 1;
font-weight: 700;
font-size: 1rem;
font-family: "COURIER PRIME", monospace;
}
.cre {
grid-area: cre;
background-color: white;
font-style: italic;
line-height: 1.1;
font-weight: 400;
font-size: 1rem;
font-family: "CRETE ROUND", serif;
}
.hen {
grid-area: hen;
background-color: white;
line-height: 1.5;
font-weight: 400;
font-size: 1rem;
font-family: "HENNY PENNY";
}
.met {
grid-area: met;
background-color: white;
line-height: 1;
font-weight: 400;
font-size: 1rem;
font-family: "METAL MANIA";
}
.cou,
.cre,
.hen,
.met {
padding: 6px;
}
.cou {
border-left: 6px solid black;
border-right: 1px solid black;
}
.cre,
.hen,
.met {
border-left: 1px solid black;
border-right: 6px solid black;
border-bottom: 2px solid black;
}
.met {
border-bottom: none;
}
.font-name {
text-transform: uppercase; /* Let css handle presentation not the mark up*/
}
</style>
</head>
<body>
<div class="container">
<h2 class="col1header">Header for the left Column</h2>
<div class="cou">
<p>This is a sample of the (bolded) Google Font <span class="font-name">“Courier Prime”</span> – a Monospace font developed by Mozilla!</p>
<p>More stuff here</p>
</div>
<!-- not happy with 2 h1s so this should probably be h2 -->
<h2 class="col2header">Header for the right Column with more text to wrap</h2>
<div class="cre">
<p>This is a sample of the Google Font <b class="font-name">“Crete Round”</b> – shown here italicized</p>
<p>More stuff here</p>
</div>
<div class="hen">
<p>This is a sample of the Google Font <span class="font-name">“HENNY PENNY”</span> – <b>a playful display font</b> by font developer “brownfox”</p>
<p>More stuff here</p>
</div>
<div class="met">
<p>This is a sample of the Google Font ,span class="font-name"“MetalL Mania”</span> – a Gothic font rendered in small caps, particularly suited to <b>SHAKESPEARE EXCERPTS</b> I have found.</p>
<p>More stuff here</p>
</div>
</div>
</body>
</html>
Oh and I’ll need to see the break point: The line that begins the block I’ll copy to add additional rows. Feel free to reorder my striping.
You don’t have any tables or tr elements now 
I’m not sure why you would want to use that verbose method anyway when there are only a few rows and can be colored directly as in my example. You would need something like this if you wanted to replicate the nth method but would need nth-of-type.
.container > div:nth-of-type(odd){background-color: #FFFFCC}
.container > div:nth-of-type(even){background-color: white}
nth-child and nth-of type can be very fragile if the html changes unexpectedly. My example is based on the information you gave but if you have a different structure in mind then that would most likely be a different approach again
Dave – does Sitepoint have one of these “Copy All” buttons for your Codepen widget? Otherwise I’ll just go to the site.
Wellllll . . . This may be one of the few times I’d be interested in your aesthetic opinions. The color scheme for this project is one I used some years ago in the course of cataloguing my DVD collection (now gone! as is everything in my house but the furniture, but I’m not going there, I’m here to code) but true – it was more of a single-line page of striping, while this little guy is more prosey.
One thought I had was to color the text according to a color wheel so you’d get this lovely rainbow effect as the color passes (eg.) from orange to red to purple to blue etc. The entire block, in other words.
Or maybe just some cells hmmm . . . the first cell in black but the other three . . .
As for my inserting nth tables – have a heart Paul! I’ve never worked with Grid before in my life. I don’t have a blessed clue of what I’m doing! I ran it up the flagpole and it didn’t fly, ergo, I report in. 
To Dave!
No (since it’s a fully rendered page and not markdown like the code blocks), but if you look at the embedded window, you can hit the html or css buttons to see just those items and can copy/paste from there.
Good. I’ll uh . . . be a few while I parse your code so my brain has a hope of seeing it lol. Not as jet as you experienced pros are and need an old-fashioned line-by-line layout. Correct. That is Paul in the background sighing heavily lol . . . 
Well Dave that’s impressive given how little coding went into it! Most of it is little stuff I could tweak but the biggest issue – the turquoise bar – I dare not even attempt. The turq frame has to span the entire width of its allowed space. The black border that surrounds the remaining 3 sides (enclosing the ROW) emanates from each end of turq to produce a straight edge. And the 2px interior borders should not be peeking or leaking from directly under turq.
Like I say, I’m impressed you got as close to the concept as you did with so little programming.
That’s partially because I added a padding to the grid class.
Is this closer?
What I did:
Now, you do know we’ll have to tighten up that naughty header, right Dave? lol
The interior borders get the little 2px black, not the fat one. The header aligns to BOTTOM; the content, TOP. Looks good. Can you give me a break point so I can roll out a few rows? Remember: I’m a stranger in a strange land lol . . .
Okay I’ve attempted a guess as to where to carve out a row from your masterpiece Paul and am only getting that first row. It surprised me but . . . I am a stranger in a strange land indeed!
I just don’t want the turq header to be duplicated so here is what I scalped (which doesn’t display). This is what’s directly below the following lines –
<body>
<div class="container">
<h2 class="col1header">Header for the left Column</h2>
Code starts here from the very next line:
<div class="cou">
<p>This is a sample of the (bolded) Google Font <span class="font-name">“Courier Prime”</span> – a Monospace font developed by Mozilla!</p>
<p>More stuff here</p>
</div>
<!-- not happy with 2 h1s so this should probably be h2 -->
<h2 class="col2header">Header for the right Column with more text to wrap</h2>
<div class="cre">
<p>This is a sample of the Google Font <b class="font-name">“Crete Round”</b> – shown here italicized</p>
<p>More stuff here</p>
</div>
<div class="hen">
<p>This is a sample of the Google Font <span class="font-name">“HENNY PENNY”</span> – <b>a playful display font</b> by font developer “brownfox”</p>
<p>More stuff here</p>
</div>
<div class="met">
<p>This is a sample of the Google Font ,span class="font-name"“MetalL Mania”</span> – a Gothic font rendered in small caps, particularly suited to <b>SHAKESPEARE EXCERPTS</b> I have found.</p>
<p>More stuff here</p>
</div>
I put four blocks of that in. Dave if you’re around could you guide me here? (actually anybody?)