# Learn to use Tables in HTML

#### Software Engineering Web Development HTML

Get FREE domain for 1st year and build your brand new site

We have taken a deep look into using table elements in HTML and the different components and designs we can achieve.

• Create a table in HTML
• Add borders to our tables
• Make cells span across multiple rows and columns

Tables in HTML can be created by using the <table> tag.

• <tr> defines the table rows.
• <td> defines table element (cell) data.
Table cells are intersection of rows and columns and are the elementary unit of data.
• <th> defines the column heading.
• <caption> defines table caption.
Captions may or may not be defined.

This image is a table created using code given in the next topic.
The following things can be deduced from the image:

• Caption is not a part of the table border (if the border is specified).
• Each row of the table is defined using the <tr> tag.
• The first row generally consists of headings which are defined by <th> tag.
• All other rows consists of data values which are defined in the <td> tag.

## 1) Creating a Table in HTML

Generally, Tables are defined as rows of related data.
Syntax:

<table>
<caption> Write caption here </caption>
<tr>
...
</tr>
<!--Rest of the rows consists of data elements-->
<tr>
<td> Data Element for Heading 1 </td>
<td> Data Element for Heading 2 </td>
...
<tr>
... {Add as many rows you want} ...
</table>


Note: Headings of table are by default bold and center aligned.

Implementation

<table>
<caption> Generic Table </caption>
<tr>
<th> Name </th>
<th> Age </th>
</tr>
<tr>
<td> ABC </td>
<td> 10 </td>
</tr>
<tr>
<td> XYZ </td>
<td> 15 </td>
</tr>
</table>


Output

Explanation:

• "Generic Table" is the caption of the table
• "Name" and "Age" are two headings defined in the first row
• Rest rows comprises of contents in the cell corrresponding to the column.

### 2) Adding Borders around Table Element

Adding border using CSS Style property "border" adds a border around every cell.

Syntax:

<!--Add this CSS Code before HTML Code at the top
You can also add this code in an External CSS File-->
<style>
table,td,th {border:2px solid black;}
</style>


Code:

<style>
table,td,th {border:2px solid black;}
</style>
<table>
<caption> Generic Table </caption>
<tr>
<th> Name </th>
<th> Age </th>
</tr>
<tr>
<td> ABC </td>
<td> 10 </td>
</tr>
<tr>
<td> XYZ </td>
<td> 15 </td>
</tr>
</table>


Output Analysis:
Border is added around the following HTML Element Tags:

• <table> tag has the covering border.
• <th> and <td> have borders around each cell.

As shown in above output, the border for each cell is defined individually.
If we want to have a common border for entire table, we use the border-collapse property of CSS.

Code:

<style>
table,td,th {border:2px solid black; border-collapse:collapse;}
</style>
<table>
<caption> Generic Table </caption>
<tr>
<th> Name </th>
<th> Age </th>
</tr>
<tr>
<td> ABC </td>
<td> 10 </td>
</tr>
<tr>
<td> XYZ </td>
<td> 15 </td>
</tr>
</table>


Output:

Collapsed border modifies generic border and just co-incides the adjacent borders into one border.

### 3) Table cells spanning Multiple Rows

Till now, we were defining tables as rows of data where first row is used only for heading.
Another way of defining tables is using each row for storing data under one heading which is defined in the first column of the row.

Syntax:

<table>
<tr>
<td> Entry 1.1 </td>
<td> Entry 1.2 </td>
...
</tr>
<tr>
<td> Entry 2.1 </td>
<td> Entry 2.2 </td>
...
</tr>
...
</table>


This type of table is used for one cell having multiple rows to store more than one value.

Code:

<style>
table,td,th {border:2px solid black; border-collapse:collapse;}
</style>
<table>
<tr>
<th> Name </th>
<td> ABC </td>
<td> XYZ </td>
</tr>
<tr>
<th rowspan="2"> Email </th>
<td> ABC@gmail.com </td>
<td> XYZ@gmail.com </td>
</tr>
<tr>
<td> ABC@yahoo.com </td>
<td> XYZ@hotmail.com </td>
</tr>
</table>


Output:

As show, Each column corresponding to Email Heading is divided into two rows, i.e., for each column, there are two row spans.

## 4) Table cells Spanning Multiple Columns

Many a times, a given column must have more than one value.
Example: A person generally has two phone numbers,

1. Home Phone
2. Work Phone

Thus, in general, for some data field, we need to span two or more columns.
This can be done use column span in table cells.

Syntax:

<th colspan="n">


Where n is the number of columns we need in the cell.

Code:

<style>
table,td,th {border:2px solid black; border-collapse:collapse;}
</style>
<table>
<caption> Column Span Example </caption>
<tr>
<th> Name </th>
<th colspan="2"> Phone </th>
</tr>
<tr>
<td> ABC </td>
<td> 9898989898 </td>
<td> 9797979797 </td>
</tr>
<tr>
<td> XYZ </td>
<td> 9696969696 </td>
<td> 9595959595 </td>
</tr>
</table>


Output:

Here, each row under the Phone column heading is divided into two columns, i.e., each row spans two columns.

#### Nishkarsh Raj

Maintainer and Intern at OpenGenus | Pursuing Bachelors degree in Computer Science at University of Petroleum and Energy Studies (2017-2021)

Vote for Nishkarsh Raj for Top Writers 2021: