CSS Tables

Adding Borders to Tables

By default, HTML tables have no visible borders. You can add borders to the table, header cells (<th>), and regular cells (<td>) by applying the border property. You can customize width, style, and color.

table, th, td {
  border: 1px solid black; /* 1px thickness, solid line, black color */
}

Example:

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Row 1, Col 1</td>
    <td>Row 1, Col 2</td>
  </tr>
</table>

Border Collapse

Normally, each cell has its own borders, causing double borders between cells. Using border-collapse: collapse; merges adjacent borders into a single border for a cleaner look.

table {
  border-collapse: collapse;
}

Example:

<table style="border-collapse: collapse; border: 1px solid black;">
  <tr>
    <th>Item</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>$1</td>
  </tr>
</table>

Cell Padding and Alignment

Padding adds space inside each table cell so text isn’t cramped. The text-align property controls horizontal alignment (left, center, or right).

th, td {
  padding: 10px;
  text-align: left;
}

Example:

<table border="1">
  <tr>
    <th style="padding: 10px; text-align: left;">Product</th>
    <th style="padding: 10px; text-align: center;">Quantity</th>
  </tr>
  <tr>
    <td style="padding: 10px;">Banana</td>
    <td style="padding: 10px; text-align: center;">5</td>
  </tr>
</table>

Table Width and Height

You can set the table's width and height using CSS. Width can be in pixels, percentages, or other units; height is usually set for cells or rows.

table {
  width: 100%; /* fill the container */
}

td {
  height: 50px; /* sets cell height */
}

Example:

<table border="1" style="width: 100%;">
  <tr>
    <td style="height: 50px;">Tall cell</td>
    <td>Normal cell</td>
  </tr>
</table>

Table Hover Effects

Highlight a row when the mouse hovers over it:

tr:hover {
  background-color: #f2f2f2;
}

Practice Prompt

Create a styled table with:

• 3 columns and at least 2 rows
• Visible borders and 100% width
• Padded cells and hover background color

<table style={{
  width: "100%",
  borderCollapse: "collapse"
}}>
  <thead>
    <tr>
      <th style={{ border: "1px solid black", padding: "10px", textAlign: "center" }}>Name</th>
      <th style={{ border: "1px solid black", padding: "10px", textAlign: "center" }}>Age</th>
      <th style={{ border: "1px solid black", padding: "10px", textAlign: "center" }}>City</th>
    </tr>
  </thead>
  <tbody>
    <tr style={{ backgroundColor: "#fff" }}>
      <td style={{ border: "1px solid black", padding: "10px" }}>Alice</td>
      <td style={{ border: "1px solid black", padding: "10px" }}>24</td>
      <td style={{ border: "1px solid black", padding: "10px" }}>New York</td>
    </tr>
    <tr style={{ backgroundColor: "#fff" }}>
      <td style={{ border: "1px solid black", padding: "10px" }}>Bob</td>
      <td style={{ border: "1px solid black", padding: "10px" }}>30</td>
      <td style={{ border: "1px solid black", padding: "10px" }}>Chicago</td>
    </tr>
  </tbody>
</table>

You can copy and paste this code in your IDE to run!

Need Help?

Ask the AI if you need help understanding or want to dive deeper in any topic