HTML Code

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>vertical-align in tables</title>

  <style>

    body {

      font-family: system-ui, sans-serif;

      padding: 24px;

      background: #f8fafc;

      color: #334155;

    }



    table {

      border-collapse: collapse;

      width: min(100%, 420px);

      background: #fff;

    }



    th, td {

      border: 1px solid #cbd5e1;

      padding: 0.75rem 1rem;

    }



    th {

      background: #eff6ff;

      text-align: left;

    }



    .cell-top { vertical-align: top; }

    .cell-middle { vertical-align: middle; }

    .cell-bottom { vertical-align: bottom; }



    .tall {

      height: 80px;

    }

  </style>

</head>

<body>

  <h1>Table Cell Alignment</h1>

  <table>

    <thead>

      <tr>

        <th>Value</th>

        <th class="tall">Content</th>

      </tr>

    </thead>

    <tbody>

      <tr>

        <td>top</td>

        <td class="tall cell-top">Aligned to top</td>

      </tr>

      <tr>

        <td>middle</td>

        <td class="tall cell-middle">Aligned to middle</td>

      </tr>

      <tr>

        <td>bottom</td>

        <td class="tall cell-bottom">Aligned to bottom</td>

      </tr>

    </tbody>

  </table>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

CSS vertical-align Property - Table Cells