Skillversitas

CSS Tables - Table Styling

HTML tables are the standard way to display data in rows and columns. Without CSS styling, tables look plain and hard to read. With CSS, you can create professional, readable, and responsive tables.

CSS Tables covers the properties for controlling borders, spacing, alignment, and width, plus advanced techniques such as stripe rows with :nth-child, responsive tables, and table layout modes.


Code Example

Complete Table Styling

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Tables</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Segoe UI', Tahoma, sans-serif;
      padding: 30px;
      background: #f0f2f5;
      color: #334155;
    }

    h2 {
      margin-bottom: 15px;
      color: #1a1a2e;
    }

    .section {
      margin-bottom: 40px;
    }

    .label {
      font-size: 12px;
      color: #64748b;
      margin-bottom: 8px;
      font-family: monospace;
      background: #e2e8f0;
      display: inline-block;
      padding: 3px 8px;
      border-radius: 4px;
      margin-top: 10px;
      margin-bottom: 10px;
    }

    /* ===== BASIC TABLE ===== */
    .basic-table {
      width: 100%;
      border-collapse: collapse;
      background: white;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    }

    .basic-table th,
    .basic-table td {
      padding: 14px 20px;
      text-align: left;
      border-bottom: 1px solid #e2e8f0;
    }

    .basic-table th {
      background: #1a1a2e;
      color: white;
      font-weight: 600;
      text-transform: uppercase;
      font-size: 12px;
      letter-spacing: 0.5px;
    }

    .basic-table tr:last-child td {
      border-bottom: none;
    }

    /* ===== BORDER SPACING ===== */
    .spacing-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 8px;
      background: white;
      border-radius: 12px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    }

    .spacing-table th,
    .spacing-table td {
      padding: 14px 20px;
      background: #f8fafc;
      border-radius: 8px;
      text-align: center;
    }

    .spacing-table th {
      background: #1a1a2e;
      color: white;
    }

    /* ===== STRIPE ROWS ===== */
    .stripe-table {
      width: 100%;
      border-collapse: collapse;
      background: white;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    }

    .stripe-table th,
    .stripe-table td {
      padding: 14px 20px;
      text-align: left;
      border-bottom: 1px solid #e2e8f0;
    }

    .stripe-table th {
      background: #667eea;
      color: white;
    }

    .stripe-table tbody tr:nth-child(even) {
      background-color: #f1f5f9;
    }

    .stripe-table tbody tr:hover {
      background-color: #e2e8f0;
      transition: background-color 0.2s;
    }

    /* ===== VERTICAL ALIGN ===== */
    .valign-table {
      width: 100%;
      border-collapse: collapse;
      background: white;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    }

    .valign-table th,
    .valign-table td {
      padding: 15px 20px;
      text-align: left;
      border-bottom: 1px solid #e2e8f0;
    }

    .valign-table th {
      background: #1e293b;
      color: white;
    }

    .valign-table td {
      vertical-align: middle;
    }

    .valign-table .user-cell {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: linear-gradient(135deg, #667eea, #764ba2);
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: bold;
      font-size: 14px;
      flex-shrink: 0;
    }

    .user-info .name {
      font-weight: 600;
      color: #1e293b;
    }

    .user-info .email {
      font-size: 12px;
      color: #94a3b8;
    }

    /* ===== TABLE LAYOUT FIXED ===== */
    .fixed-table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
      background: white;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    }

    .fixed-table th,
    .fixed-table td {
      padding: 14px 20px;
      text-align: left;
      border-bottom: 1px solid #e2e8f0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .fixed-table th {
      background: #0f172a;
      color: white;
    }

    .fixed-table th:nth-child(1) { width: 25%; }
    .fixed-table th:nth-child(2) { width: 40%; }
    .fixed-table th:nth-child(3) { width: 20%; }
    .fixed-table th:nth-child(4) { width: 15%; }

    /* ===== RESPONSIVE TABLE ===== */
    .table-responsive {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      border-radius: 12px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    }

    .responsive-table {
      width: 100%;
      min-width: 700px;
      border-collapse: collapse;
      background: white;
    }

    .responsive-table th,
    .responsive-table td {
      padding: 14px 20px;
      text-align: left;
      border-bottom: 1px solid #e2e8f0;
    }

    .responsive-table th {
      background: #667eea;
      color: white;
      position: sticky;
      top: 0;
    }

    .responsive-table tbody tr:hover {
      background: #f8fafc;
    }

    /* ===== CAPTION ===== */
    .caption-table {
      width: 100%;
      border-collapse: collapse;
      background: white;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    }

    .caption-table caption {
      padding: 15px;
      font-size: 18px;
      font-weight: bold;
      text-align: left;
      background: #1a1a2e;
      color: white;
    }

    .caption-table th,
    .caption-table td {
      padding: 14px 20px;
      text-align: left;
      border-bottom: 1px solid #e2e8f0;
    }

    .caption-table th {
      background: #f1f5f9;
      font-weight: 600;
      color: #475569;
    }

    /* ===== STATUS BADGE ===== */
    .status-badge {
      display: inline-block;
      padding: 4px 12px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 600;
    }

    .status-active {
      background: #dcfce7;
      color: #166534;
    }

    .status-inactive {
      background: #fee2e2;
      color: #991b1b;
    }

    .status-pending {
      background: #fef3c7;
      color: #92400e;
    }
  </style>
</head>
<body>
  <!-- Basic Table -->
  <div class="section">
    <h2>Basic Table with Border Collapse</h2>
    <span class="label">border-collapse: collapse</span>
    <table class="basic-table">
      <thead>
        <tr>
          <th>No</th>
          <th>Product Name</th>
          <th>Category</th>
          <th>Price</th>
          <th>Stock</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Laptop ASUS ROG</td>
          <td>Electronics</td>
          <td>$15,000,000</td>
          <td>25</td>
        </tr>
        <tr>
          <td>2</td>
          <td>iPhone 15 Pro</td>
          <td>Smartphone</td>
          <td>$18,000,000</td>
          <td>50</td>
        </tr>
        <tr>
          <td>3</td>
          <td>Sony WH-1000XM5</td>
          <td>Audio</td>
          <td>$4,500,000</td>
          <td>100</td>
        </tr>
        <tr>
          <td>4</td>
          <td>Logitech MX Master</td>
          <td>Accessories</td>
          <td>$1,200,000</td>
          <td>75</td>
        </tr>
      </tbody>
    </table>
  </div>

  <!-- Border Spacing -->
  <div class="section">
    <h2>Border Spacing</h2>
    <span class="label">border-collapse: separate; border-spacing: 8px</span>
    <table class="spacing-table">
      <thead>
        <tr>
          <th>Day</th>
          <th>Monday</th>
          <th>Tuesday</th>
          <th>Wednesday</th>
          <th>Thursday</th>
          <th>Friday</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><strong>08:00</strong></td>
          <td>Math</td>
          <td>Indonesian</td>
          <td>Physics</td>
          <td>Chemistry</td>
          <td>English</td>
        </tr>
        <tr>
          <td><strong>10:00</strong></td>
          <td>Physics</td>
          <td>Math</td>
          <td>Indonesian</td>
          <td>English</td>
          <td>Chemistry</td>
        </tr>
        <tr>
          <td><strong>13:00</strong></td>
          <td>Chemistry</td>
          <td>Physics</td>
          <td>English</td>
          <td>Math</td>
          <td>Indonesian</td>
        </tr>
      </tbody>
    </table>
  </div>

  <!-- Stripe Rows -->
  <div class="section">
    <h2>Stripe Rows with :nth-child</h2>
    <span class="label">tbody tr:nth-child(even) { background: #f1f5f9; }</span>
    <table class="stripe-table">
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Role</th>
          <th>Department</th>
          <th>Status</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>001</td>
          <td>John Smith</td>
          <td>Developer</td>
          <td>Engineering</td>
          <td><span class="status-badge status-active">Active</span></td>
        </tr>
        <tr>
          <td>002</td>
          <td>Amy Lee</td>
          <td>Designer</td>
          <td>Product</td>
          <td><span class="status-badge status-active">Active</span></td>
        </tr>
        <tr>
          <td>003</td>
          <td>Mike Williams</td>
          <td>Manager</td>
          <td>Marketing</td>
          <td><span class="status-badge status-pending">Pending</span></td>
        </tr>
        <tr>
          <td>004</td>
          <td>Anna Price</td>
          <td>QA Engineer</td>
          <td>Engineering</td>
          <td><span class="status-badge status-active">Active</span></td>
        </tr>
        <tr>
          <td>005</td>
          <td>Doni Kurniawan</td>
          <td>Data Analyst</td>
          <td>Data</td>
          <td><span class="status-badge status-inactive">Inactive</span></td>
        </tr>
        <tr>
          <td>006</td>
          <td>Mary Grant</td>
          <td>Content Writer</td>
          <td>Marketing</td>
          <td><span class="status-badge status-active">Active</span></td>
        </tr>
      </tbody>
    </table>
  </div>

  <!-- Vertical Align -->
  <div class="section">
    <h2>Vertical Align with User Info</h2>
    <span class="label">vertical-align: middle</span>
    <table class="valign-table">
      <thead>
        <tr>
          <th>User</th>
          <th>Role</th>
          <th>Last Active</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <div class="user-cell">
              <div class="avatar">BS</div>
              <div class="user-info">
                <div class="name">John Smith</div>
                <div class="email">[email protected]</div>
              </div>
            </div>
          </td>
          <td>Admin</td>
          <td>2 minutes ago</td>
          <td><span class="status-badge status-active">Online</span></td>
        </tr>
        <tr>
          <td>
            <div class="user-cell">
              <div class="avatar">SD</div>
              <div class="user-info">
                <div class="name">Amy Lee</div>
                <div class="email">[email protected]</div>
              </div>
            </div>
          </td>
          <td>Editor</td>
          <td>1 hour ago</td>
          <td><span class="status-badge status-pending">Away</span></td>
        </tr>
        <tr>
          <td>
            <div class="user-cell">
              <div class="avatar">AW</div>
              <div class="user-info">
                <div class="name">Mike Williams</div>
                <div class="email">[email protected]</div>
              </div>
            </div>
          </td>
          <td>Viewer</td>
          <td>3 days ago</td>
          <td><span class="status-badge status-inactive">Offline</span></td>
        </tr>
      </tbody>
    </table>
  </div>

  <!-- Fixed Layout -->
  <div class="section">
    <h2>Table Layout Fixed</h2>
    <span class="label">table-layout: fixed</span>
    <table class="fixed-table">
      <thead>
        <tr>
          <th>Column 25%</th>
          <th>Column 40%</th>
          <th>Column 20%</th>
          <th>Column 15%</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Short data</td>
          <td>This is very long text that will be cut off with an ellipsis if it exceeds the defined column width limit</td>
          <td>Medium</td>
          <td>Short</td>
        </tr>
        <tr>
          <td>Data A</td>
          <td>Another long text that will also be displayed with text-overflow ellipsis due to table-layout fixed</td>
          <td>Data C</td>
          <td>Data D</td>
        </tr>
      </tbody>
    </table>
  </div>

  <!-- Responsive Table -->
  <div class="section">
    <h2>Responsive Table</h2>
    <span class="label">overflow-x: auto</span>
    <div class="table-responsive">
      <table class="responsive-table">
        <thead>
          <tr>
            <th>No</th>
            <th>Employee Name</th>
            <th>Email</th>
            <th>Phone</th>
            <th>Address</th>
            <th>Department</th>
            <th>Salary</th>
            <th>Hire Date</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>John Smith</td>
            <td>[email protected]</td>
            <td>081234567890</td>
            <td>123 Main St., Chicago</td>
            <td>Engineering</td>
            <td>$15,000,000</td>
            <td>01 Jan 2020</td>
            <td><span class="status-badge status-active">Active</span></td>
          </tr>
          <tr>
            <td>2</td>
            <td>Amy Lee</td>
            <td>[email protected]</td>
            <td>081234567891</td>
            <td>45 Park Ave, New York</td>
            <td>Product</td>
            <td>$12,000,000</td>
            <td>15 Mar 2021</td>
            <td><span class="status-badge status-active">Active</span></td>
          </tr>
          <tr>
            <td>3</td>
            <td>Mike Williams</td>
            <td>[email protected]</td>
            <td>081234567892</td>
            <td>67 Lake Shore Dr, San Francisco</td>
            <td>Marketing</td>
            <td>$10,000,000</td>
            <td>01 Jul 2022</td>
            <td><span class="status-badge status-pending">Pending</span></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <!-- Caption Table -->
  <div class="section">
    <h2>Table with Caption</h2>
    <span class="label">caption { caption-side: top; }</span>
    <table class="caption-table">
      <caption>2025 Monthly Sales Data</caption>
      <thead>
        <tr>
          <th>Month</th>
          <th>Target</th>
          <th>Actual</th>
          <th>Achievement</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>January</td>
          <td>$500,000,000</td>
          <td>$520,000,000</td>
          <td>104%</td>
        </tr>
        <tr>
          <td>February</td>
          <td>$550,000,000</td>
          <td>$480,000,000</td>
          <td>87%</td>
        </tr>
        <tr>
          <td>March</td>
          <td>$600,000,000</td>
          <td>$615,000,000</td>
          <td>102%</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>

Code Explanation

border-collapse

Controls the border model between cells:

/* Borders merge into one */
table { border-collapse: collapse; }

/* Borders separated with spacing */
table { border-collapse: separate; }
  • collapse — Borders between cells are merged. Cleaner for data tables
  • separate — Borders are separate, enabling border-spacing

border-spacing

Spacing between cells (only works with border-collapse: separate):

table {
  border-collapse: separate;
  border-spacing: 10px;         /* Horizontal & vertical */
  border-spacing: 10px 5px;     /* Horizontal | Vertical */
}

width

/* Full container width */
table { width: 100%; }

/* Fixed width */
table { width: 700px; }

text-align & vertical-align

/* Horizontal alignment */
td { text-align: left; }     /* Left (default) */
td { text-align: center; }   /* Center */
td { text-align: right; }    /* Right */
td { text-align: justify; }  /* Justified */

/* Vertical alignment */
td { vertical-align: top; }      /* Top */
td { vertical-align: middle; }   /* Middle (default) */
td { vertical-align: bottom; }   /* Bottom */

:nth-child Striping

Creates zebra striping on odd/even rows:

/* Stripe even rows */
tbody tr:nth-child(even) {
  background-color: #f1f5f9;
}

/* Stripe odd rows */
tbody tr:nth-child(odd) {
  background-color: #ffffff;
}

/* Every 3 rows */
tbody tr:nth-child(3n) {
  background-color: #e2e8f0;
}

/* Starting from row 5 */
tbody tr:nth-child(n+5) {
  background-color: #fef3c7;
}

table-layout

Two table layout modes:

/* Auto — column width adapts to content */
table { table-layout: auto; }

/* Fixed — column width follows the definition/proportion */
table { table-layout: fixed; }
  • auto — The browser calculates column widths based on content. More flexible but can be slow
  • fixed — Column widths are calculated from the table width and the defined divisions. Faster and more predictable

caption

A table title that appears above/below the table:

caption {
  caption-side: top;    /* Top (default) */
  caption-side: bottom; /* Bottom */
  padding: 15px;
  font-size: 18px;
  font-weight: bold;
}

Responsive Tables

Creates a horizontal scroll for tables on small screens:

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
}

.table-responsive table {
  min-width: 700px; /* Minimum width before scrolling */
}

Everyday Use Cases

1. Data Table with Actions

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }

    .data-table-wrapper {
      padding: 20px;
    }

    .table-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }

    .table-header h2 {
      color: #1a1a2e;
    }

    .search-box {
      padding: 10px 15px;
      border: 2px solid #e2e8f0;
      border-radius: 8px;
      font-size: 14px;
      width: 250px;
    }

    .data-table {
      width: 100%;
      border-collapse: collapse;
      background: white;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    }

    .data-table th,
    .data-table td {
      padding: 14px 20px;
      text-align: left;
      border-bottom: 1px solid #e2e8f0;
    }

    .data-table th {
      background: #f8fafc;
      color: #475569;
      font-weight: 600;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .data-table tbody tr:hover {
      background: #f1f5f9;
    }

    .data-table tbody tr:last-child td {
      border-bottom: none;
    }

    .action-btns {
      display: flex;
      gap: 8px;
    }

    .btn-sm {
      padding: 6px 12px;
      border-radius: 6px;
      border: none;
      font-size: 12px;
      cursor: pointer;
      font-weight: 600;
    }

    .btn-edit {
      background: #dbeafe;
      color: #1d4ed8;
    }

    .btn-delete {
      background: #fee2e2;
      color: #dc2626;
    }

    .table-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 20px;
      background: #f8fafc;
      border-top: 1px solid #e2e8f0;
      font-size: 14px;
      color: #64748b;
    }

    .pagination {
      display: flex;
      gap: 5px;
    }

    .page-btn {
      padding: 6px 12px;
      border: 1px solid #e2e8f0;
      background: white;
      border-radius: 6px;
      cursor: pointer;
      font-size: 13px;
    }

    .page-btn.active {
      background: #667eea;
      color: white;
      border-color: #667eea;
    }
  </style>
</head>
<body>
  <div class="data-table-wrapper">
    <div class="table-header">
      <h2>Employee Data</h2>
      <input type="text" class="search-box" placeholder="Search employees...">
    </div>
    <table class="data-table">
      <thead>
        <tr>
          <th><input type="checkbox"></th>
          <th>ID</th>
          <th>Name</th>
          <th>Department</th>
          <th>Jabatan</th>
          <th>Status</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><input type="checkbox"></td>
          <td>EMP-001</td>
          <td>John Smith</td>
          <td>Engineering</td>
          <td>Senior Developer</td>
          <td><span class="status-badge status-active">Active</span></td>
          <td>
            <div class="action-btns">
              <button class="btn-sm btn-edit">Edit</button>
              <button class="btn-sm btn-delete">Delete</button>
            </div>
          </td>
        </tr>
        <tr>
          <td><input type="checkbox"></td>
          <td>EMP-002</td>
          <td>Amy Lee</td>
          <td>Product</td>
          <td>Product Manager</td>
          <td><span class="status-badge status-active">Active</span></td>
          <td>
            <div class="action-btns">
              <button class="btn-sm btn-edit">Edit</button>
              <button class="btn-sm btn-delete">Delete</button>
            </div>
          </td>
        </tr>
        <tr>
          <td><input type="checkbox"></td>
          <td>EMP-003</td>
          <td>Mike Williams</td>
          <td>Marketing</td>
          <td>Marketing Lead</td>
          <td><span class="status-badge status-pending">Leave</span></td>
          <td>
            <div class="action-btns">
              <button class="btn-sm btn-edit">Edit</button>
              <button class="btn-sm btn-delete">Delete</button>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="table-footer">
      <span>Showing 1-3 of 50 employees</span>
      <div class="pagination">
        <button class="page-btn">&laquo;</button>
        <button class="page-btn active">1</button>
        <button class="page-btn">2</button>
        <button class="page-btn">3</button>
        <button class="page-btn">...</button>
        <button class="page-btn">17</button>
        <button class="page-btn">&raquo;</button>
      </div>
    </div>
  </div>
</body>
</html>

2. Pricing Table

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }

    .pricing-table-wrapper {
      max-width: 900px;
      margin: 40px auto;
      padding: 0 20px;
    }

    .pricing-table {
      width: 100%;
      border-collapse: collapse;
      background: white;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    }

    .pricing-table th,
    .pricing-table td {
      padding: 18px 25px;
      text-align: center;
      border-bottom: 1px solid #e2e8f0;
    }

    .pricing-table th {
      background: #1a1a2e;
      color: white;
      font-size: 14px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .pricing-table th.highlight {
      background: #667eea;
      font-size: 16px;
    }

    .pricing-table td:first-child {
      text-align: left;
      font-weight: 600;
      background: #f8fafc;
    }

    .pricing-table td.highlight {
      background: #eef2ff;
    }

    .pricing-table tbody tr:last-child td {
      border-bottom: none;
    }

    .pricing-table .check {
      color: #43e97b;
      font-weight: bold;
      font-size: 18px;
    }

    .pricing-table .cross {
      color: #e2e8f0;
      font-size: 18px;
    }

    .pricing-table tfoot td {
      border-bottom: none;
      padding: 25px;
    }

    .pricing-table tfoot td:first-child {
      background: transparent;
    }

    .btn-choose {
      padding: 12px 30px;
      border: 2px solid #667eea;
      background: transparent;
      color: #667eea;
      border-radius: 8px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s;
    }

    .btn-choose:hover,
    .btn-choose.primary {
      background: #667eea;
      color: white;
    }
  </style>
</head>
<body>
  <div class="pricing-table-wrapper">
    <table class="pricing-table">
      <thead>
        <tr>
          <th>Feature</th>
          <th>Basic</th>
          <th class="highlight">Pro</th>
          <th>Enterprise</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Price</td>
          <td>$99/month</td>
          <td class="highlight"><strong>$199/month</strong></td>
          <td>$499/month</td>
        </tr>
        <tr>
          <td>Proyek</td>
          <td>5</td>
          <td class="highlight">Unlimited</td>
          <td>Unlimited</td>
        </tr>
        <tr>
          <td>Storage</td>
          <td>10 GB</td>
          <td class="highlight">100 GB</td>
          <td>1 TB</td>
        </tr>
        <tr>
          <td>Support</td>
          <td>Email</td>
          <td class="highlight">Priority</td>
          <td>24/7 Dedicated</td>
        </tr>
        <tr>
          <td>Analytics</td>
          <td><span class="check">✓</span></td>
          <td class="highlight"><span class="check">✓</span></td>
          <td><span class="check">✓</span></td>
        </tr>
        <tr>
          <td>Custom Domain</td>
          <td><span class="cross">✕</span></td>
          <td class="highlight"><span class="check">✓</span></td>
          <td><span class="check">✓</span></td>
        </tr>
        <tr>
          <td>API Access</td>
          <td><span class="cross">✕</span></td>
          <td class="highlight"><span class="check">✓</span></td>
          <td><span class="check">✓</span></td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td></td>
          <td><button class="btn-choose">Choose Basic</button></td>
          <td class="highlight"><button class="btn-choose primary">Choose Pro</button></td>
          <td><button class="btn-choose">Choose Enterprise</button></td>
        </tr>
      </tfoot>
    </table>
  </div>
</body>
</html>

3. Schedule Table

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }

    .schedule-wrapper {
      padding: 20px;
      overflow-x: auto;
    }

    .schedule-table {
      width: 100%;
      min-width: 800px;
      border-collapse: collapse;
      background: white;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    }

    .schedule-table th {
      padding: 14px;
      background: #1e293b;
      color: white;
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .schedule-table th:first-child {
      width: 100px;
    }

    .schedule-table td {
      padding: 12px 14px;
      text-align: center;
      border: 1px solid #e2e8f0;
      font-size: 13px;
      height: 70px;
      vertical-align: top;
    }

    .schedule-table td:first-child {
      background: #f8fafc;
      font-weight: 600;
      color: #475569;
      vertical-align: middle;
    }

    .class-cell {
      background: #eef2ff;
      border-radius: 6px;
      padding: 6px 8px;
      font-size: 12px;
    }

    .class-cell.math { background: #dbeafe; border-left: 3px solid #3b82f6; }
    .class-cell.indo { background: #dcfce7; border-left: 3px solid #22c55e; }
    .class-cell.eng { background: #fef3c7; border-left: 3px solid #f59e0b; }
    .class-cell.phys { background: #fce7f3; border-left: 3px solid #ec4899; }
    .class-cell.chem { background: #f3e8ff; border-left: 3px solid #a855f7; }
    .class-cell.bio { background: #ccfbf1; border-left: 3px solid #14b8a6; }

    .class-cell .time {
      font-size: 10px;
      color: #94a3b8;
      margin-top: 2px;
    }
  </style>
</head>
<body>
  <div class="schedule-wrapper">
    <table class="schedule-table">
      <thead>
        <tr>
          <th>Time</th>
          <th>Senin</th>
          <th>Selasa</th>
          <th>Rabu</th>
          <th>Kamis</th>
          <th>Jumat</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>07:00<br>08:30</td>
          <td>
            <div class="class-cell math">
              Math<br>
              <span class="time">R.101</span>
            </div>
          </td>
          <td>
            <div class="class-cell phys">
              Physics<br>
              <span class="time">R.203</span>
            </div>
          </td>
          <td>
            <div class="class-cell math">
              Math<br>
              <span class="time">R.101</span>
            </div>
          </td>
          <td>
            <div class="class-cell eng">
              English<br>
              <span class="time">R.305</span>
            </div>
          </td>
          <td>
            <div class="class-cell chem">
              Chemistry<br>
              <span class="time">R.204</span>
            </div>
          </td>
        </tr>
        <tr>
          <td>08:45<br>10:15</td>
          <td>
            <div class="class-cell indo">
              Indonesian<br>
              <span class="time">R.102</span>
            </div>
          </td>
          <td>
            <div class="class-cell math">
              Math<br>
              <span class="time">R.101</span>
            </div>
          </td>
          <td>
            <div class="class-cell phys">
              Physics<br>
              <span class="time">R.203</span>
            </div>
          </td>
          <td>
            <div class="class-cell bio">
              Biologi<br>
              <span class="time">R.301</span>
            </div>
          </td>
          <td>
            <div class="class-cell indo">
              Indonesian<br>
              <span class="time">R.102</span>
            </div>
          </td>
        </tr>
        <tr>
          <td>10:30<br>12:00</td>
          <td>
            <div class="class-cell chem">
              Chemistry<br>
              <span class="time">R.204</span>
            </div>
          </td>
          <td>
            <div class="class-cell eng">
              English<br>
              <span class="time">R.305</span>
            </div>
          </td>
          <td>
            <div class="class-cell bio">
              Biologi<br>
              <span class="time">R.301</span>
            </div>
          </td>
          <td>
            <div class="class-cell math">
              Math<br>
              <span class="time">R.101</span>
            </div>
          </td>
          <td>
            <div class="class-cell phys">
              Physics<br>
              <span class="time">R.203</span>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>

Conclusion

CSS Tables lets you create professional, readable data tables. Key points:

  1. border-collapse: collapse — Merges borders for a clean look
  2. border-spacing — Adds spacing between cells (with separate)
  3. :nth-child — Creates automatic zebra striping
  4. vertical-align — Controls vertical alignment within cells
  5. table-layout: fixed — Fixed, predictable column widths
  6. overflow-x: auto — Responsive tables with horizontal scroll

A good table combines these properties: border-collapse: collapse, stripe rows for readability, hover effects for interactivity, and overflow-x for responsiveness.