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
table
selector sets the table width to 100% and collapses the table borders. - The
th, td
selector sets padding, text alignment, and a bottom border for table headers (th
) and cells (td
). - The
th
selector sets a background color and makes the text bold for table headers. - The
tr:hover
selector 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.