|
Styling a table with CSS enhances its appearance and readability. CSS allows you to customize various aspects of a table, including borders, spacing, fonts, and colors. You can style individual cells, rows, and columns, or apply global styles to the entire table.
Approach to Style Table with CSSTo style a HTML table with CSS, you can follow these steps:
- Use the <link> tag within the <head> section of your HTML document to link an external CSS file.
- Use the <table>, <thead>, <tbody>, <tr>, <th>, and <td> tags to structure your table and its content.
- Define styles in your CSS file (style.css) to customize the appearance of the table, headers (<th>), and data cells (<td>).
Example 1: Styling HTML Table using External CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Colorfull HTML Table</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 align="center">Simple HTML Table</h1>
<table>
<thead>
<tr>
<th class="cl1">Firstname</th>
<th class="cl2">Lastname</th>
<th class="cl3">Age</th>
</tr>
</thead>
<tbody>
<tr>
<td class="cl4">Bahadur</td>
<td class="cl5">Lodhi</td>
<td class="cl6">20</td>
</tr>
<tr>
<td class="cl7">Shubham</td>
<td class="cl8">Ji</td>
<td class="cl9">25</td>
</tr>
<tr>
<td class="cl10">Michael</td>
<td class="cl11">John</td>
<td class="cl12">40</td>
</tr>
<tr>
<td class="cl13">Aman</td>
<td class="cl14">Sign</td>
<td class="cl15">20</td>
</tr>
</tbody>
</table>
</body>
</html>
/* Write CSS Here */
table {
width: 40%;
margin: 0 auto;
}
body {
padding-top: 8%;
}
th,
td {
border: 1px solid #ddd;
padding: 10px;
text-align: center;
}
th {
background-color: #f2f2f2;
}
.cl1,
.cl12 {
background-color: chartreuse;
}
.cl3,
.cl4 {
background-color: darkgoldenrod;
}
.cl5,
.cl6 {
background-color: darkseagreen;
}
.cl7,
.cl14 {
background-color: deepskyblue;
}
.cl9,
.cl10 {
background-color: rgb(251, 251, 128);
}
.cl11,
.cl2 {
background-color: crimson;
}
.cl13,
.cl8 {
background-color: darkmagenta;
}
.cl15 {
background-color: rgb(86, 79, 146);
}
Output:
 Colorful HTML Table Example 2: Styling HTML Table using Internal CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Styled HTML Table with Custom Headers</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th,
td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
tr:hover {
background-color: #ddd;
}
</style>
</head>
<body>
<h2>Employee Information Table</h2>
<table>
<thead>
<tr>
<th>Employee ID</th>
<th>Name</th>
<th>Department</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>John Doe</td>
<td>Marketing</td>
<td>[email protected]</td>
</tr>
<tr>
<td>002</td>
<td>Jane Smith</td>
<td>Development</td>
<td>[email protected]</td>
</tr>
<tr>
<td>003</td>
<td>Sam Brown</td>
<td>Human Resources</td>
<td>[email protected]</td>
</tr>
<tr>
<td>004</td>
<td>Lisa White</td>
<td>Finance</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</body>
</html>
Output:
 ConclusionBy linking an external CSS file (style.css) and defining styles for table elements, you can easily customize the appearance of HTML tables. CSS allows for flexibility in design, making it possible to create visually appealing and functional tables for web applications and websites. Adjust the styles and structure according to your specific requirements to achieve the desired look and feel.
|
