HTML - Table

HTML Table as the name suggests, lets you organise data in rows and columns.

Let us say, there are 3 students and you want to place them in a table.

So, let us draw a sample table and insert sample student data in it.

Name	Class	Roll
John	5	1
Paul	7	12
Mohan	3	21

Now, let us see, how can we represent the same table in HTML.

Example :

<html>	
<body>
	<table>
  		<tr>
    		<th>Name</th>
    		<th>Class</th>
    		<th>Roll</th>
  		</tr>
  		<tr>
    		<td>John</td>
    		<td>5</td>
    		<td>1</td>
  		</tr>
  		<tr>
    		<td>Paul</td>
    		<td>7</td>
    		<td>12</td>
  		</tr>
  		<tr>
    		<td>Mohan</td>
    		<td>3</td>
    		<td>21</td>
  		</tr>
	</table>
</body>
</html>

Output :

So, if you look at the above output, the student table is created with the same data in the above student table(Just that the border is missing, which we will discuss later).

Name	Class	Roll
John	5	1
Paul	7	12
Mohan	3	21

Now, let us understand the above code in detail :

Table tag in HTML

To create the table in HTML, the entire code should be enclosed in '<table> tag'.

<table>
...
</table>

TR tag in HTML

The next thing we is to represent each rows in the table. And that is represented by the '<tr> element'. TR as in table row. Since, there are 4 rows in the table, the above code has 4 '<tr> elements'.

<table>
	<tr>
	...
	</tr>
	<tr>
	...
	</tr>
	<tr>
	...
	</tr>
	<tr>
	...
	</tr>
</table>

TH tag in HTML

So, the first row has the heading. i.e. Name, Class and Roll. And we have the <th> element to represent table heading. TH as in Table Heading.

<table>
	<tr>
		<th>Name</th>
		<th>Class</th>
		<th>Roll</th>
	</tr>
	<tr>
	...
	</tr>
	<tr>
	...
	</tr>
	<tr>
	...
	</tr>
</table>

TD tag in HTML

Next, we have to represent the values in the second row. i.e. John, 5 and 1. And for there is the <td> element. TD as in Table Data.

<table>
	<tr>
		<th>Name</th>
		<th>Class</th>
		<th>Roll</th>
	</tr>
	<tr>
		<td>John</td>
		<td>5</td>
		<td>1</td>
	</tr>
	<tr>
	...
	</tr>
	<tr>
	...
	</tr>
</table>

Multiple TD tags in HTML

Similarly, using the <td> element, we would be filling the third and fourth row.

<table>
	<tr>
		<th>Name</th>
		<th>Class</th>
		<th>Roll</th>
	</tr>
	<tr>
		<td>John</td>
		<td>5</td>
		<td>1</td>
	</tr>
	<tr>
		<td>Paul</td>
		<td>7</td>
		<td>12</td>
	</tr>
	<tr>
		<td>Mohan</td>
		<td>3</td>
		<td>21</td>
	</tr>
</table>

So, with the above example, we have represented the table using the <table> element. However, the border is missing from the table.

Let us see in the next tutorial, how we can draw border around the table.

❮❮ PREV NEXT ❯❯