Table Sizes and Headers in html

Table Sizes

In HTML, table sizes can be controlled by setting the width and height of the table and its cells. You can specify these dimensions using either HTML attributes or CSS.


Table Headers

Table headers are defined using the <th> element, which is typically used to label each column or row in a table. Headers are often styled differently from the rest of the table to distinguish them as labels.


Example with Table Sizes and Headers

<!DOCTYPE html>
<html>
<head>
    <title>HTML Table Sizes and Headers</title>
    <style>
        table {
            width: 80%; /* Width of the table */
            height: 200px; /* Height of the table */
            border-collapse: collapse;
            margin: 20px 0; /* Margin for spacing */
        }
        th, td {
            border: 1px solid black;
            padding: 10px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
            font-weight: bold;
        }
        tr:nth-child(even) {
            background-color: #f9f9f9; /* Zebra striping for rows */
        }
    </style>
</head>
<body>

<h2>HTML Table with Specified Sizes and Headers</h2>

<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
    </tr>
    <tr>
        <td>John Doe</td>
        <td>30</td>
        <td>New York</td>
    </tr>
    <tr>
        <td>Jane Smith</td>
        <td>25</td>
        <td>Los Angeles</td>
    </tr>
    <tr>
        <td>Mike Johnson</td>
        <td>40</td>
        <td>Chicago</td>
    </tr>
</table>

</body>
</html>

Table Sizes:

  • The width: 80%; style sets the table's width to 80% of its containing element (usually the browser window).
  • The height: 200px; style sets the table's height to 200 pixels.
  • The margin: 20px 0; style adds vertical spacing around the table.


Table Headers:

  • The <th> tags create the table headers "Name," "Age," and "City."
  • The CSS rules for th elements set a light gray background color and bold font weight to distinguish them from the data cells.


Additional Styling:

  • The border-collapse: collapse; style collapses table borders into a single border, eliminating the space between borders.
  • The padding: 10px; style adds padding inside each table cell.
  • The tr:nth-child(even) style adds zebra striping by setting a background color for every even row.


By using CSS for styling, you can achieve more flexibility and control over the table's appearance, ensuring it meets your design requirements.