HTML tables

HTML tables are defined by the <table> tag.

An HTML table is a markup language element used to display structured data.

Each table has several rows (defined by the <tr> tag), each row is divided into several cells (defined by the <td> tag), and the table can contain a header row ( <th> ) to define the column titles.

• tr : tr is the abbreviation of table row, which means a row of a table.
• td : td is the abbreviation of table data, which means the data cell of the table.
• th : th is the abbreviation of table header, which means the header cell of the table.

Data cells can contain text, images, lists, paragraphs, forms, horizontal lines, tables, and more.

HTML table generator:https://tools.it-res.com。

The following is a simple HTML table example:

<table>
  <thead>
    <tr>
      <th> Column Heading 1 </th>
      <th> Column Heading 2 </th>
      <th> Column Heading 3 </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> Row 1, Column 1 </td>
      <td> Row 1, Column 2 </td>
      <td> Row 1, Column 3 </td>
    </tr>
    <tr>
      <td> Row 2, Column 1 </td>
      <td> Row 2, Column 2 </td>
      <td> Row 2, Column 3 </td>
    </tr>
  </tbody>
</table>

In the table example code above, the <table> element represents the entire table, which consists of two main parts: <thead> and <tbody>.

• <thead> is used to define the title part of the table: in <thead>, use the <th> element to define the column titles. In the above example, the column titles are “Column Title 1”, “Column Title 2” and “Column Title 3”.
• <tbody> is used to define the main part of the table: in <tbody>, use the <tr> element to define the rows, and use the <td> element to define the cell data in each row. In the above example, there are two rows of data, and each row contains three cells.

By using the <th> element to define column headers, you can make them appear bold in the table, distinguishing them from regular cells.

HTML tables can also have other parts, such as <tfoot> (table footer) and <caption> (table title). <tfoot> can be used to define content such as summaries, statistics, etc. at the bottom of the table. <caption> can be used to define a title for the entire table.

HTML tables also support merging cells and cross-row/cross-column operations, as well as the application of other styles and attributes to meet various needs.

We can also use CSS to further customize the style and appearance of the table.

Online Instance

<h4> One column:</h4>
<table border="1">
  <tr>
    <td>100</td>
  </tr>
</table>
 
<h4>One row and three columns:</h4>
<table border="1">
  <tr>
    <td>100</td>
    <td>200</td>
    <td>300</td>
  </tr>
</table>
 
<h4>Two rows and three columns:</h4>
<table border="1">
  <tr>
    <td>100</td>
    <td>200</td>
    <td>300</td>
  </tr>
  <tr>
    <td>400</td>
    <td>500</td>
    <td>600</td>
  </tr>
</table>

Try it yourself »

(More examples can be found at the bottom of this page.)

Table Example

<table border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

The browser displays the following:

HTML table and border attributes

If you don’t define the border property, the table will not display a border. Sometimes this is useful, but most of the time, we want to display the border.

Use the border property to display a table with a border:

<table border="1">
    <tr>
        <td>Row 1, cell 1</td>
        <td>Row 1, cell 2</td>
    </tr>
</table>

HTML table header

The table header is defined using the <th> tag.

Most browsers will display the table header as bold, centered text:

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

The browser displays the following:

More examples

a table without borders
This example demonstrates a table without borders .

Heading in a table(Heading)
This example demonstrates how to display a table header.

Table with a caption
This example demonstrates a table with a caption.

table cells that span rows or columns
This example demonstrates how to define table cells that span rows or columns .

This example
demonstrates how to display elements within different elements.

Cell padding(Cell padding)
This example demonstrates how to use cell padding to create space between the cell contents and its borders.

Cell spacing(Cell spacing)
This example demonstrates how to use Cell spacing to increase the distance between cells.

Beautiful tables

HTML 表格标签