Thêm viền cho bảng (Adding Borders to Tables) bằng CSS

Để thêm viền cho bảng trong CSS, sử dụng thuộc tính border.

Ví dụ 1: Viền cho table, th, td

<!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: Viền bảng và ô khác nhau

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border: 5px dashed orange;
}
th, td {
  border: 1px dashed green;
}
</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ả

Mẹo:

• Dùng border-collapse: collapse để gộp viền liền kề
• Kết hợp border-spacing khi separate
• Có thể style riêng border-top, border-bottom...