HTML Table


A table is a representation of data arranged in rows and columns. Really, it’s more like a spreadsheet. In HTML, with the help of tables, you can arrange data like images, text, links and so on into rows and columns of cells.

Common HTML Table tags

Other tags include:

  • <tr> – represents rows
  • <td> – used to create data cells
  • <th> – used to add table headings
  • <caption> – used to insert captions
  • <thead> – adds a separate header to the table
  • <tbody> – shows the main body of the table
  • <tfoot> – creates a separate footer for the table

HTML Table example:

First NameLast NameScore
JamesSmith50
EveJackson94
JohnDoe80
AdamJohnson67

HTML table

Tables are defined by the <table> tag. Each table has rows (defined by <tr> tags), and each row is divided into cells (defined by <td> tags). The letters td refer to table data, the contents of data cells. Data cells can contain text, pictures, lists, paragraphs, forms, horizontal lines, tables, and more.

Table Example

<tableborder="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 do not define the border property, the table will not display a border. Sometimes this is useful, but most of the time we want to show the border.

Use the border property to display a table with borders:

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

HTML table header

Table headers are defined using the <th> tag.

Most browsers will display the header as bold centered text:

Example

<tableborder="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>

Output


HTML table tag

LabelDescribe
<table>define table
<th>Define the header of the table
<tr>define the row of the table
<td>define table cells
<caption>define table title
<colgroup>Groups that define table columns
<col>Define properties for table columns
<thead>Define the header of the table
<tbody>Define the body of the form
<tfoot>Define the footer of the table