QuitExams

Introduction to CSS Table Properties

CSS Table properties allow you to style HTML tables, control spacing, borders, layout, captions, and text alignment.

1️⃣ border & border-collapse

Controls table and cell borders, and whether borders are collapsed.

<style>
table {
  border: 2px solid #007bff;
  border-collapse: collapse; /* or separate */
}
th, td {
  border: 1px solid #28a745;
  padding: 10px;
}
</style>

<table>
  <tr><th>>Name</th><th>>Age</th></tr>
  <tr><td>Alice</td><td>20</td></tr>
</table>

2️⃣ border-spacing

Defines space between cells (only with border-collapse: separate).

<style>
table {
  border-collapse: separate;
  border-spacing: 15px;
}
</style>

3️⃣ caption-side

Positions the table caption at top or bottom.

<style>
caption {
  caption-side: top;
  font-weight: bold;
}
</style>

<table>
  <caption>Student Info</caption>
  <tr><th>>Name</th><th>Age</th></tr>
  <tr><td>Alice</td><td>20</td></tr>
</table>

4️⃣ empty-cells

Controls display of empty cells.

<style>
td {
  empty-cells: show; /* or hide */
}
</style>

5️⃣ table-layout

Controls table column width algorithm.

<style>
table {
  table-layout: fixed; /* or auto */
  width: 100%;
}
th, td {
  width: 50%;
}
</style>

6️⃣ width, height, text-align

Set table or cell width, height, and text alignment.

<style>
td {
  width: 150px;
  height: 50px;
  text-align: center; /* left, right, center */
}
</style>

📘 Summary of Table Properties