HTML Table

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.

HTML Code
<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.

Example
<!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.

Example
<!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.

Example
<!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.

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>.

Example
<!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.

  • Disclaimer: ResultUniversity.com is an independent private website and it is in no way affiliated to any Indian Government official website. The sole purpose of this website is to provide notifications regarding the latest results published. Though utmost care is being taken, we can not guarantee 100% correctness of information. Using this website confirms that you agree to all the terms and conditions.