HTML tables are used for arranging the data in the form of rows and columns. The data can be a number, simple text, formatted text, images, links, form fields and so on.
HTML table is created with
<table> tag, table rows with
<tr> tag, table data with
<td> tag and table heading with
<th> tag.
<table>
<tr><th>Heading 1</th><th>Heading 2</th>
<tr><td>Data 1</td><td>Data 2</td>
<tr><td>Data 3</td><td>Data 4</td>
</table>
| Heading 1 | Heading 2 |
|---|
| Data 1 | Data 2 |
| Data 3 | Data 4 |
Table with borders
Lets make use of border attribute for creating the border for table. If border attribute is not specified or assigned a value of 0, border will not get displayed. Data specified in
<th> tags will be centered and bold.
<table border>
<tr><th>Heading 1</th><th>Heading 2</th>
<tr><td>Data 1</td><td>Data 2</td>
<tr><td>Data 3</td><td>Data 4</td>
</table>
| Heading 1 | Heading 2 |
|---|
| Data 1 | Data 2 |
| Data 3 | Data 4 |
Collapsed borders
Table border can be collaped with
border-collapse CSS property.
Setting the value to
collapse give the look of single line collapsed border else it will be detached by default in HTML
<style>
table {
border-collapse: collapse;
}
</style>
<table border>
<tr><th>Heading 1</th><th>Heading 2</th>
<tr><td>Data 1</td><td>Data 2</td>
<tr><td>Data 3</td><td>Data 4</td>
</table>
| Heading 1 | Heading 2 |
|---|
| Data 1 | Data 2 |
| Data 3 | Data 4 |
Table with Caption
<caption> tag is used for providing brief description about the HTML table. Description should be in few words which describes inshorts about the table.
<table border>
<caption>Caption content goes here</caption>
<tr><th>Heading 1</th><th>Heading 2</th>
<tr><td>Data 1</td><td>Data 2</td>
<tr><td>Data 3</td><td>Data 4</td>
</table>
Caption content goes here
| Heading 1 | Heading 2 |
|---|
| Data 1 | Data 2 |
| Data 3 | Data 4 |
Caption content can be displayed on top or on the bottom of the table using the CSS property,
caption-side. It takes the values top and bottom. By default most of the browsers displays the caption content on top of the table. It can be overriden with CSS.
<table border style="caption-side:bottom">
Caption content goes here
| Heading 1 | Heading 2 |
|---|
| Data 1 | Data 2 |
| Data 3 | Data 4 |
Table Width and Height
Table width and height can be changed with CSS table width and height properties
Values can be specified either in pixels for standard formatting or in perentage with respect to its parent element
<table border style="width:200px; height:200px; border-collapse: collapse;" >
OR
table {
width:200px;
height:200px;
border-collapse: collapse;
}
| Heading 1 | Heading 2 |
|---|
| Data 1 | Data 2 |
| Data 3 | Data 4 |
Width of HTML table can be increased upto its parent element by setting
width:100%.
<table border style="width:100%; height:200px; border-collapse: collapse;" >
OR
table {
width:100%;
height:200px;
border-collapse: collapse;
}
| Heading 1 | Heading 2 |
|---|
| Data 1 | Data 2 |
| Data 3 | Data 4 |
HTML Table Padding
Padding is defined as the sapce between the border and content in a table. More is the padding value, more space is set between the border and content.
It can be set on <td> and <th> HTML table tags.
th, td {
padding: 20 px;
}
OR
<th style="padding:20px">
<td style="padding:20px">
| Heading 1 | Heading 2 |
|---|
| Data 1 | Data 2 |
| Data 3 | Data 4 |
Text alignment in HTML table
Two types of text alignment are
- Horizontal alignment
- Vertical alignment
Horizontal alignment:
The <code>text-align</code> CSS property should be used for aligning the text in left, right or center. By default, content of <td> tags are aligned left and content of <th> tags are aligned in the center.
Vertical alignment:
The
vertical-align CSS property should be used for aligning the text in top, middle or bottom. By default, content of
<td> and <th> tags are center aligned.
Background Color in HTML tables
Table background color can be changed with the
background-color CSS property. This will apply the specified color. You can color the selected rows by applying the colors to
<tr> tags.
Background color of even and odd rows can be changed using the
nth-child(even) and
nth-child(odd) CSS properties on
<tr> tags. This will create a stripped table.