How To

How to create a table in HTML

Updated On: 2024-06-02

A <table> in HTML is used to create a structured data layout with rows and columns. We use <tr> for table rows, <th> for header cells, and <td> for standard cells.

Tables can include attributes for styling, like border and cellpadding. Nesting allows for complex table structures.

Basic Syntax of a table in HTML

Elements of HTML Table

<table>

The <table> element defines the beginning and ending of a table. This element contains the entire table.


<tr>

It defines a row within the <table> element. Each <tr> tag represents a horizontal row of cells or data entries.


<th>

<th> is an HTML element used to define a header cell in a table. It typically appears within a <tr> (table row) element.


<td>

<td> is an HTML element used to define a standard cell in a table. It appears within a <tr> (table row) element. Content inside a <td> tag is displayed as regular table data, typically left-aligned and not bold, distinguishing it from header cells defined with <th>.


<thead>

<thead> is an HTML element used to group the header content of a table. It typically contains one or more <tr> (table row) elements, which in turn contain <th> (table header) elements. This helps in organizing and styling the table headers consistently, and also aids in table accessibility and structure.


<th>


<th>

is an HTML element used to define a header cell in a table. It typically appears within a

<tr>

(table row) element. Text inside a

<th>

tag is bold and centered by default, providing a visual distinction from regular table cells defined with

<td>

<tbody>

<tbody> is an HTML element used to group the body content in a table. It typically contains multiple <tr> (table row) elements, each with <td> (table data) elements. This helps in organizing and structuring the main content of the table separately from the header (<thead>) and footer (<tfoot>).


<tfoot>

<tfoot> is an HTML element used to group the footer content in a table. It typically contains one or more <tr> (table row) elements, which can contain either <th> (table header) or <td> (table data) elements. The <tfoot> element is used to summarize or provide concluding information about the table data, and it helps in organizing the table structure.


<colgroup> and <col>

<colgroup> is an HTML element used to group one or more <col> elements, which define column properties for an HTML table. The <col> element specifies the width and other attributes of a column, allowing for easier and consistent styling and alignment of table columns.


<caption>

<caption> is an HTML element used to provide a title or a brief description for a table. It is placed directly after the <table> tag and helps in making the table more accessible and understandable by providing context about the table's content.Adding a border to an HTML Table

Syntax

table, th, td {
      border: 1px solid black;
}

This syntax will create a border of 1px solid black. Lets see how the table looks like with this border.

Adding Collapsed Borders in an HTML Table

Syntax

 table, th, td {
       border: 1px solid black;
       border-collapse: collapse;
   }

This syntax will remove the border. Lets run the following code and output. 

Adding Cell Padding in an HTML Table

Syntax

th, td {
        padding: 20px;}

Table code with cell padding

Adding Left Align Headings in an HTML Table

Syntax

  th {
      text-align: left;
}

Adding Border Spacing in an HTML Table

Syntax

  table {
      border-spacing: 5px;
}

Adding Cells that Span Many Columns in HTML Tables

Adding Cells that span many rows in HTML Tables

Adding a Caption in an HTML Table

Syntax

Adding a Background Colour to the Table

Syntax

table#t01 {
            width: 100%;
            background-color: #f2f2d1;
 }

Creating Nested Tables

Related Resources

For more information, you can use the following resources:

How to Create Table in HTML at Geeksforgeeks


Related Reads