Problem with inserting a paragraph into table in HTML - html

Question

I actually have to insert a paragraph below the table header just like in the below-given image, but I don't know I'm not able to figure out how. everything I do is giving out a weird table. I need help with that
and this is the HTML I wrote
<table>
<!--Table header-->
<tr>
<th style="text-align:left">Stanford researchers find a quicker,<br>cheaper way to sort isotopes</th>
<th> </th>
<th style="text-align:left">Chance to dance: Enthusiasts fly to <br>Stanford for dance weekend </th>
</tr>
<tr>
<td rowspan="10">
<p>BY EMMANUEL ROMERO LA Cicero Richard Zare Professor Richard Zare in his lab. Whether it's the summer grass that tickles your feet or the red Bordeaux smacking on your palate, nearly every part of the world around you carries special chemical markers.
These markers, called isotopes, can tell scientists where the molecules that compose a substance are from, where they traveled and what happened to them along the way. But doing these analyses has been complex and costly. Now, Stanford chemists
have developed a new method to make isotopic analysis easier and less expensive.</p>
</td>
</tr>
</table>

Answer 1

Following what you wrote, you have three headers, so you need 3 cells (tds) in every row (or the equivalent). In the future, don't add an extra column for spacing, use CSS. (Plus what others have said in the comments.)
<table>
<!--Table header-->
<tr>
<th style="text-align:left">Stanford researchers find a quicker,<br>cheaper way to sort isotopes</th>
<th> </th>
<th style="text-align:left">Chance to dance: Enthusiasts fly to <br>Stanford for dance weekend </th>
</tr>
<tr>
<td rowspan="10">
<p>BY EMMANUEL ROMERO LA Cicero Richard Zare Professor Richard Zare in his lab. Whether it's the summer grass that tickles your feet or the red Bordeaux smacking on your palate, nearly every part of the world around you carries special chemical markers.
These markers, called isotopes, can tell scientists where the molecules that compose a substance are from, where they traveled and what happened to them along the way. But doing these analyses has been complex and costly. Now, Stanford chemists
have developed a new method to make isotopic analysis easier and less expensive.</p>
</td>
<td> </td>
<td>
<p>BY CYNTHIA HAVEN L.A. 2nd main content blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
</td>
</tr>
</table>
You will probably have to add some CSS to the table and/or cells for spacing and alignment.
To take it to the next level, for example, remove the middle th and the middle td and add this CSS: th, td { padding: 0 10px; vertical-align: top; width: 50%; }.

Answer 2

HTML:
<table>
<tr>
<th>Stanford researchers find a quicker,<br>cheaper way to sort isotopes</th>
<th>Chance to dance: Enthusiasts fly to <br>Stanford for dance weekend</th>
</tr>
<tr>
<td>BY EMMANUEL ROMERO LA Cicero Richard Zare Professor Richard Zare in his lab. Whether it's the summer grass that tickles your feet or the red Bordeaux smacking on your palate, nearly every part of the world around you carries special chemical markers.
These markers, called isotopes, can tell scientists where the molecules that compose a substance are from, where they traveled and what happened to them along the way. But doing these analyses has been complex and costly. Now, Stanford chemists
have developed a new method to make isotopic analysis easier and less expensive.</td>
<td>Your Content</td>
</tr>
</table>
CSS:
table {
border-collapse: collapse;
width: 100%;
border: 0;
}
th, td {
text-align: left;
padding: 16px;
width:calc(100%/2);
word-break:break-all;
}
Only in one HTML file:
<table style="border-collapse: collapse;width: 100%;border: 0;">
<tr>
<th style="text-align: left;padding: 16px;width:calc(100%/2);word-break:break-all;">Stanford researchers find a quicker,<br>cheaper way to sort isotopes</th>
<th style="text-align: left;padding: 16px;width:calc(100%/2);word-break:break-all;">Chance to dance: Enthusiasts fly to <br>Stanford for dance weekend</th>
</tr>
<tr>
<td style="text-align: left;padding: 16px;width:calc(100%/2);word-break:break-all;">BY EMMANUEL ROMERO LA Cicero Richard Zare Professor Richard Zare in his lab. Whether it's the summer grass that tickles your feet or the red Bordeaux smacking on your palate, nearly every part of the world around you carries special chemical markers.
These markers, called isotopes, can tell scientists where the molecules that compose a substance are from, where they traveled and what happened to them along the way. But doing these analyses has been complex and costly. Now, Stanford chemists
have developed a new method to make isotopic analysis easier and less expensive.</td>
<td style="text-align: left;padding: 16px;width:calc(100%/2);word-break:break-all;">Your Content</td>
</tr>
</table>
Only in one HTML file and without table:
<div id="myDiv">
<div style="display:flex;flex-direction:row;justify-content:space-between;width:100%;" class="title">
<div style="padding:4px 16px;width:45%;" class="title-child">
<h3>Stanford researchers find a quicker,<br>cheaper way to sort isotopes</h3>
</div>
<div style="padding:4px 16px;width:45%;" class="title-child">
<h3>Chance to dance: Enthusiasts fly to <br>Stanford for dance weekend</h3>
</div>
</div>
<div style="display:flex;flex-direction:row;justify-content:space-between;width:100%;" class="content">
<div style="padding:4px 16px;width:45%;" class="title-content">
<p>BY EMMANUEL ROMERO LA Cicero Richard Zare Professor Richard Zare in his lab. Whether it's the summer grass that tickles your feet or the red Bordeaux smacking on your palate, nearly every part of the world around you carries special chemical markers.
These markers, called isotopes, can tell scientists where the molecules that compose a substance are from, where they traveled and what happened to them along the way. But doing these analyses has been complex and costly. Now, Stanford chemists
have developed a new method to make isotopic analysis easier and less expensive.
<td>Your Content</p>
</div>
<div style="padding:4px 16px;width:45%;" class="title-content">
<p>Your Content</p>
</div>
</div>
</div>