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>