CSS Tables

CSS Tables

CSS tables can be styled to improve readability and match your website design. You can control borders, spacing, alignment, and make tables responsive for smaller screens.

Table Borders

You can add borders to tables using the border property. A common approach is to use border-collapse to avoid double borders.

table {
  border-collapse: collapse;
  width: 100%;
}

table, th, td {
  border: 1px solid #ddd;
}

Table Size

Table size is usually controlled with width. You can also set padding for better spacing inside cells.

th, td {
  padding: 10px 12px;
}

table {
  width: 100%;
  max-width: 700px;
}

Table Alignment

Use text-align to control horizontal alignment of text, and vertical-align for vertical alignment inside cells.

th {
  text-align: left;
}

td.price {
  text-align: right;
}

td {
  vertical-align: middle;
}

Table Styling

Styling tables often includes a header background, zebra stripes, and hover effects.

th {
  background: #f3f6ff;
  color: #222;
}

tr:nth-child(even) {
  background: #fafafa;
}

tr:hover {
  background: #eef3ff;
}

Table Responsive

On small screens, wide tables may overflow. A simple solution is to wrap the table in a container with horizontal scrolling.

.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  min-width: 520px;
}

This allows the user to scroll the table horizontally on mobile devices.

Code Challenge

Goal: Style a table with borders, spacing, zebra stripes, and responsive scrolling.

HTML:

<div class="table-wrap">
  <table>
    <tr>
      <th>Product</th>
      <th>Price</th>
      <th>Status</th>
    </tr>
    <tr>
      <td>Keyboard</td>
      <td class="price">$49</td>
      <td>In stock</td>
    </tr>
    <tr>
      <td>Mouse</td>
      <td class="price">$19</td>
      <td>In stock</td>
    </tr>
    <tr>
      <td>Monitor</td>
      <td class="price">$199</td>
      <td>Backorder</td>
    </tr>
  </table>
</div>

Task:

• Collapse borders and add a light border to cells
• Add padding to table cells
• Style the header row
• Add zebra stripes and a hover effect
• Make the table scroll horizontally on small screens

Try a Solution:

.table-wrap {
  overflow-x: auto;
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 520px;
}

table, th, td {
  border: 1px solid #ddd;
}

th, td {
  padding: 10px 12px;
  vertical-align: middle;
}

th {
  background: #f3f6ff;
  text-align: left;
}

td.price {
  text-align: right;
}

tr:nth-child(even) {
  background: #fafafa;
}

tr:hover {
  background: #eef3ff;
}

What’s Next?

Next, you will learn how the CSS display property affects layout and visibility.