Styling HTML Tables

Table Colspan and Rowspan in … Html Table Colgroup

Styling HTML tables can enhance their readability and visual appeal.

Here are different ways to style HTML tables using

inline styles
internal styles (within a <style> tag in the <head>)
external styles (with a separate CSS file)

Additionally, you can use CSS properties to apply specific styles to various parts of the table, such as borders, padding, spacing, and colors.

Inline Styles

You can apply styles directly to the HTML elements using the style attribute.

<table style="width: 100%; border: 1px solid black;">
    <tr>
        <th style="background-color: #f2f2f2;">Header 1</th>
        <th style="background-color: #f2f2f2;">Header 2</th>
    </tr>
    <tr>
        <td style="padding: 10px;">Cell 1</td>
        <td style="padding: 10px;">Cell 2</td>
    </tr>
</table>

Internal Styles

You can define styles within a <style> tag in the <head> section of the HTML document.

<!DOCTYPE html>
<html>
<head>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid black;
            padding: 10px;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
    </tr>
</table>

</body>
</html>

External Styles

You can create a separate CSS file and link it to your HTML document.

Styling Techniques and Properties

Borders:

border: Defines the border around the table cells.
border-collapse: Determines if adjacent table cell borders are collapsed into a single border or separated.
border-spacing: Sets the distance between the borders of adjacent cells (used when border-collapse: separate).

<!DOCTYPE html>
<html>
<head>
    <style>
        table {
            border: 1px solid black;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid black;
        }
    </style>
</head>
<body>

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
    </tr>
</table>

</body>
</html>

Padding and Spacing:

padding: Adds space inside the table cells.
margin: Adds space outside the table.
border-spacing: Adds space between the borders of table cells (when border-collapse is set to separate).

<!DOCTYPE html>
<html>
<head>
    <style>
        table {
            border-spacing: 10px;
        }
        th, td {
            padding: 10px;
        }
    </style>
</head>
<body>

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
    </tr>
</table>

</body>
</html>

Background Colors:

background-color: Sets the background color of the table, rows, or cells.

<!DOCTYPE html>
<html>
<head>
    <style>
        th {
            background-color: #f2f2f2;
        }
        tr:nth-child(even) {
            background-color: #f9f9f9;
        }
    </style>
    <title>Background Colors Example</title>
</head>
<body>

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
    </tr>
    <tr>
        <td>Cell 3</td>
        <td>Cell 4</td>
    </tr>
</table>

</body>
</html>

Text Alignment:

text-align: Aligns the text inside the table cells.

<!DOCTYPE html>
<html>
<head>
    <style>
        th {
            text-align: left;
        }
    </style>
    <title>Text Alignment Example</title>
</head>
<body>

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
    </tr>
</table>

</body>
</html>

Width and Height:

width: Sets the width of the table or columns.
height: Sets the height of the table or rows.

<!DOCTYPE html>
<html>
<head>
    <style>
        table {
            width: 100%;
        }
        th, td {
            width: 50%;
        }
    </style>
    <title>Width and Height Example</title>
</head>
<body>

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
    </tr>
</table>

</body>
</html>

you can customize the appearance of your tables to match your design requirements and enhance the readability and visual appeal of your data.