HTML Tables :Tutorials You Should Know in 2021 |

HTML Tables allow web authors to arrange data like text, images, links, other tables, etc. into rows and columns of cells.

The HTML Tables are created using the <table> tag in which the <tr> tag is used to create table rows and <td> tag is used to create data cells. The elements under <td> are regular and left aligned by default

HTML Tables Heading

HTML Tables heading can be defined using <th> tag. This tag will be put to replace <td> tag, which is used to represent actual data cell. Normally you will put your top row as table heading as shown below, otherwise you can use <th> element in any row. Headings, which are defined in <th> tag are centered and bold by default.

Using HTML Tables

A table is defined using the <table> element, and contains a number of table cells ( <td>, for “table data” ) which are organized into table rows ( <tr>). The markup (HTML code) for a table is always based on rows, never columns.
Table cells which act as column headers or row headers should use the <th> (table header) element.

Table cells can be merged using the colspan and rowspan attributes.HTML Tables can be broken into sections using the following elements:

<thead> — header
<tbody> — body
<tfoot> — footer

A caption can be added to a table using the <caption> element.You can use <col> and <colgroup> to define table columns for styling on HTML Tables. However, there are a number of limitations with this practice.

Colspan and Rowspan Attributes

You will use colspan attribute for HTML Tables if you want to merge two or more columns into a single column. Similar way you will use rowspan if you want to merge two or more rows.

HTML Tables Backgrounds

You can set table background using one of the following two ways −

bgcolor attribute − You can set background color for whole table or just for one cell.
background attribute − You can set background image for whole table or just for one cell.

You can also set border color also using bordercolor attribute

Table Caption

The caption tag will serve as a title or explanation for the table and it shows up at the top of the table. This tag is deprecated in newer version of HTML/XHTML.

Table Header, Body, and Footer

The head and foot are rather similar to headers and footers in a word-processed document that remain the same for every page, while the body is the main content holder of the table.

The three elements for separating the head, body, and foot of a table are −

<thead> −create a separate table header.
<tbody> − to indicate the main body of the table.
<tfoot> − for create a separate table footer.

A table may contain several <tbody> elements to indicate different pages or groups of data. But it is notable that <thead> and <tfoot> tags should appear before <tbody>

Table Code Sample: Simple Table

<table>
 <tr>
  <th>Name</th>
  <th>Favorite Color</th>
 </tr>
 <tr>
  <td>Bob</td>
  <td>Yellow</td>
 </tr>
 <tr>
  <td>Michelle</td>
  <td>Purple</td>
 </tr>
</table>

Creating HTML Tables

HTML Tables allows you to arrange data into rows and columns.They are commonly used to display tabular data like product listings, customer’s details, financial reports, and so on.

You can create a table using the <table>HTML Tables element. Inside the <table> element, you can use the <tr> elements to create rows, and to create columns inside a row you can use the <td> elements. You can also define a cell as a header for a group of table cells using the <th> element.