adding tables in html
to add a table in html we use the <table> tag. inside the <table> tag we use the <tr> tag to define a table row and inside the <tr> tag we use the <td> tag to define a table cell.
<table>
<tr>
<td>cell 1</td>
<td>cell 2</td>
</tr>
<tr>
<td>cell 3</td>
<td>cell 4</td>
</tr>
</table>
this will create a table with 2 rows and 2 columns.
table cells and rows
table cells are defined using the <td> tag and table rows are defined using the <tr> tag. each <tr> tag defines a new row in the table and each <td> tag defines a new cell in the row.
<table>
<tr>
<td>cell 1</td>
<td>cell 2</td>
</tr>
<tr>
<td>cell 3</td>
<td>cell 4</td>
</tr>
</table>
this will create a table with 2 rows and 2 columns.
table headers
table headers are defined using the <th> tag. the <th> tag is used to define a header cell in a table. header cells are usually displayed in bold and centered by default.
<table>
<tr>
<th>header 1</th>
<th>header 2</th>
</tr>
<tr>
<td>cell 1</td>
<td>cell 2</td>
</tr>
</table>
this will create a table with 2 columns and a header row.
vertical table headers
to create vertical table headers we can use the <th> tag inside the <tr> tag for each row. this will create a header cell for each row in the table.
<table>
<tr>
<th>header 1</th>
<td>cell 1</td>
</tr>
<tr>
<th>header 2</th>
<td>cell 2</td>
</tr>
</table>
this will create a table with 2 rows and a vertical header for each row.
colspan attribute
the colspan attribute is used to specify the number of columns a cell should span. to use the colspan attribute, we add it to the <td> or <th> tag and set its value to the number of columns we want the cell to span.
<table>
<tr>
<th colspan="2">header</th>
</tr>
<tr>
<td>cell 1</td>
<td>cell 2</td>
</tr>
</table>
this will create a table with a header that spans 2 columns.
rowspan attribute
the rowspan attribute is used to specify the number of rows a cell should span. to use the rowspan attribute, we add it to the <td> or <th> tag and set its value to the number of rows we want the cell to span.
<table>
<tr>
<th rowspan="2">header</th>
<td>cell 1</td>
</tr>
<tr>
<td>cell 2</td>
</tr>
</table>
this will create a table with a header that spans 2 rows.
table caption
the <caption> tag is used to define a caption for a table. the caption is usually displayed above the table.
<table>
<caption>table caption</caption>
<tr>
<th>header 1</th>
<th>header 2</th>
</tr>
<tr>
<td>cell 1</td>
<td>cell 2</td>
</tr>
</table>
this will create a table with a caption above it.
aligning texts in tables
to align text in table cells, we can use the align attribute in the <td> or <th> tags. the align attribute can take the values "left", "center", or "right".
<table>
<tr>
<th align="left">header 1</th>
<th align="center">header 2</th>
<th align="right">header 3</th>
</tr>
<tr>
<td align="left">cell 1</td>
<td align="center">cell 2</td>
<td align="right">cell 3</td>
</tr>
</table>
this will create a table with aligned text in the header and cells.
table borders
to add borders to a table, we can use the style attribute in the <table> tag. the border attribute takes a numeric value that specifies the width of the border in pixels.
<table style="border: 1px solid red">
<tr>
<th>header 1</th>
<th>header 2</th>
</tr>
<tr>
<td>cell 1</td>
<td>cell 2</td>
</tr>
</table>
this will create a table with borders around the table and its cells.
collapsed table borders
to collapse table borders, we can use the css property border-collapse in the style attribute of the <table> tag. setting border-collapse to "collapse" will merge the borders of adjacent cells into a single border.
<table style="border: 1px solid red; border-collapse: collapse">
<tr>
<th>header 1</th>
<th>header 2</th>
</tr>
<tr>
<td>cell 1</td>
<td>cell 2</td>
</tr>
</table>
this will create a table with collapsed borders.
html table width
to set the width of a table, we can use the width attribute in the <table> tag. the width attribute can take a numeric value (in pixels) or a percentage value.
<table width="500">
<tr>
<th>header 1</th>
<th>header 2</th>
</tr>
<tr>
<td>cell 1</td>
<td>cell 2</td>
</tr>
</table>
this will create a table with a width of 500 pixels.
cell padding
to add padding to table cells, we can use the style attribute in the <table> tag. the cellpadding attribute takes a numeric value that specifies the amount of padding (in pixels) to be added to each cell.
<table style="padding: 1px">
<tr>
<th>header 1</th>
<th>header 2</th>
</tr>
<tr>
<td>cell 1</td>
<td>cell 2</td>
</tr>
</table>
this will create a table with 10 pixels of padding in each cell.
we can also use height instead of width to set the height of the table
cell spacing
to add spacing between table cells, we can use the style attribute in the <table> tag. the cellspacing attribute takes a numeric value that specifies the amount of spacing (in pixels) to be added between each cell.
<table style="border-spacing: 1px">
<tr>
<th>header 1</th>
<th>header 2</th>
</tr>
<tr>
<td>cell 1</td>
<td>cell 2</td>
</tr>
</table>
this will create a table with 10 pixels of spacing between each cell.
table horizontal and vertical table stripes
to create horizontal and vertical stripes in a table, we can use the css properties nth-child and nth-of-type. these properties allow us to select specific rows or columns in the table and apply styles to them.
td:nth-child(even) {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
this will create a table with horizontal and vertical stripes.
horizontal dividers
to add horizontal dividers to a table, we can use the border-bottom property in the style attribute of the <td> or <th> tags. this property allows us to add a border to the bottom of each cell.
<table>
<tr>
<th style="border-bottom: 1px solid black">header 1</th>
<th style="border-bottom: 1px solid black">header 2</th>
</tr>
<tr>
<td style="border-bottom: 1px solid black">cell 1</td>
<td style="border-bottom: 1px solid black">cell 2</td>
</tr>
</table>
this will create a table with horizontal dividers between each row.
hoverable dividers
to create hoverable dividers in a table, we can use the :hover pseudo-class in css. this allows us to change the style of a table row when the user hovers over it with their mouse.
tr:hover {
background-color: #f1f1f1;
}
this will create a table where the background color of a row changes when the user hovers over it.
colgroup
the <colgroup> tag is used to group columns in a table. it is used to apply styles to multiple columns at once. the <colgroup> tag is placed inside the <table> tag, before the <tr> tags.
<table>
<colgroup>
<col span="2" style="background-color: #f2f2f2">
</colgroup>
<tr>
<th>header 1</th>
<th>header 2</th>
</tr>
<tr>
<td>cell 1</td>
<td>cell 2</td>
</tr>
</table>
this will create a table with a colgroup that applies a background color to the first two columns.
col
the <col> tag is used to define a column in a table. it is used inside the <colgroup> tag to apply styles to specific columns. the <col> tag can take attributes such as span and style.
<table>
<colgroup>
<col style="background-color: #f2f2f2">
<col style="background-color: #f9f9f9">
</colgroup>
<tr>
<th>header 1</th>
<th>header 2</th>
</tr>
<tr>
<td>cell 1</td>
<td>cell 2</td>
</tr>
</table>
this will create a table with two columns, each with a different background color.
legal css properties for colgroup
the <colgroup> and <col> tags can accept various css properties to style the columns. some legal css properties for colgroup and col include:
- background-color
- width
- border
- padding
- text-align
these properties can be applied to the <colgroup> or <col> tags to style the columns in the table.
multiple col element,empty col elements and hide col elements
we can use multiple <col> elements inside a <colgroup> to style different columns in a table. we can also create empty <col> elements to skip styling for certain columns. to hide a column, we can set the display property to "none" in the style attribute of the <col> tag.
<table>
<colgroup>
<col style="background-color: #f2f2f2">
<col>
<col style="display: none">
</colgroup>
<tr>
<th>header 1</th>
<th>header 2</th>
<th>header 3</th>
</tr>
<tr>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
</tr>
</table>
this will create a table with the first column styled, the second column unstyled, and the third column hidden.
tip
we can also style different rows and columns and even cells in tables