Everything about Tables In HTML

In this post, I’ll explain the very basics about tables in HTML. You will learn about how to add table border, spacing, padding, colspan, rowspan, etc.

To create a table in HTML you’ll need the following tags – <table>, <tr>, <td>. The <table> tag represents a HTML table. <tr> tag represents a row inside table. <td> tag represents a cell within a row.

Creating A Simple HTML Table

Given below is the code to create a very basic HTML table. This code creates a HTML table with a single row and 2 columns.

[html]

<table>

<tr>
<td> Row 1 – Cell 1 </td>
<td> Row 1 – Cell 2 </td>
</tr>

</table>

[/html]

The result will be somewhat as shown below. It doesn’t look like a table because there is no table border. So we will add table border in our next step.

HTML Table

Border Attribute

You can add table border using the attribute border. In the code given below, i have added a table border of size 2 pixels. You can set this value according to your wish.

[html]

<table border=”2px” >

<tr>
<td> Row 1 – Cell 1 </td>
<td> Row 1 – Cell 2 </td>
</tr>

</table>

[/html]

HTML TABLE BORDER

We got the table border but the content in this table is too tightly packed. So lets add some padding to it.

Cell Padding Attribute

The cellpadding attribute in table will basically add some space between the text and the cell border (not the table border). And you can set the amount of space in pixels.

[html]

<table border=”2px” cellpadding=”10px” >

<tr>
<td> Row 1 – Cell 1 </td>
<td> Row 1 – Cell 2 </td>
</tr>

</table>

[/html]

Cell Padding

Now you know whats cellpadding but then what is cellspacing? Lets check it out.

Cell Spacing Attribute

The cellspacing attribute in table will add some space between the cell border and the table border. You can set the amount of space in pixels.

[html]

<table border=”2px” cellpadding=”10px” cellspacing=”20px” >

<tr>
<td> Row 1 – Cell 1 </td>
<td> Row 1 – Cell 2 </td>
</tr>

</table>

[/html]

Cell Spacing

Cell Background Color

To add background color to a particular cell, we will use style attribute. Inside the style attribute we will have background property with some value. Check the code given below.

[html]

<table border=”2px” cellpadding=”10px” cellspacing=”20px” >

<tr>
<td style=”background: yellow” > Row 1 – Cell 1 </td>
<td> Row 1 – Cell 2 </td>
</tr>

</table>

[/html]

Cell Background Color

This code turns background color of Cell 1 into yellow. You can try and change it to red or any color of your choice. In the same way you can add color to any other cell.

Adding Multiple Rows

You can add multiple rows by using <tr> tag. Previously we had just one pair of <tr> tag, now lets add two pair of <tr> tags. This will create two rows.

[html]

<table border=”2px” cellpadding=”10px” cellspacing=”20px” >

<tr>
<td style=”background: yellow” > Row 1 – Cell 1 </td>
<td> Row 1 – Cell 2 </td>
</tr>

<tr>
<td> Row 2 – Cell 1 </td>
<td> Row 2 – Cell 2 </td>
</tr>

</table>

[/html]

Multiple Rows in HTML TABLE

Table Header

Apart from tr and td, there’s one more tag called the th (table header) tag. You can use it to make the text bold or strong. Check the code given below.

[html]

<table border=”2px” cellpadding=”10px” cellspacing=”20px” >

<tr>
<th> Row 1 – Cell 1 </th>
<th> Row 1 – Cell 2 </th>
</tr>

<tr>
<td> Row 2 – Cell 1 </td>
<td> Row 2 – Cell 2 </td>
</tr>

</table>

[/html]

HTML TABLE HEADER TAG

We have learned a lot about tables in this post. Now only two things are remaining – rowspan and colspan attribute of cells.

Row Span

The rowspan attribute of table data (td) tag will convert the cell to occupy multiple rows. For example, if rowspan is 2 for a particular cell then that cell will occupy 2 rows.

[html]

<table border=”2px” cellpadding=”10px” cellspacing=”20px” >

<tr>
<td rowspan=”2″> Row 1 – Cell 1 </td>
<td> Row 1 – Cell 2 </td>
</tr>

<tr>
<td> Row 2 – Cell 1 </td>
<td> Row 2 – Cell 2 </td>
</tr>

</table>

[/html]

HTML ROW SPAN 2

Col Span

The colspan attribute of table data (td) tag will convert the cell to occupy multiple columns. For example, if colspan is 2 for a particular cell then that cell will occupy 2 columns.

[html]

<table border=”2px” cellpadding=”10px” cellspacing=”20px” >

<tr>
<td colspan=”2″> Row 1 – Cell 1 </td>
<td> Row 1 – Cell 2 </td>
</tr>

<tr>
<td> Row 2 – Cell 1 </td>
<td> Row 2 – Cell 2 </td>
</tr>

</table>

[/html]

HTML COL SPAN 2

Thanks for reading and do subscribe to blog feed for more amazing posts. You can find the subscription box below.

Leave a Reply