HTML Table

The HTML table tag is used to represent data in a tabular form (row * column). There can be a number of rows and columns. The HTML tables can arrange any type of data such as text, images, links. 

The HTML tables are created by using <table> tag which is the main tag in HTML. Here, the <tr> tag is used to create rows in a table. The <td> tag is used to create data in a cell of the table and the <th> tag is used to create heading in the table. In simple words, <th> tag make your text little emphasised as compared to the rest of text. 

HTML Table Tags

Tag	Description
<table>	Defines a table.
<tr>	Defines a row.
<th>	Defines a header cell.
<td>	Defines a cell.
<caption>	Defines the table caption.
<colgroup>	Specifies a group of one or more columns in a table for formatting.
<col>	<colgroup> element to specify column properties for each column.
<tbody>	Group the body content.
<thead>	Group the header content.
<tfoot>	Group the footer content.

HTML Table Example

Output of above written code is –

As the above mentioned table shows the data in the tabular form, however, this does not have any borders. Borders help make data more readable, organised and easy to understand. Now, let’s understand how to create a table with desired borders.

HTML Table with Border

There are two ways to specify border:- 

1. By border attribute in HTML
2. By border property in CSS

Let’s understand both methods one by one with example.

1) HTML Border Attribute

In the table, you can use the border attribute to specify border.

Output –

2) CSS Border Property

Here, the second way, use the border property of CSS to specify the border in the table.

HTML Table with Cellpadding

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

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

The cell padding attribute of HTML table tag is obsolete now. It is recommended to use CSS. So let’s see the code of CSS.

Output –

HTML Table with Cellspacing

Output –

HTML Table with colspan

Output –

 

HTML Table with Rowspan

You can use the rowspan attribute when you want to make a cell span more than one row then the rowspan attribute will help you.

Output –

HTML table with caption

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

Output –

Hope this blog post will help understanding the concept of tables in HTML better. Let us know if you have any suggestions for the published content on the site. Feel free to contact us if you wish to register yourself in our skill upgradation courses.

For more such content subscribe to our YouTube channel – https://www.youtube.com/channel/UCcWR1IezEQynJnAETgK8g2w?sub_confirmation=1 and follow us on facebook – https://www.facebook.com/pristinetechschool