View video tutorial
HTML Tables
HTML
The <table> tag allows data to be arranged in rows and columns.
HTML Table
➔ HTML <table> has rows <tr> and columns <td> .
➔ One row <tr> has one or more data or columns.
➔ A row <tr> for headers can be set for columns to identify the data under a named <th> group.
➔ Table row <tr> consists of table data<td>
Syntax
<table>
<caption>Student info</caption>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>100</td>
<td>A</td>
</tr>
<tr>
<td>101</td>
<td>B</td>
</tr>
</tbody>
</table
Employees Table
| Company | Name | Country |
|---|---|---|
| Magazzini Alimentari Moctezuma | Yoshi Chang | Germany |
| Laughing Bacchus Futterkiste | Giovanni Anders | Mexico |
| Ernst Trading | Bennett Roland | Austria |
| Island Handel | Mendel Helen | UK |
| Centro comercial Riuniti | Maria Rovelli | Italy |
| Alfreds Winecellars | Francisco Tannamuri | Canada |
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
Example
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #00000055;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<h2>HTML Table Tag Example</h2>
<table>
<tr>
<th>Company</th>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Magazzini Alimentari Moctezuma</td>
<td>Yoshi Chang</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Futterkiste</td>
<td>Giovanni Anders</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Trading</td>
<td>Bennett Roland</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Handel</td>
<td>Mendel Helen</td>
<td>UK</td>
</tr>
<tr>
<td>Centro comercial Riuniti</td>
<td>Maria Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>Alfreds Winecellars </td>
<td>Francisco Tannamuri</td>
<td>Canada</td>
</tr>
</table>
</body>
</html>
Click on the "See output" button to see how it works.