HTML Tutorial
HTML Tables
Tables are used to show the data clearly and you can easily understand the information in tables. HTML tables are used to arrange the data in rows and columns for the web pages.
Here, we can use the <table> tag to define a table. The <tr> tag defines the row of the table and the <td> tag defines table data or cell of the table. The <th> tag defines table heading.
The <td> element can contain all html elements like text, images, numbers, lists and other tables.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table style="width:100%">
<tr>
<th>Products Name</th>
<th>Sale Price</th>
<th>Regular Price</th>
</tr>
<tr>
<td>Samsung</td>
<td>20000</td>
<td>22000</td>
</tr>
<tr>
<td>Redmi</td>
<td>12000</td>
<td>13000</td>
</tr>
</table>
</body>
</html> Output:
CSS Properties for HTML Tables:
1. CSS border
Border is an important CSS property for HTML tables. If we will not specify the border for the table. The browser displays the table without the border lines, it’s not look like a table.
border:1px solid black;
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table with border</title>
<style>
table, th, td {
border:1px solid black;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Products Name</th>
<th>Sale Price</th>
<th>Regular Price</th>
</tr>
<tr>
<td>Samsung</td>
<td>20000</td>
<td>22000</td>
</tr>
<tr>
<td>Redmi</td>
<td>12000</td>
<td>13000</td>
</tr>
</table>
</body>
</html> Output:
2. Collapsed Borders
The border-collapse CSS property is used to collapse the border into one border.
border-collapse: collapse;
Example
<!DOCTYPE html>
<html>
<head>
<title>Border collapse property</title>
<style>
table, th, td {
border:1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Products Name</th>
<th>Sale Price</th>
<th>Regular Price</th>
</tr>
<tr>
<td>Samsung</td>
<td>20000</td>
<td>22000</td>
</tr>
<tr>
<td>Redmi</td>
<td>12000</td>
<td>13000</td>
</tr>
</table>
</body>
</html> Output:
3. Padding Property
Padding property is used to create space between the cell contents and the borders within the cell.
padding:15px;
Example
<!DOCTYPE html>
<html>
<head>
<title>Padding property</title>
<style>
table, th, td {
border:1px solid black;
border-collapse: collapse;
}
th, td {
padding:15px;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Products Name</th>
<th>Sale Price</th>
<th>Regular Price</th>
</tr>
<tr>
<td>Samsung</td>
<td>20000</td>
<td>22000</td>
</tr>
<tr>
<td>Redmi</td>
<td>12000</td>
<td>13000</td>
</tr>
</table>
</body>
</html> Output:
4. Row Span Property
The rowspan attribute is used to create cell span into more than one row.
rowspan="2" Example
<!DOCTYPE html>
<html>
<head>
<title>Row Span Property</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding:15px
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Name:</th>
<td>Jhon</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
</body>
</html> Output:
5. Column Span Property
The colspan attribute is used to create a cell span into more than one column.
colspan="3" Example
<!DOCTYPE html>
<html>
<head>
<title>Column Span Property</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding:15px
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>S.No</th>
<th>Item code</th>
<th>Products Name</th>
<th>Price</th>
</tr>
<tr>
<td>1</td>
<td>sku001</td>
<td>Samsung</td>
<td>20000</td>
</tr>
<tr>
<td>2</td>
<td>sku002</td>
<td>Redmi</td>
<td>12000</td>
</tr>
<tr>
<td colspan="3" align="right">Total price</td>
<td>32000</td>
</tr>
</table>
</body>
</html> Output:
6. Adding Caption to HTML Table
The <caption> tag is used to capitalize the contents on the HTML Tables.
<caption>Name:</caption>
Example
<!DOCTYPE html>
<html>
<head>
<title>Adding Caption to HTML Table</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding:15px
}
</style>
</head>
<body>
<table style="width:100%">
<caption style="margin-bottom: 10px;"><b>Products Lists</b></caption>
<tr>
<th>S.No</th>
<th>Item code</th>
<th>Products Name</th>
<th>Price</th>
</tr>
<tr>
<td>1</td>
<td>sku001</td>
<td>Samsung</td>
<td>20000</td>
</tr>
<tr>
<td>2</td>
<td>sku002</td>
<td>Redmi</td>
<td>12000</td>
</tr>
<tr>
<td colspan="3" align="right">Total price</td>
<td>32000</td>
</tr>
</table>
</body>
</html> Output:
