In HTML, you can format and style tables using CSS (Cascading Style Sheets). CSS allows you to control various aspects of the table’s appearance, such as font styles, colors, borders, spacing, and alignment. Here’s an example of how you can format and style a table in HTML:
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #f2f2f2;
font-weight: bold;
}
tr:hover {
background-color: #f5f5f5;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</table>
</body>
</html>
In this example:
- The
tableselector sets the table width to 100% and collapses the table borders. - The
th, tdselector sets padding, text alignment, and a bottom border for table headers (th) and cells (td). - The
thselector sets a background color and makes the text bold for table headers. - The
tr:hoverselector sets a background color for rows when hovering over them.
You can modify these styles or add additional CSS properties to achieve the desired table formatting and styling.




