Embedded Files
HTML Tables
HTML Tables
HTML tables allow web developers to arrange data into rows and columns.
Define an HTML Table
Define an HTML Table
A table in HTML consists of table cells inside rows and columns.
EXAMPLE:
A simple HTML table:
<!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid black;
}
</style>
<body>
<h2>A basic HTML table</h2>
<table style="width:100%">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Moncler S.p.A.</td>
<td>Mr. Remo Ruffini</td>
<td>Italy</td>
</tr>
<tr>
<td>Schneider Electric SE</td>
<td>Mr. Jean-Pascal Tricoire</td>
<td>France</td>
</tr>
</table>
<p>To understand the example better, we have added borders to the table.</p>
</body>
</html>
Table Cells
Table Cells
Each table cell is defined by a <td> and a </td> tag.
EXAMPLE:
Each table cell is defined by a <td> and a </td> tag.
td stands for table data.
Everything between <td> and </td> are the content of the table cell.
<!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid black;
}
</style>
<body>
<h2>TD elements define table cells</h2>
<table style="width:100%">
<tr>
<td>Gideon</td>
<td>Gersan</td>
<td>Marc</td>
</tr>
</table>
<p>To understand the example better, we have added borders to the table.</p>
</body>
</html>
Table Rows
Table Rows
Each table row starts with a <tr> and ends with a </tr> tag.
Example:
<!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid black;
}
</style>
<body>
<h2>TR elements define table rows</h2>
<table style="width:100%">
<tr>
<td>Gideon</td>
<td>Gersan</td>
<td>Marc</td>
</tr>
<tr>
<td>18</td>
<td>17</td>
<td>19</td>
</tr>
</table>
<p>To understand the example better, we have added borders to the table.</p>
</body>
</html>
Table Headers
Table Headers
Sometimes you want your cells to be table header cells. In those cases use the <th> tag instead of the <td> tag:
Example:
<!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>Gideon</td>
<td>Gersan</td>
<td>Marc</td>
</tr>
<tr>
<td>18</td>
<td>17</td>
<td>19</td>
</tr>
</table>
<p>To understand the example better, we have added borders to the table.</p>
</body>
</html>
Page updated
Google Sites
Report abuse