Table styling in HTML is used to improve the appearance of tables using CSS. It makes tables more readable, organized, and visually attractive.
What is Table Styling
Table styling means applying colors, borders, spacing, and alignment to HTML tables to make them look better and easier to understand.
Adding Borders to Tables
Borders are used to define table structure clearly. You can add borders using CSS.
Example of Table Border
<table style=”border: 1px solid black; border-collapse: collapse;”> <tr> <th style=”border: 1px solid black;”>Name</th> <th style=”border: 1px solid black;”>Age</th> </tr> <tr> <td style=”border: 1px solid black;”>Ali</td> <td style=”border: 1px solid black;”>20</td> </tr> </table>
Cell Padding
Padding adds space inside table cells to make content look clean.
Example of Padding
td {
padding: 10px;
}
Text Alignment
Text alignment is used to position text inside cells.
Example of Text Alignment
td {
text-align: center;
}
Background Color
You can change the background color of table rows or cells for better design.
Example of Background Color
th {
background-color: lightgray;
}
Hover Effect
Hover effect highlights a row when the mouse moves over it.
Example of Hover Effect
tr:hover {
background-color: #f2f2f2;
}
Summary
Table styling improves the design and readability of HTML tables using CSS properties like borders, padding, alignment, and colors. It helps create professional and user-friendly layouts.