HTML Table:
video Link : https://youtu.be/9K0sJoF46Iw
HTML tables allow web developers to arrange data into rows and columns.
A table in HTML consists of table cells inside rows and columns.
Define an HTML Table
The <table> tag defines an HTML table.
Each table row is defined with a <tr> tag. Each table header is defined with a <th> tag.
By default, the text in <th> elements are bold and centered.
By default, the text in <td> elements are regular and left-aligned
Note: The <td> elements are the data containers of the table.
They can contain all sorts of HTML elements; text, images, lists, other tables, etc.
Example 1:
<body>
<table>
<tr>
<th>FirstName</th>
<th>LastName</th>
<th>Age</th>
</tr>
<tr>
<td>James</td>
<td>Smith</td>
<td>40</td>
</tr>
<tr>
<td>Ellen</td>
<td>Smith</td>
<td>35</td>
</tr>
<tr>
<td>John</td>
<td>Sena</td>
<td>50</td>
</tr>
</table>
</body>
HTML Table - Add a Border
To add a border to a table, use the CSS border property:
HTML Table - Collapsed Borders
To let the borders collapse into one border, add the CSS border-collapse property:
To avoid having double borders like in the example above, set the CSS border-collapse property to collapse.
This will make the borders collapse into a single border:
Example 2:
<head>
<style>
table,th,td {
border:1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<th>FirstName</th>
<th>LastName</th>
<th>Age</th>
</tr>
<tr>
<td>James</td>
<td>Smith</td>
<td>40</td>
</tr>
<tr>
<td>Ellen</td>
<td>Smith</td>
<td>35</td>
</tr>
<tr>
<td>John</td>
<td>Sena</td>
<td>50</td>
</tr>
</table>
</body>
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:
Example 3:
<head>
<style>
table,th,td {
border:1px solid white;
border-collapse: collapse;
}
th,td {
background-color:chartreuse;
}
</style>
</head>
<body>
<table>
<tr>
<th>FirstName</th>
<th>LastName</th>
<th>Age</th>
</tr>
<tr>
<td>James</td>
<td>Smith</td>
<td>40</td>
</tr>
<tr>
<td>Ellen</td>
<td>Smith</td>
<td>35</td>
</tr>
<tr>
<td>John</td>
<td>Sena</td>
<td>50</td>
</tr>
</table>
</body>
Round Table Borders
With the border-radius property, the borders get rounded corners:
Example 4:
<head>
<style>
table,th,td {
border:1px solid white;
border-radius:10px;
}
th,td {
background-color:chartreuse;
}
</style>
</head>
<body>
<table>
<tr>
<th>FirstName</th>
<th>LastName</th>
<th>Age</th>
</tr>
<tr>
<td>James</td>
<td>Smith</td>
<td>40</td>
</tr>
<tr>
<td>Ellen</td>
<td>Smith</td>
<td>35</td>
</tr>
<tr>
<td>John</td>
<td>Sena</td>
<td>50</td>
</tr>
</table>
</body>
HTML Table Padding & Spacing
HTML tables can adjust the padding inside the cells, and also the space between the cells.
Example 5:
<head>
<style>
table,th,td {
border:1px solid white;
border-collapse: collapse;
}
th,td {
background-color:chartreuse;
padding:15px;
}
</style>
</head>
<body>
<table>
<tr>
<th>FirstName</th>
<th>LastName</th>
<th>Age</th>
</tr>
<tr>
<td>James</td>
<td>Smith</td>
<td>40</td>
</tr>
<tr>
<td>Ellen</td>
<td>Smith</td>
<td>35</td>
</tr>
<tr>
<td>John</td>
<td>Sena</td>
<td>50</td>
</tr>
</table>
</body>
HTML Table - Add Cell Padding:
Example 6:
<head>
<style>
table,th,td {
border:1px solid white;
}
table{
background-color:chartreuse;
border-spacing: 30px;
}
</style>
</head>
<body>
<table>
<tr>
<th>FirstName</th>
<th>LastName</th>
<th>Age</th>
</tr>
<tr>
<td>James</td>
<td>Smith</td>
<td>40</td>
</tr>
<tr>
<td>Ellen</td>
<td>Smith</td>
<td>35</td>
</tr>
<tr>
<td>John</td>
<td>Sena</td>
<td>50</td>
</tr>
</table>
</body>
HTML Table-Caption:
<caption> tag is used to add the cation to the Table.
Example 7:
<head>
<style>
table,th,td {
border:1px solid white;
border-collapse: collapse;
}
table{
background-color:chartreuse;
border-spacing: 30px;
}
</style>
</head>
<body>
<table>
<tr>
<caption>Students Information</caption>
<th>FirstName</th>
<th>LastName</th>
<th>Age</th>
</tr>
<tr>
<td>James</td>
<td>Smith</td>
<td>40</td>
</tr>
<tr>
<td>Ellen</td>
<td>Smith</td>
<td>35</td>
</tr>
<tr>
<td>John</td>
<td>Sena</td>
<td>50</td>
</tr>
</table>
</body>
HTML ROWSPAN - Rowspan merge or combine the two rows as a single ROW
EXAMPLE 8:
<head>
<style>
table,th,td {
border:1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<th>S.No</th>
<th>Item</th>
<th>Price</th>
</tr>
<tr>
<td rowspan="2">001</td>
<td>Samsung TV</td>
<td>50000</td>
</tr>
<tr>
<td>Samsung Mobile</td>
<td>10000</td>
</tr>
<tr>
<td>002</td>
<td>Dell</td>
<td>40000</td>
</tr>
<tr>
<td>003</td>
<td>HP</td>
<td>30000</td>
</tr>
<tr>
<td>Grand Total</td>
<td>130000</td>
</tr>
</table>
</body>
HTML COlSPAN - Colspan merge or combine the two columns as a single Column
Example 9:
<head>
<style>
table,th,td {
border:1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<th>S.No</th>
<th>Item</th>
<th>Price</th>
</tr>
<tr>
<td rowspan="2">001</td>
<td>Samsung TV</td>
<td>50000</td>
</tr>
<tr>
<td>Samsung Mobile</td>
<td>10000</td>
</tr>
<tr>
<td>002</td>
<td>Dell</td>
<td>40000</td>
</tr>
<tr>
<td>003</td>
<td>HP</td>
<td>30000</td>
</tr>
<tr>
<td colspan="2">Grand Total</td>
<td>130000</td>
</tr>
</table>
</body>
HTML THEAD:thead Defines the head section
HTML TBODY:tbody Defines the body section
HTML TFOOT:tfoot Defines the footer section
thead,tbody,tfoot are useful for search engines and Browsers
Example 10:
<head>
<style>
table,th,td {
border:1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>S.No</th>
<th>Item</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">001</td>
<td>Samsung TV</td>
<td>50000</td>
</tr>
<tr>
<td>Samsung Mobile</td>
<td>10000</td>
</tr>
<tr>
<td>002</td>
<td>Dell</td>
<td>40000</td>
</tr>
<tr>
<td>003</td>
<td>HP</td>
<td>30000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Grand Total</td>
<td>130000</td>
</tr>
</tfoot>
</table>
</body>
*Important points to remember:
Use the HTML <table> element to define a table
Use the HTML <tr> element to define a table row
Use the HTML <td> element to define a table data
Use the HTML <th> element to define a table heading
Use the HTML <caption> element to define a table caption
Use the CSS border property to define a border
Use the CSS border-collapse property to collapse cell borders
Use the CSS padding property to add padding to cells
Use the CSS text-align property to align cell text
Use the CSS border-spacing property to set the spacing between cells
Rowspan - Rowspan merge or combine the two rows as a single ROW
Colspan - Colspan merge or combine the two columns as a single Column
thead - Groups the header content in a table
tbody - Groups the body content in a table
tfoot - Groups the footer content in a table
