HTML Tables
HTML tables allow web developers to arrange data into rows and
columns.
Define an HTML Table
● A table in HTML consists of table cells inside rows and columns.
● Each table row starts with a <tr> and ends with a </tr> tag.
● Each table cell is defined by a <td> and a </td> tag.
● td stands for table data.
● Everything between <td> and </td> are the content of the
table cell.
● Sometimes you want your cells to be table header cells. In
those cases use the <th> tag instead of the <td> tag
Output
HTML Table - Colspan
To make a cell span over <tr> <tr>
multiple columns, use
the colspan attribute: <td>Jill</td> <td>Eve</td>
<table> <td>Smith</td> <td>Jackson</td>
<tr> <td>43</td> <td>57</td>
<th colspan="2"> </tr> </tr>
Name
</table>
</th>
<th>Age</th>
</tr>
<tr>
HTML Table - Rowspan
<th
rowspan="2">Phone</th>
To make a cell span over multiple
rows, use the rowspan attribute: <td>555-1234</td>
<table> </tr>
<tr>
<th>Name</th> <tr>
<td>Jill</td> <td>555-8745</td>
</tr>
</tr> </table>
Table Borders
● To add a border, use the CSS border property on table, th, and td elements:
table, th, td {
border: 1px solid black;
● To avoid having double borders like in the example above, set the CSS
border-collapse property to collapse.
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
Style Table Borders
● If you set a background color of each cell, and give the border a white color
(the same as the document background), you get the impression of an
invisible border:
table, th, td {
border: 1px solid white;
border-collapse: collapse;
th, td {
background-color: #96D4D4;
}
Round Table Borders
With the border-radius property, the borders get rounded corners:
table, th, td {
border: 1px solid black;
border-radius: 10px;
}
Skip the border around the table by leaving out table from the css selector:
th, td {
border: 1px solid black;
border-radius: 10px;
}
With the border-style property, you can set the appearance of the border.
The following values are allowed:
● dotted
● dashed
● solid
● double
● groove
● ridge
● inset
● outset
● none
● hidden
Border Color
With the border-color property, you can set the color of the border.
th, td {
border-color: #96D4D4;
}
HTML Table Sizes
● HTML tables can have different sizes for each column, row or the entire
table.
● Use the style attribute with the width or height properties to specify the
size of a table, row or column.
● To set the width of a table, add the style attribute to the <table> element:
● To set the size of a specific column, add the style attribute on a <th> or
<td> element:
● To set the height of a specific row, add the style attribute on a table row
element:
HTML Table Headers
HTML tables can have headers for each column or row, or for many
columns/rows.
Table headers are defined with th elements. Each th element represents a table
cell. .
ex…
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
Vertical Table Headers
To use the first column as table
headers, define the first cell in each
row as a <th> element: <th>Lastname</th>
Example <td>Saifi</td>
<table> <td>Kumar</td>
<tr> </tr>
<th>Firstname</th> <tr>
<td>Aayan</td> <th>Age</th>
<td>Prince</td> <td>83</td>
</tr> <td>29</td>
<tr> </tr>
</table>
Align Table Headers
● By default, table headers are bold and centered:
● To left-align the table headers, use the CSS text-align property:
<style>
th {
text-align: left;
</style>
Table Caption
You can add a caption that serves as a heading for the entire table.
To add a caption to a table, use the <caption> tag:
<caption>Here goes your caption/ title of table</caption>
HTML Table Sizes
HTML tables can have different sizes for each column, row or the entire
table.
Use the style attribute with the width or height properties to specify
the size of a table, row or column.
HTML Table: Height and Width
● To set the width of a table, add the style attribute to the <table>
element:
<table style="width:100%">
● To set the size of a specific column, add the style attribute on a <th>
or <td> element:
<th style="width:70%">Firstname</th>
● To set the height of a specific row, add the style attribute on a table
row element:
<tr style="height:200px">
