HTML Tables

Creating Tables in HTML

In HTML, tables are used to organize and display data in rows and columns. A table is created using the <table> tag, and each row in the table is created using the <tr> tag. Within each row, cells are created using the <td> tag.

Contents

HTML TUTORIALS HTML5 FEATURES HTML5 References HTML Tables Creating Tables in HTML Adding Captions to Tables

For example, a table with two rows and two columns would look like this:

<table>
  <tr>
   <td>Row 1, Column 1</td>
   <td>Row 1, Column 2</td>
 </tr>
 <tr>
  <td>Row 2, Column 1</td>
  <td>Row 2, Column 2</td>
 </tr>
</table>

This would create a table that looks like this:

Row 1, Column 1	Row 1, Column 2
Row 2, Column 1	Row 2, Column 2

Tables can be customized using various attributes. The border attribute can be used to add a border to the table, and the cellpadding and cellspacing attributes can be used to add padding and spacing to the cells.

Table headers can also be added using the <th> tag instead of the <td> tag. This is useful when the first row of a table is meant to serve as a header for the columns.

For example, a table with a header row would look like this:

<table>
  <tr>
   <th>Column 1</th>
   <th>Column 2</th>
 </tr>
 <tr>
  <td>Row 1, Column 1</td>
  <td>Row 1, Column 2</td>
 </tr>
  <tr>
  <td>Row 2, Column 1</td>
 <td>Row 2, Column 2</td>
 </tr>
</table>

This would create a table that looks like this:

Column 1	Column 2
Row 1, Column 1	Row 1, Column 2
Row 2, Column 1	Row 2, Column 2

Adding Captions to Tables

You can specify a caption (or title) for your tables using the <caption> element.

The <caption> element must be placed directly after the opening <table> tag. By default, caption appears at the top of the table, but you can change its position using the CSS caption-side property.

The following example shows how to use this element in a table.

<table> 
  <caption>Users Info</caption> 
  <tr> 
    <th>No.</th> 
    <th>Name</th> 
    <th>Age</th> 
 </tr> 
 <tr> 
   <td>1</td> 
   <td>Peter Parker</td> 
   <td>16</td> 
 </tr> 
 <tr> 
   <td>2</td> 
   <td>Clark Kent</td> 
   <td>34</td> 
 </tr> 
</table>

This would create a table that looks like this:

Users Info
No.	Name	Age
1	Peter Parker	16
2	Clark Kent	34

Tables can also be made responsive using CSS, allowing them to adapt to different screen sizes and devices.