HTML tables help organize data into rows and columns, making information easy to read and compare. They are useful for displaying schedules, price lists, product details, and more.

• Can include text, images, links, and other elements.
• Built using tags like <table>, <tr>, <th>, and <td>.
• Allow clear presentation of data for comparison.
• Can be styled with CSS for better design and readability.

An HTML table is created using the <table> tag.

• <tr> defines a table row.
• <th> defines a table header cell (usually bold and centered).
• <td> defines a table data cell that holds actual content.
• Each <tr> represents one row containing <th> or <td> cells.
• Cells can include text, images, lists, links, or even another table (nested table).

HTML Tables Tags

List of all the tags that we used in table formation in html:

• <table> : <table> defines the structure for organizing data in rows and columns within a web page.
• <tr> : <tr> represents a row within an HTML table containing individual cells.
• <th> : <th> shows a table header cell that typically holds titles or headings.
• <td> : <td> represents a standard data cell, holding content or data.
• <caption> : <caption> provides a title or description for the entire table.
• <thead> : <thead> defines the header section of a table, often containing column labels.
• <tbody> : <tbody> represents the main content area of a table, separating it from the header or footer.
• <tfoot> : <tfoot> specifies the footer section of a table, typically holding summaries or totals.
• <col> : <col> defines attributes for table columns that can be applied to multiple columns simultaneously.
• <colgroup> : <colgroup> groups together a set of columns in a table to which you can apply formatting or properties collectively.

Table Cells

Each table cell is defined by a <td> and a </td> tag.

Everything between <td> and </td> is the content of a table cell.

Table Rows

Each table row starts with a <tr> and ends with a </tr> tag.

You can have as many rows as you like in a table; just make sure that the number of cells are the same in each row.

Table Headers

Sometimes you want your cells to be table header cells. In those cases use the <th> tag instead of the <td> tag:

How To Add a Border

To add a border, use the CSS border property on table, th, and td elements:

Collapsed Table Borders

To avoid having double borders like in the example above, set the CSS border-collapse property to collapse.

This will make the borders collapse into a single border:

Style Table Borders

If you set a background color of each cell, and give the border a white color (the same as the document background), you get the impression of an invisible border:

Round Table Borders

With the border-radius property, the borders get rounded corners:

Skip the border around the table by leaving out table from the css selector:

Dotted Table Borders

With the border-style property, you can set the appearance of the border.

The following values are allowed:

• dotted    
• dashed    
• solid    
• double    
• groove    
• ridge    
• inset    
• outset    
• none    
• hidden     

Border Color

With the border-color property, you can set the color of the border.

HTML Table Padding & Spacing

HTML tables can adjust the padding inside the cells, and also the space between the cells.

HTML Table - Cell Padding

Cell padding is the space between the cell edges and the cell content.

By default the padding is set to 0.

To add padding on table cells, use the CSS padding property:

To add padding only above the content, use the ">th, td {
  ">: 10px;
  ">: 20px;
  ">: 30px;
  ">: 40px;
}