Styling HTML Tables with CSS

Border Configuration

Applying the border property to table, th, and td elements establishes visual boundaries.

.grid-table, .grid-table th, .grid-table td {
  border: 1px solid #333;
}

Full-Width and Collapsed Borders

Expanding a table to occupy the entire available horizontal space requires setting width: 100%. By default, adjacent cell borders render as double lines. The border-collapse property merges these into a single line.

.grid-table {
  width: 100%;
  border-collapse: collapse;
}
.grid-table th, .grid-table td {
  border: 1px solid #333;
}

To restrict the border strictly to the outer perimeter of the table, apply the border property solely to the table selector.

Dimension Control

The width and height properties dictate the overall size of the table and its constituent cells.

.grid-table {
  width: 100%;
}
.grid-table th {
  height: 45px;
}

Text Alignment

Horizontal placement of text within cells is managed by text-align (values: left, right, center). Header cells default to center alignment, while data cells default to left.

.grid-table td {
  text-align: center;
}
.grid-table th {
  text-align: left;
}

Vertical positioning relies on vertical-align (values: top, bottom, middle), which defaults to middle.

.grid-table td {
  height: 50px;
  vertical-align: bottom;
}

Cell Padding and Dividers

Internal spacing between cell content and its border is controlled via padding. Horizontal row separators can be achieved by applying border-bottom exclusively to cells.

.grid-table th, .grid-table td {
  padding: 12px;
}
.grid-table th, .grid-table td {
  border-bottom: 2px solid #ccc;
}

Interactive and Visual Enhencements

Highlighting a row on cursor hover utilizes the :hover pseudo-class on the tr element. Zebra-striping for improved readability is implemented using the nth-child() selector.

.grid-table tr:hover {
  background-color: #e9e9e9;
}
.grid-table tr:nth-child(odd) {
  background-color: #f4f4f4;
}

Custom color schemes for headers or specific cells are defined using background-color and color.

.grid-table th {
  background-color: #0066cc;
  color: #ffffff;
}

Responsive Layouts

For tables exceeding the viewport width, wrapping the element in a container with overflow-x: auto enables horizontal scrolling on smaller screens.

<div class="scroll-container">
  <table class="grid-table">
    <!-- Data rows -->
  </table>
</div>

.scroll-container {
  overflow-x: auto;
}

CSS Table Properties Overview

Property	Purpose
`border`	Sets all border attributes in one declaration
`border-collapse`	Merges adjacent cell borders into a single line
`border-spacing`	Defines the distance between adjacent cell borders
`caption-side`	Specifies the placement of the table caption
`empty-cells`	Toggles border and background visibility for empty cells
`table-layout`	Determines the algorithm used for rendering the table layout

Column-Specific Styling

Targeting individual columns is possible through structural pseudo-classes like first-child and nth-child(n).

.grid-table td:first-child {
  background-color: #ffdd99;
  font-weight: bold;
}
.grid-table td:nth-child(2) {
  color: #cc0000;
  text-align: center;
}
.grid-table td:nth-child(3) {
  width: 180px;
  vertical-align: top;
}

Comprehensive Example

An employee roster demonstrating combined styling principles.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Employee Roster</title>
    <style>
        body {
            font-family: sans-serif;
            background-color: #eef2f5;
            color: #333;
            padding: 20px;
        }
        .staff-table {
            border-collapse: collapse;
            width: 85%;
            margin: 30px auto;
        }
        .staff-table td, .staff-table th {
            border: 1px solid #aab;
            padding: 10px;
        }
        .staff-table tr:nth-child(even) {
            background-color: #dde4ea;
        }
        .staff-table tr:hover {
            background-color: #c5d5e8;
        }
        .staff-table th {
            padding-top: 14px;
            padding-bottom: 14px;
            text-align: left;
            background-color: #2a5699;
            color: white;
        }
        .staff-table td:first-child {
            font-weight: bold;
            color: #2a5699;
        }
    </style>
</head>
<body>
    <table class="staff-table">
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Department</th>
            <th>Role</th>
        </tr>
        <tr>
            <td>EMP-01</td>
            <td>Alice Johnson</td>
            <td>Engineering</td>
            <td>Senior Developer</td>
        </tr>
        <tr>
            <td>EMP-02</td>
            <td>Bob Smith</td>
            <td>Marketing</td>
            <td>Campaign Manager</td>
        </tr>
        <tr>
            <td>EMP-03</td>
            <td>Charlie Davis</td>
            <td>Human Resources</td>
            <td>Recruiter</td>
        </tr>
        <tr>
            <td>EMP-04</td>
            <td>Diana Ross</td>
            <td>Engineering</td>
            <td>QA Engineer</td>
        </tr>
    </table>
</body>
</html>

Tags: css html web design tables frontend

Posted on Sun, 31 May 2026 18:28:11 +0000 by eideticmnemonic

Freaks City