The HTML table tag is used in tabular form (row * column) for displaying the data. A row can contain many columns.

With the help of < t >, < td >, and <th> elements, a table can be created to display the data in a tabular form.

In each table, the row of the table is defined by the < t > tag, the header of the table is defined by < th >, and the data of the table is defined by the < td > tag.

HTML tables are used for page layout manage, e.g. header section, navigation bar, body text, footer section, etc.

But div tag over table is recommended to manage page layout.

HTML Table Tags

Tag Description
<table> It defines a table.
<tr> Defines a row in the table.
<th> Defines the header cell in tha table.
<td> Defines the cell in tha table.
<caption> Defines the caption of the table.
<col> Use the < colgroup > element to specify the properties of the column for each column.
<colgroup> In the formatting table, specifies the group of one or more columns.
<tbody> It is used to group body content into a table.
<thead> It is used to group the content of the header in a table.
<tfooter> It is used to group the contents of the header into a table.

HTML Table Example

Let’s look at the table tag example in HTML. Output is displayed above.

Code

Output

HTML Table Tag

The html table above gives 5 rows and 3 columns = 5 * 3 = 15 values.

HTML Table with Border

There are two ways to set HTML tables border.

  1. By border attitude of table in HTML
  2. By border property in CSS

HMTL Border attribute

In HTML you can use the table tag border attribute to specify the boundary. But, it’s not recommended now.

Output

HTML Table Tag

CSS Border property

Now it’s recommended that you use the CSS border property to specify the table border.

Output

HTML Table Tag

In one border, you can break all borders with border-collapse properties. The border will collapse into one.

Output

HTML Table Tag

HTML Table with cell padding

You can specify the padding for the table header and table data in two ways:

  1. The cellpadding attribute of the table in HTML
  2. By padding property in CSS

The HTML table tag cellpadding attribute is now obsolete. It’s recommended that you use the CSS. So let’s look at the CSS code.

Output

HTML Table Tag

HTML Table width

You can use the CSS width property to specify the width of the HTML table. It can be defined in percentages or in pixels.

We can adjust the width of our table according to our requirements. The following example is the table with width to be displayed.

Example

Output

HTML Table Tag

HTML Table with colspan

If you want to make more than one column of a cell span, you can use the colspan attribute.

It divides one cell / row into multiple columns, and the number of columns depends on the value of the colspan attribute.

Let’s see the two columns span the example.

CSS Code

HTML Code

Example

Output

HTML Table Tag

HTML Table with rowspan

You can use the rowspan attribute if you wish to make a cell span more than one row.

It breaks up a cell into multiple sections. The number of split rows will depend on the values in rowspan.

Let’s take a look at the example that spans two rows.

CSS Code

HTML Code

Example

Output

HTML Table Tag

HTML table with caption

The HTML caption is shown above the table. It must only be used after the table tag.

Output

HTML Table Tag

Styling HTML table even and odd cells

CSS Code

 

Output

HTML Table Tag

Supporting Browsers

Element Chrome IE Firefox Opera Safari
<table> Yes Yes Yes Yes Yes

Pin It on Pinterest

Share This