HTML Tables used to display information in tabular structure. Table is a matrix of rows and columns and the area formed due to intersection of a row and a column is called cell.

Basic Table Structure

To create a table first start with <table> and </table> is used for ending the table.

Inside <table>...</table> tag we can create rows and columns. For that we are using <tr>...</tr> for rows and columns are created using <td>...</td> tags.

Following is the table structure with tags.

Example

See the Pen table ex 1 by Arpit (@soniarpit) on CodePen.

In above table, attribute border="2" is sets the table border. You can give any value to set the desired border.

The <caption>...</caption> used to give caption of the table we can set this caption either at the top or at the bottom by using align attribute.

Then using the tag <th> table heading we can define heading for the table.

Then using the tag <tr> table row to build table rows. The <td> table data tag is used to create columns from left to right.

RowSpan and ColSpan

Sometimes we my require to adding sub-rows or sub-columns to categorize the information properly.

In such a situation colspan and rowspan attribute can be used.

The rowspan is used to extend the row vertically and colspan is used to extend the column horizontally.

Example

See the Pen rowspan and colspan by Arpit (@soniarpit) on CodePen.

All and some Additional Table Tags

Tag

Description

element Defines a table Defines a header cell in a table Defines a row in a table Defines a cell in a table Defines a table caption Specifies a group of one or more columns in a table for formatting Specifies column properties for each column within a Groups the header content in a table Groups the body content in a table Groups the footer content in a table Example of all above tag See the Pen all table tags by Arpit (@soniarpit) on CodePen. Example 1 See the Pen table ex1 by Arpit (@soniarpit) on CodePen. Example 2 See the Pen table ex 2 by Arpit (@soniarpit) on CodePen. Example 3 See the Pen table exampl3 by Arpit (@soniarpit) on CodePen. Hope you enjoyed. Happy coding :) Previous: #11 HTML Images Next: #13 HTML Lists