📊 CSS Table Properties

Last Updated: November 2025

CSS Table Properties help style and format HTML tables — controlling how borders, spacing, captions, and cells look.

🗣 Hinglish Tip: Table ko design karne ke liye ye properties use hoti hain — jisse data clean aur readable lagta hai.

Common Table Markup

<table>
  <caption>
    Student Marks
  </caption>
  <tr>
    <th>Name</th>
    <th>Math</th>
    <th>Science</th>
  </tr>
  <tr>
    <td>Amit</td>
    <td>90</td>
    <td>85</td>
  </tr>
</table>

🧩 Common Table Properties

Property	Description	Example
border	Sets border for table and cells	border: 1px solid black;
border-collapse	Controls border behavior (collapsed or separate)	border-collapse: collapse;
border-spacing	Sets space between cell borders (only works when borders are separate)	border-spacing: 10px;
caption-side	Positions the table caption (top or bottom)	caption-side: bottom;
empty-cells	Show or hide borders/background for empty cells	empty-cells: hide;
table-layout	Defines how column widths are calculated	table-layout: fixed;
width / height	Sets table or cell size	width: 100%;
text-align	Aligns text horizontally inside cells	text-align: center;
vertical-align	Aligns cell content vertically (top/middle/bottom)	vertical-align: middle;

Simple Styled Table

table {
  width: 60%;
  border-collapse: collapse;
  margin: 20px auto;
}
th,
td {
  border: 1px solid #555;
  padding: 10px;
  text-align: center;
}
caption {
  caption-side: top;
  font-weight: bold;
  margin-bottom: 10px;
}

🗣 Hinglish Tip: border-collapse: collapse; se double lines ek single line ban jaati hai.

border-spacing and empty-cells

table {
  border-collapse: separate;
  border-spacing: 15px;
  empty-cells: hide;
}
td {
  border: 1px solid black;
  height: 50px;
  width: 100px;
}

🧠 Note: empty-cells: hide; hides borders of blank cells.

Fixed Table Layout

table {
  width: 400px;
  table-layout: fixed;
  border-collapse: collapse;
}
td {
  border: 1px solid gray;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

🗣 Hinglish Tip: table-layout: fixed; use karne se columns equal width me adjust ho jaate hain.

Table Row & Column Styling

You can target specific rows or columns:

tr:nth-child(even) {
  background-color: #f2f2f2;
}
th {
  background-color: #333;
  color: white;
}
td:first-child {
  font-weight: bold;
}

🗣 Hinglish Tip: nth-child(even) se alternating row colors lagane me easy hota hai — jaise zebra style table.

← Previous Next →