You are already aware that a table is a way to organize data in rows and columns.
The HTML defines a table with <table> element.
A table starts with <table> tag and ends with </table> tag. Inside we define multiple <tr> elements.
Each <tr> element contains multiple <td> elements.
Before getting into a deeper discussion, let's see an example of a basic HTML table.
Basic HTML Table
Below is a table of students marks in different subjects.
| Name |
Math |
English |
History |
| Edwin Miller |
75 |
80 |
66 |
| Jacob Johnson |
65 |
56 |
60 |
| Steve Thompson |
71 |
81 |
79 |
| Isabella Robinson |
67 |
51 |
45 |
| Benjamin Mitchell |
40 |
42 |
51 |
Let's see how this simple table will be coded in HTML.
<table>
<tr>
<th>Name</th>
<th>Math</th>
<th>English</th>
<th>History</th>
</tr>
<tr>
<td>Edwin Miller</td>
<td>75</td>
<td>80</td>
<td>66</td>
</tr>
<tr>
<td>Jacob Johnson</td>
<td>65</td>
<td>56</td>
<td>60</td>
</tr>
<tr>
<td>Steve Thompson</td>
<td>71</td>
<td>81</td>
<td>79</td>
</tr>
<tr>
<td>Isabella Robinson</td>
<td>67</td>
<td>51</td>
<td>45</td>
</tr>
<tr>
<td>Benjamin Mitchell</td>
<td>40</td>
<td>42</td>
<td>51</td>
</tr>
</table>
Let's see the complete example. Click on 'Result on Editor' to view the output.
<!DOCTYPE html>
<html>
<head>
<title>Basic HTML Table Example</title>
</head>
<body>
<h1>Basic HTML Table</h1>
<table>
<tr>
<th>Name</th>
<th>Math</th>
<th>English</th>
<th>History</th>
</tr>
<tr>
<td>Edwin Miller</td>
<td>75</td>
<td>80</td>
<td>66</td>
</tr>
<tr>
<td>Jacob Johnson</td>
<td>65</td>
<td>56</td>
<td>60</td>
</tr>
<tr>
<td>Steve Thompson</td>
<td>71</td>
<td>81</td>
<td>79</td>
</tr>
<tr>
<td>Isabella Robinson</td>
<td>67</td>
<td>51</td>
<td>45</td>
</tr>
<tr>
<td>Benjamin Mitchell</td>
<td>40</td>
<td>42</td>
<td>51</td>
</tr>
</table>
<p>The table above has no border. Because we have not applied any style to the table. We will learn about the table styling in coming chapters.</p>
</body>
</html>
So basically, looking at the code above, we can say that:
To define a table, we will use the HTML <table> element.
Each row is defined with <tr> element.
The data is defined with <td> element.
Only the data of table headers are defined with <th> element.
Table <tr>
The HTML <tr> element defines the table row.
A table can have multiple table rows.
The tr is the short name for the table row.
It is not an empty element. Hence a table row starts with an opening <tr> tag and ends with a closing </tr> tag.
The table data elements are written between the <tr> and </tr> tags.
<!DOCTYPE html>
<html>
<head>
<title>Table tr Example</title>
<style>
table, td {
border:1px solid black;
}
</style>
<head>
</head>
<body>
<h1>Table tr Example</h1>
<table>
<tr>
<td>Microsoft</td>
<td>Google</td>
<td>Twitter</td>
<td>Facebook</td>
</tr>
<tr>
<td>Intel</td>
<td>Tesla</td>
<td>Motorola</td>
<td>Samsung</td>
</tr>
</table>
<p>Notice that one tr element has created one row in a table.</p>
</body>
</html>
Table <td>
The HTML <td> element defines the table data.
The td is the short name for the table data.
Content of the each table cell is written between the opening <td> and closing </td> tags.
<!DOCTYPE html>
<html>
<head>
<title>Table td Example</title>
<style>
table, td {
border:1px solid black;
}
</style>
<head>
</head>
<body>
<h1>Table td Example</h1>
<table>
<tr>
<td>Stackoverflow</td>
<td>Github</td>
<td>W3schools</td>
<td>ResultUniversity</td>
</tr>
</table>
<p>Notice that each td element has created one cell. For better understanding we have applied style on table and td element.</p>
</body>
</html>
The <td> can be nested with other elements. It means we can write other HTML elements inside the <td> tags.
For example, it can contain elements like <a>, <img>, <p> and <table> etc.
Let's see an example.
<!DOCTYPE html>
<html>
<head>
<title>A Link and Image in td Element</title>
<style>
table, td {
border:1px solid black;
}
</style>
<head>
</head>
<body>
<h1>A Link and Image in td Element</h1>
<table>
<tr>
<td><a href="https://www.google.com/intl/en_in/chrome/">Google Chrome</a></td>
<td><img src="chromelogo.png" alt="Chrome Logo"></td>
</tr>
</table>
<p>First td element contains a link element. Second td element contains an image element.</p>
</body>
</html>
Table <th>
The th is the short name for the table header.
The <th> element is the same as the <td> element. The only difference is that we use it for the table heading cells.
The cell content is written between the start tag <th> and the end tag </th>.
<!DOCTYPE html>
<html>
<head>
<title>Table header th Example</title>
<style>
table, td, th {
border:1px solid black;
}
</style>
<head>
</head>
<body>
<h1>Table th Example</h1>
<table>
<tr>
<th>First</th>
<th>Second</th>
<th>Third</th>
</tr>
<tr>
<td>Google</td>
<td>Microsoft</td>
<td>Twitter</td>
</tr>
</table>
<p>By default, text of th elements are bold. We use th element only for the table headers.</p>
</body>
</html>
Generally, only the first <tr> element contains <th> elements.
But it is not necessary, as in the case of vertical table headers other <tr> elements can also contain <th> elements.
By default, browsers make the content of <th> element bold.
You can change the look of the <th> element by applying a style attribute to it.
What did we learn in this chapter?
- The HTML <table> element defines a table.
- A table row is defined by the <tr> element.
- A cell data is defined by the <td> element.
- The cell data of the table headers are defined using the HTML <th> element.
- The content of the <th> and <td> elements can not only be plain text but can also include links, images, lists and other tables.
- We can alter the default look of a table by applying CSS to the <table>, <tr>, <td> and <th> elements.