Tech Ocean Hub

Posted by manasvisawant45 on June 28, 2023 3:08 am

Table formatting and styling in HTML

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.

Menu

Table formatting and styling in HTML

Course Category

Archieve