HTML Table Tag: [Advanced] Guide To Beginners

  • Post category:HTML
  • Post author:
  • Post last modified:June 14, 2021
  • Reading time:11 mins read
You are currently viewing HTML Table Tag: [Advanced] Guide To Beginners

When you are working with HTML, many times you need to create an HTML table. The table in HTML is a very important part. Tables are using to not only arrange data, it also you to give a better look.

So, in this particular post, you are getting an in-depth guide on the HTML table tag. Here I explain all the things about the HTML table. After complete this tutorial, you are able to

  • How to Create a table
  • How to add a border to the table
  • How to add cell padding
  • Merge two or more rows/columns into one
  • Add background color or add a background image.
  • And how to add a caption to the table.

The <table> tag defines a table in HTML document. HTML table tag helps you to arrange data(text, number, images, audio, video, etc) into row and column-wise.

HTML Table Tag – Syntax

In HTML the <table> tag represents a table. The <tr> tag represents a table row under the table tag. And the <th> tag defines a table heading. Similarly <td> tag represents the tables each cell data.

<table>, <tr>, <th> and <td> with this four tag you can easily create a HTML table.

  • The <table> tag initiate a table in HTML. As i already discus the table starts with the <table> tag and closed with </table> tag.
  • The <tr>tag represents a table row, it write under the <table> tag. Similarly the <tr> tag starts with<tr> tag and closed with </tr> tag. And the table cell data write under the <tr> tag.
  • <th> tag represents a table rows or columns heading. By default the <th> tags value are bold and center aligned. Table headings tag start with the <th> tag and closed with </th> tag.
  • The <td> tag defines the tables for each cell data. By default <td> tags data are regular and left aligned. Table data elements has the <td> opening tag snd </td > closing tag.

HTML Table Code

<table>
<tr>
<th>Col 1</th><th>Col 2</th>
</tr>
<tr>
<td>R1C1</td><td>R1C2</td>
</tr>
<tr>
<td>R2C1</td><td>R2C2</td>
</tr>
<tr>
<td>R3C1</td><td>R3C2</td>
</tr>
</table>

Example

html-table-tag

HTML Table With Border

By default, a table has no border. In HTML 5 the border attribute treated as a deprecated element. If you want to add a border to the table, then you can use CSS border property to add the border.

<html>
<head>
<style>
table, th, td{
border:1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Col 1</th><th>Col 2</th>
</tr>
<tr>
<td>R1C1</td><td>R1C2</td>
</tr>
<tr>
<td>R2C1</td><td>R2C2</td>
</tr>
<tr>
<td>R3C1</td><td>R3C2</td>
</tr>
</table>
</body>
</html>

Example

table tag border

Collapse Borders in HTML Table

The previous example shows you how to add borders. But the borders are very ugly, here you can see how to collapse these borders.

<style>
table, th, td{
   border:1px solid black;
   border-collapse:collapse;
}
</style>

Result

table border collapse

Table Border Spacing

Here are another CSS property for tables called “border-spacing”. The border spacing property add space between borders, and the value of this property can be given on pixels.

<style>
table, th, td{
   border:1px solid black;
   border-spacing:5px;
}
</style>

Result

table border spacing

Table Cell Padding

Table cell padding are used for add extra free space under a table cell. This extra space add using CSS padding property. Its also give a better look to the table.

Example

<style>
table, th, td{
   border:1px solid black;
   border-spacing:5px;
   padding:10px;
}
</style>

Result

table cell padding

HTML Table Caption

The caption tag in HTML represents a table caption, it appears in the center of the table. This tag open with <caption> tag and closed with </caption> tag.

<table>
<caption>Table Caption</caption>
<tr>
<th>Col 1</th><th>Col 2</th>
</tr>
<tr>
<td>R1C1</td><td>R1C2</td>
</tr>
<tr>
<td>R2C1</td><td>R2C2</td>
</tr>
<tr>
<td>R3C1</td><td>R3C2</td>
</tr>
</table>

Result

table caption

Collapse Two or More cells

In many HTML pages you can see there are two or more cell collapse into one. Here are two HTML attribute use, rowspan for collapse tow or more rows and colspan use for collapse two or more columns.

HTML Table Colspan

The colspan attribute in the HTML table is used for span or collapse horizontal cells. This attribute value can be specified in numbers.

<table>
<caption>HTML Table</caption>
<tr>
<th>Col 1</th><th>Col 2</th><th>Col 3</th>
</tr>
<tr>
<td>R1C1</td><td colspan=2>R1C2&R1C3</td>
</tr>
<tr>
<td>R2C1</td><td>R2C2</td><td>R2C3</td>
</tr>
<tr>
<td>R3C1</td><td>R3C2</td><td>R3C3</td>
</tr>
</table>

Result

table colspan

HTML Table Rowspan

The rowspan attribute is used to span two or more vertical cells in table. Similarly the rowspan attribute value specified in numbers.

<table>
<caption>HTML Table</caption>
<tr>
<th>Col 1</th><th>Col 2</th><th>Col 3</th>
</tr>
<tr>
<td>R1C1</td><td rowspan=2>R1C2&R2C2</td><td>R1C3</td>
</tr>
<tr>
<td>R2C1</td>             <td>R2C3</td>
</tr>
<tr>
<td>R3C1</td><td>R3C2</td><td>R3C3</td>
</tr>
</table>

Result

row span

Ashim Khatua

Professionally Web Developer since 2015, And also a Blogger. I am the founder of SiteCodings.com. I love to share my knowledge, which I earned the past few years. I want to share my knowledge with you through my Blog. Keep Reading.

Leave a Reply