HTML – Table Tag in HTML with Example

HTML Table Tag

An HTML table is a two-dimensional matrix, consisting of rows and columns. Tables are intended for displaying data in columns on a web page.

The table tag is represented

 <table> </table>

and The Row of the table is described between

 <tr> </tr>

the column of a table is described between

 <td> </td>

The intersection of row and column is sometimes called a cell. Using the table can give you much greater control over how your text is displayed on a row and column in a respective manner.

These are the list of parameters that can be used in Table.

Parameter Name Description
Align Indicates whether the table should be aligned to the left or right of the page.
Background Provides an image to use as the background of the table.
Bgcolor Provides a color for the table’s background.
Border The width of the table border will be specified; if 0 is used, there will be no border
Cellpadding Determines how many pixels are between each cell’s border and its contents
Cellspacing Specifies the number of pixels between the cells in the table
Cols It determines the number of columns in the table; This value is not required as the table will count the numbers of columns you create.
Height You will define the height of the table in pixels or the percentage.
Width You will define the width of the table in the pixels or the percentage.

The TR Tag (Table Row Tag)

TR is known as a table row. It will indicate the beginning of the table row. Takes several optional attributes.

Parameter Name Description
Align The alignment of the content of the cell can be left, right, and the center of the page.
Background It specifies an image to use as the background of the cells in the row.
Bgcolor It will specify the color to be used as the background of the cell. It can be different on different cells.

The TH Tag (Table Heading Tag)

The table heading tag is used to indicate the table heading in HTML. The heading is used at the top of each column and it does also take several optional parameters.

Parameter Name Description
Align Alignment specifics the alignment of the content left, right, and center of the page.
Background Image can be used as a background for the cells in the row.
Bgcolor Color of the cell in the background
Colspan It will define how many columns the heading or title should span.
Rowspan It will define how many rows the heading should span.
Valign Will define whether the content should be aligned vertically or top middle bottom or the baseline of the cell
Width Defines the width of the cell.

TR Tag (Table Definition) Tag

TR tag stands for table definition and marks the content of the cell and it does have the parameters the Table heading uses like align, background, bgcolor, colspan, rowspan, valign, and width.

The Caption Tag

The caption tag itself describes that it will denote the caption of the table and it will be indicated with the tags

<caption> </caption>

It will be written under the table tag <table></table>. It has align attribute which controls the placing of the caption with respect to the table.

align=bottom
  • immediately below the table
align=top
  • immediately above the table

HTML Table Examples

Example 1

<table border="1" width="20%">
<caption align="top">Student Name</caption>
<tbody>
<tr>
<th>Name 1</th>
<th>Name 2</th>
</tr>
<tr align="center">
<td>Student 1</td>
<td>Student 2</td>
</tr>
</tbody>
</table>

Example 2

<table border="1" width="20"><caption align="top">List List</caption>
<tbody>
<tr>
<th rowspan="2">Name1</th>
<th colspan="3">Name2</th>
</tr>
<tr>
<td>HTML</td>
<td>CSS</td>
<td>Javascript</td>
</tr>
<tr>
<td>C</td>
<td>C++</td>
<td>C#</td>
<td>Python</td>
</tr>
<tr>
<td>Name 3</td>
<td>Name 4</td>
<td>Name 5</td>
<td>Name 6</td>
</tr>
</tbody>
</table>