#12 HTML Tables

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.

html table structure
Table structure


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.


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

All and some Additional Table Tags

<table>Defines a table
<th>Defines a header cell in a table
<tr>Defines a row in a table
<td>Defines a cell in a table
<caption>Defines a table caption
<colgroup>Specifies a group of one or more columns in a table for formatting
<col>Specifies column properties for each column within a <colgroup> element
<thead>Groups the header content in a table
<tbody>Groups the body content in a table
<tfoot>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

Leave a Comment

Copy link
Powered by Social Snap