How to put paragraph and table side by side using HTML? The desired output looks like this:
How to pull it off?
The code I used for table is:
<!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid black;
}
</style>
<body>
<h2>TH elements define table headers</h2>
<table style="width:100%">
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
<p>To undestand the example better, we have added borders to the table.</p>
</body>
</html>
CodePudding user response：
You can wrap table and paragraph in a div like this
<div style="display: flex;">
<table></table>
<p></p>
</div>
CodePudding user response：
I thought I might change some things but it turns there is no need to modify my HTML code because if I'm going to add more paragraphs it sorts itself out.
The code needed to pull it off is:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
table,
th,
td {
border: 1px solid black;
}
table {float: right}
</style>
</head>
<body>
<h1>Know Posporo</h1>
<p style="text-align:left;width: 100%">Lorem ipsum dolor sit amet. Ut itaque porro aut aliquid voluptas est fugit consequatur. At dolores voluptas ut reprehenderit nulla eum adipisci fuga ut similique assumenda cum ipsum enim. Eum enim assumenda non aspernatur numquam et voluptatem sunt sed dignissimos enim et cupiditate perferendis. Cum rerum assumenda ut maxime quos et distinctio quis et dolor suscipit.
<br>
<br>
Sed enim numquam aut voluptate tempore sed magnam nisi rem nulla incidunt non iste iste et consequatur dignissimos? Rem placeat ratione aut rerum Quis quo velit laborum qui laudantium aliquid sed quas natus At quia illum ea dolor adipisci. Qui voluptatem nostrum sit galisum enim in dicta rerum non debitis quos aut quisquam doloremque.
<br>
<br>
Aut laudantium asperiores est provident nulla eum porro consequatur id quos voluptatem sit beatae quidem est eius distinctio. At voluptas quaerat aut inventore internos id quae quas eos praesentium veniam qui omnis veniam et similique voluptatem qui molestiae autem. Qui voluptatem delectus sit nisi magnam qui quia soluta non dicta quis sed Quis iusto sit consequatur veritatis. Qui numquam atque qui fuga magni sit maxime necessitatibus id nostrum quia?</p>
<table>
<tr>
<th colspan="2">Posporo</th>
</tr>
<tr>
<th colspan="2"><img src="OOOOF.jpg" alt="Posporo" width="300" height="300"></th>
</tr>
<tr>
<th colspan="2">Professional</th>
</tr>
<tr>
<th>Affiliation</th>
<td>Mafia</td>
</tr>
<tr>
<th>Profession</th>
<td>Ouch</td>
</tr>
<tr>
<th>Partner</th>
<td>You</td>
</tr>
<tr>
<th>Base</th>
<td>Punta</td>
</tr>
<tr>
<th colspan="2">Personal</th>
</tr>
<tr>
<th>Education</th>
<td>Pamantasan ng Unibersidad ng Paaralan</td>
</tr>
<tr>
<th colspan="2">Signature</th>
</tr>
<tr>
<th colspan="2">gd jasdagjadgjd</th>
</tr>
</table>
<h1>Table of Contents</h1>
<p style="text-align:left;width: 50%">Lorem ipsum dolor sit amet. Ut itaque porro aut aliquid voluptas est fugit consequatur. At dolores voluptas ut reprehenderit nulla eum adipisci fuga ut similique assumenda cum ipsum enim. Eum enim assumenda non aspernatur numquam et voluptatem sunt sed dignissimos enim et cupiditate perferendis. Cum rerum assumenda ut maxime quos et distinctio quis et dolor suscipit.
<br>
<br>
Sed enim numquam aut voluptate tempore sed magnam nisi rem nulla incidunt non iste iste et consequatur dignissimos? Rem placeat ratione aut rerum Quis quo velit laborum qui laudantium aliquid sed quas natus At quia illum ea dolor adipisci. Qui voluptatem nostrum sit galisum enim in dicta rerum non debitis quos aut quisquam doloremque.
<br>
<br>
Aut laudantium asperiores est provident nulla eum porro consequatur id quos voluptatem sit beatae quidem est eius distinctio. At voluptas quaerat aut inventore internos id quae quas eos praesentium veniam qui omnis veniam et similique voluptatem qui molestiae autem. Qui voluptatem delectus sit nisi magnam qui quia soluta non dicta quis sed Quis iusto sit consequatur veritatis. Qui numquam atque qui fuga magni sit maxime necessitatibus id nostrum quia?</p>
</body>
</html>