HTML Tutorial
HTML - Introduction HTML - Basic HTML - Structure HTML - Element HTML - Attributes HTML - Headings HTML - Paragraphs HTML - Styles HTML - Formatting HTML - Phrase Tags HTML - Quotations HTML - Comments HTML - Colors HTML - CSS HTML - Links HTML - Images HTML - Tables HTML - List HTML - Inline elements HTML - Block elements HTML - Classes HTML - Id HTML - Javascript HTML - File Path HTML - Iframe HTML - Responsive HTML - Computer Code HTML - Head tag HTML - Events HTML - Url Encoding HTML - Entities HTML - Validation
HTML Forms
HTML - Forms HTML - Form Elements HTML - Input types HTML - Input Attributes
HTML5
HTML5 - Introduction HTML5 - New Elements HTML5 - Semantics HTML5 - Style Guide
HTML Media
HTML - Video HTML - Audio HTML - Embed Multimedia
HTML Graphics
HTML - Canvas HTML - SVG
HTML APIs
HTML - Geolocation HTML - Drag & drop HTML - Web Storage HTML - Web Workers
HTML References
HTML - Tag Reference HTML - Tag by Category HTML - Attributes HTML - Global Attributes HTML - Events HTML - Language Codes HTML - Country Codes HTML - URL Encoding HTTP Methods HTTP Status Codes <input> types

HTML Tables

Name City Phone
Vishal Delhi 999945850
Espy Mizoram 8425896528
Mudit Jaipur 9858621233
Ankit Mumbai 9560478555
Nancy Delhi 9210154545
Run code

Creating an HTML Table

The HTML tables are created using the <table> tag.

The <tr> tag is used to create table rows and the <td> tag is used to create data cells.

A table heading is defined with the <th> tag. By default, table headings are bold and centered.

Run code

The <td> element can contain all sorts of HTML elements; text, images, lists, other tables, etc.



HTML Table - Adding a Border

Use CSS border property to add a border around your table:

The example below specifies a black border for <table>, <th>, and <td> elements:

Run code

HTML Table - Collapsed Borders

If you want the borders to collapse into one border, add the CSS border-collapse property.

Run code

HTML Table - Headings Alignment

By default, table headings are centered aligned.

You can use CSS text-align property to change headings alignment.

Run code

Spanning Multiple Rows and Cells

You can use colspan attribute if you want to merge two or more columns into a single column.

Similar way you can use rowspan attribute if you want to merge two or more rows.

Run code

HTML Table - Adding a Caption

To add a caption to a table, use the <caption> tag.

The <caption> tag will serve as a title or explanation for the table and it shows up at the top of the table.

Run code

Table Header, Body, and Footer

Tables can be divided into three sections − a header, a body, and a foot.

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

  • <thead> - encapsulates the header content in a table
  • <tbody> - encapsulates the body content in a table
  • <tfoot> - encapsulates the footer content in a table
Run code

Note: The <thead>, <tbody>, and <tfoot> elements will not affect the layout of the table by default. However, you can use CSS to style these elements.

This example use CSS to style <thead>, <tbody>, and <tfoot> elements:

Run code

Style table using CSS

In this section you will learn how to style a table using CSS in order to make a beautiful table.

Add the border-bottom property to <th> and <td> for horizontal dividers:

Run code

Use the :hover pseudo-class on <tr> to highlight table rows on mouse over:

Run code

For zebra-striped tables, use the :nth-child() pseudo-class and add a background-color to table rows:

Run code

You can learn more about styling table in our CSS Table Chapter.


HTML Table Tags

Below down is a list of tags which you can use in a table:

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