Today I would like to take a closer look at the <table> HTML element. Tables are used to represent tabular data (tables shouldn’t be used for page layouts, you can read more here).
A table allows you to look up values that indicate some kind of connection between different types of data, like days of the week, or a person and their age.
An HTML table is defined with the <table> tag. Each table row is defined with <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. A table data/cell is defined with the <td> tag. The HTML <td> element can contain text, images, lists or other tables.
Example:
<!DOCTYPE html>
<html>
<body>
<table style="width:100%">
<tr>
<th>Name</th>
<th>Last name</th>
<th>Age</th>
</tr>
<tr>
<td>Anna</td>
<td>Brown</td>
<td>47</td>
</tr>
<tr>
<td>Tom</td>
<td>White</td>
<td>12</td>
</tr>
<tr>
<td>Johny</td>
<td>Deep</td>
<td>34</td>
</tr>
</table>
</body>Output:
If you do not specify a border the table will be displayed without borders. HTML table borders are specified using CSS. To set the border of an HTML table, use CSS border property.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h3> This is the HTML Bordered Table</h3>
<table style="width:100%">
<tr>
<th>Name</th>
<th>Last name</th>
<th>Age</th>
</tr>
<tr>
<td>Anna</td>
<td>Brown</td>
<td>47</td>
</tr>
<tr>
<td>Tom</td>
<td>White</td>
<td>12</td>
</tr>
<tr>
<td>Johny</td>
<td>Deep</td>
<td>34</td>
</tr>
</table>
</body>
</html>
Output:
HTML Collapsed Border, this property is used to separate off a cell. It is used to collapse adjacent cells and make a common border. If you want the borders to collapse into one border, add the CSS border-collapse property.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<h3> This is the HTML Bordered Table</h3>
<table style="width:100%">
<tr>
<th>Name</th>
<th>Last name</th>
<th>Age</th>
</tr>
<tr>
<td>Anna</td>
<td>Brown</td>
<td>47</td>
</tr>
<tr>
<td>Tom</td>
<td>White</td>
<td>12</td>
</tr>
<tr>
<td>Johny</td>
<td>Deep</td>
<td>34</td>
</tr>
</table>
</body>
</html>
Output:
HTML Table Cellpadding is used to add padding to the contents of each table cell and the border or edge of the cell. To set the padding, use the CSS padding property.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td{
padding: 20px;
}
</style>
</head>
<body>
<h3> This is the HTML Bordered Table</h3>
<p>Try to change the padding to 10px. </p>
<table style="width:100%">
<tr>
<th>Name</th>
<th>Last name</th>
<th>Age</th>
</tr>
<tr>
<td>Anna</td>
<td>Brown</td>
<td>47</td>
</tr>
<tr>
<td>Tom</td>
<td>White</td>
<td>12</td>
</tr>
<tr>
<td>Johny</td>
<td>Deep</td>
<td>34</td>
</tr>
</table>
</body>
</html>Output:
Now you can define style to your table.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td{
padding: 15px;
}
table#t01 {
width: 100%;
background-color: #E9967A;
}
</style>
</head>
<body>
<h3> This is the HTML Bordered Table</h3>
<p>Styling Tables</p>
<table style="width:100%">
<tr>
<th>Name</th>
<th>Last name</th>
<th>Age</th>
</tr>
<tr>
<td>Anna</td>
<td>Brown</td>
<td>47</td>
</tr>
<tr>
<td>Tom</td>
<td>White</td>
<td>12</td>
</tr>
<tr>
<td>Johny</td>
<td>Deep</td>
<td>34</td>
</tr>
</table>
<br>
<table id="t01">
<tr>
<th>Name</th>
<th>Last name</th>
<th>Age</th>
</tr>
<tr>
<td>Anna</td>
<td>Brown</td>
<td>47</td>
</tr>
<tr>
<td>Tom</td>
<td>White</td>
<td>12</td>
</tr>
<tr>
<td>Johny</td>
<td>Deep</td>
<td>34</td>
</tr>
</table>
</body>
</html>
Output:
and add more styles 🙂
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td{
padding: 15px;
}
table#t01 tr:nth-child(even) {
background-color: #E9967A;
}
table#t01 tr:nth-child(odd) {
background-color: #FFEFD5;
}
table#t01 th {
background-color: black;
color: white;
}
</style>
</head>
<body>
<h3> This is the HTML Bordered Table</h3>
<p>Styling Tables</p>
<table style="width:100%">
<tr>
<th>Name</th>
<th>Last name</th>
<th>Age</th>
</tr>
<tr>
<td>Anna</td>
<td>Brown</td>
<td>47</td>
</tr>
<tr>
<td>Tom</td>
<td>White</td>
<td>12</td>
</tr>
<tr>
<td>Johny</td>
<td>Deep</td>
<td>34</td>
</tr>
</table>
<br>
<table id="t01">
<tr>
<th>Name</th>
<th>Last name</th>
<th>Age</th>
</tr>
<tr>
<td>Anna</td>
<td>Brown</td>
<td>47</td>
</tr>
<tr>
<td>Tom</td>
<td>White</td>
<td>12</td>
</tr>
<tr>
<td>Johny</td>
<td>Deep</td>
<td>34</td>
</tr>
</table>
</body>
</html>Output:
Enjoy coding!
Read also:
HTML Text Formatting And Styles