CSS Table

<!DOCTYPE html>
<html>
<head>
  <title>Styled HTML Table</title>
  <style>
    table {
      border-collapse: collapse;
      width: 100%;
    }
    
    th, td {
      border: 1px solid #ccc;
      padding: 8px;
      text-align: left;
    }
    
    th {
      background-color: #f2f2f2;
    }
    
    tr:nth-child(even) {
      background-color: #f9f9f9;
    }
  </style>
</head>
<body>
  <h1>My Styled Table</h1>
  <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>

Code Output

CSS Table

CSS can be used to style and customize HTML tables, including table structure, cell formatting, borders, spacing, and more.

 

    • table: Applies styles to the table element.
    • th: Styles the table header cells.
    • td: Styles the table data cells.
    • border-collapse: Specifies how table borders should be di
    • border-spacing: Sets the spacing between table cells when border-collapse is set to “separate”.
    • text-align: Aligns the content horizontally within table cells.
    • vertical-align: Aligns the content vertically within table cells
    • background-color: Sets the background color of table cells.
    • border: Defines the border properties for table cells, such as border-width, border-color, and border-style.
    • padding: Sets the padding of table cells.
    • width: Specifies the width of table cells or the table itself.