Tạo kiểu cho bảng (Styling Tables) với CSS

Để tạo kiểu cho bảng với CSS, ta có thể thiết lập viền, gộp viền, chiều rộng/cao, padding, căn lề văn bản, v.v. Dưới đây là các ví dụ:

Ví dụ 1: Thêm viền cho bảng

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 2px dashed orange;
}
</style>
</head>
<body>
<h2>Bảng xếp hạng đội</h2>
<table>
  <tr><th>Đội</th><th>Xếp hạng</th><th>Điểm</th></tr>
  <tr><td>India</td><td>1</td><td>200</td></tr>
  <tr><td>England</td><td>2</td><td>180</td></tr>
  <tr><td>Australia</td><td>3</td><td>150</td></tr>
  <tr><td>NewZealand</td><td>4</td><td>130</td></tr>
  <tr><td>SouthAfrica</td><td>5</td><td>100</td></tr>
  <tr><td>WestIndies</td><td>6</td><td>80</td></tr>
  <tr><td>Pakistan</td><td>7</td><td>70</td></tr>
</table>
</body>
</html>

Kết quả

Ví dụ 2: Gộp viền bảng (border-collapse)

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  background-color: black;
  color: white;
}
th, td {
  border: 2px dashed yellow;
}
</style>
</head>
<body>
<h2>Bảng xếp hạng đội</h2>
<table>
  <tr><th>Đội</th><th>Xếp hạng</th><th>Điểm</th></tr>
  <tr><td>India</td><td>1</td><td>200</td></tr>
  <tr><td>England</td><td>2</td><td>180</td></tr>
  <tr><td>Australia</td><td>3</td><td>150</td></tr>
  <tr><td>NewZealand</td><td>4</td><td>130</td></tr>
  <tr><td>SouthAfrica</td><td>5</td><td>100</td></tr>
  <tr><td>WestIndies</td><td>6</td><td>80</td></tr>
  <tr><td>Pakistan</td><td>7</td><td>70</td></tr>
</table>
</body>
</html>

Kết quả

Ví dụ 3: Padding và căn giữa

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border: 1px solid black;
  background-color: blue;
  color: white;
}
th, td {
  border: 1px solid black;
  padding: 20px;
  text-align: center;
}
table#demo {
  table-layout: fixed;
  width: 100%;
}
</style>
</head>
<body>
<h2>Bảng xếp hạng đội</h2>
<table id="demo">
  <tr><th>Đội</th><th>Xếp hạng</th><th>Điểm</th></tr>
  <tr><td>India</td><td>1</td><td>200</td></tr>
  <tr><td>England</td><td>2</td><td>180</td></tr>
  <tr><td>Australia</td><td>3</td><td>150</td></tr>
  <tr><td>NewZealand</td><td>4</td><td>130</td></tr>
  <tr><td>SouthAfrica</td><td>5</td><td>100</td></tr>
</table>
</body>
</html>

Kết quả

Tóm tắt kỹ thuật:

• border-collapse: collapse - gộp viền liền kề
• padding - khoảng cách giữa viền và nội dung
• text-align - căn lề ngang (left, center, right)
• vertical-align - căn lề dọc (top, middle, bottom)
• table-layout: fixed - hiệu năng tốt cho bảng lớn