🔥CHỌN LỌC TOP NHỮNG KHOÁ HỌC LẬP TRÌNH ONLINE NHIỀU NGƯỜI THEO HOC TẠI ĐÂY🔥

Cafedev chia sẻ cho ace về table trong CSS thông qua ví dụ và thực hành chi tiết tại bài này.

Giao diện của một bảng HTML có thể được cải thiện đáng kể với CSS:

Company Contact Country
Cafedev.vn Maria Germany
A Christina Sweden
B Francisco Mexico
C Roland Austria
D Helen UK
E Philip Germany
F Yoshi Canada
G Giovanni Italy
H Simon UK
Y Marie France 
<!DOCTYPE html>
<html>
<head>
<style>
#customers {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#customers td, #customers th {
  border: 1px solid #ddd;
  padding: 8px;
}

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;}

#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4CAF50;
  color: white;
}
</style>
</head>
<body>

<table id="customers">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Cafedev.vn</td>
    <td>Maria</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>A</td>
    <td>Christina</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>B</td>
    <td>Francisco</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>C</td>
    <td>Roland</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>D</td>
    <td>Helen</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>E</td>
    <td>Philip</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>F</td>
    <td>Yoshi</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>G</td>
    <td>Giovanni</td>
    <td>Italy</td>
  </tr>
  <tr>
    <td>H</td>
    <td>Simon</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Y</td>
    <td>Marie</td>
    <td>France</td>
  </tr>
</table>

</body>
</html>

1. Đường viền cho bảng

Để chỉ định đường viền bảng trong CSS, hãy sử dụng thuộc tính border.

Ví dụ dưới đây chỉ định một đường viền màu đen cho các phần tử < table >, < th > và < td >:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>

<h2>Add a border to a table:</h2>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Xuan</td>
    <td>Linh</td>
  </tr>
  <tr>
    <td>David</td>
    <td>Nguyen</td>
  </tr>
</table>

</body>
</html>

Lưu ý rằng bảng trong ví dụ trên có hai đường viền. Điều này là do cả bảng và các phần tử < th > và < td > đều có đường viền riêng biệt.

2. Thu gọn đường viền bảng

Thuộc tính border-collapse đặt xem có nên thu gọn các đường viền bảng thành một đường viền duy nhất hay không:

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
}

table, td, th {
  border: 1px solid black;
}
</style>
</head>
<body>

<h2>Let the borders collapse:</h2>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Xuan</td>
    <td>Linh</td>
  </tr>
  <tr>
    <td>David</td>
    <td>Hoa</td>
  </tr>
</table>

<p><b>Note:</b> If a !DOCTYPE is not specified, the border-collapse property can produce unexpected results 
in IE8 and earlier versions.</p>

</body>
</html>

3. Chiều rộng và chiều cao của bảng

Chiều rộng và chiều cao của bảng được xác định bởi thuộc tínhwidth và height.

Ví dụ dưới đây đặt chiều rộng của bảng thành 100% và chiều cao của các phần tử thành 50px:

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th {
  height: 50px;
}
</style>
</head>
<body>

<h2>The width and height Properties</h2>
<p>Set the width of the table, and the height of the table header row:</p>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Xuan</td>
    <td>cafedev</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>David</td>
    <td>cafedev</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Long</td>
    <td>Hai</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Linh</td>
    <td>Toan</td>
    <td>$250</td>
  </tr>
</table>

</body>
</html>

4. Căn chỉnh theo chiều ngang – Horizontal Alignment

Thuộc tính text-align đặt căn chỉnh theo chiều ngang (như trái, phải hoặc chính giữa) của nội dung trong < th >hoặc < td >.

Theo mặc định, nội dung của các phần tử được căn giữa và nội dung của các phần tử < td > được căn trái.

Ví dụ sau căn trái văn bản trong các phần tử :

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th {
  text-align: left;
}
</style>
</head>
<body>

<h2>The text-align Property</h2>
<p>This property sets the horizontal alignment (like left, right, or center) of the content in th or td:</p>

<table>
  <tr>
  <th>Firstname</th>
  <th>Lastname</th>
  <th>Savings</th>
  </tr>
  <tr>
  <td>Xuan</td>
  <td>Hoa</td>
  <td>$100</td>
  </tr>
  <tr>
  <td>Nguyen</td>
  <td>Long</td>
  <td>$150</td>
  </tr>
  <tr>
  <td>Hoan</td>
  <td>Linh</td>
  <td>$300</td>
  </tr>
  <tr>
  <td>Kinh</td>
  <td>Lang</td>
  <td>$250</td>
</tr>
</table>

</body>
</html>

5. Căn chỉnh dọc – Vertical Alignment

Thuộc tính vertical-align đặt căn chỉnh theo chiều dọc (như trên cùng, dưới cùng < th > hoặc giữa < td >) của nội dung trong hoặc .

Theo mặc định, căn chỉnh dọc của nội dung trong bảng là giữa (cho cả phần tử < th > và < td >).

Ví dụ sau đặt căn chỉnh văn bản theo chiều dọc xuống dưới cùng cho các phần tử < td >:

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
  width: 100%;
}

td {
  height: 50px;
  vertical-align: bottom;
}
</style>
</head>
<body>

<h2>The text-align Property</h2>
<p>This property sets the horizontal alignment (like left, right, or center) of the content in th or td:</p>

<table>
  <tr>
  <th>Firstname</th>
  <th>Lastname</th>
  <th>Savings</th>
  </tr>
  <tr>
  <td>Xuan</td>
  <td>Hoa</td>
  <td>$100</td>
  </tr>
  <tr>
  <td>Nguyen</td>
  <td>Long</td>
  <td>$150</td>
  </tr>
  <tr>
  <td>Hoan</td>
  <td>Linh</td>
  <td>$300</td>
  </tr>
  <tr>
  <td>Kinh</td>
  <td>Lang</td>
  <td>$250</td>
</tr>
</table>

</body>
</html>

6. Table Padding

Để kiểm soát khoảng cách giữa đường viền và nội dung trong bảng, hãy sử dụng thuộc tính padding trên các phần tử < td > và < th >:

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

7. Bộ chia ngang – Horizontal Dividers

Thêm thuộc tính border-bottom vào < td > và < th > cho các dải phân cách ngang:

th, td {
  border-bottom: 1px solid #ddd;
}

8. Bảng lưu trữ – Hoverable Table

Sử dụng bộ chọn: di chuột trên < tr > để đánh dấu các hàng trong bảng khi di chuột qua:

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

tr:hover {background-color:#f5f5f5;}
</style>
</head>
<body>

<h2>The text-align Property</h2>
<p>This property sets the horizontal alignment (like left, right, or center) of the content in th or td:</p>

<table>
  <tr>
  <th>Firstname</th>
  <th>Lastname</th>
  <th>Savings</th>
  </tr>
  <tr>
  <td>Xuan</td>
  <td>Hoa</td>
  <td>$100</td>
  </tr>
  <tr>
  <td>Nguyen</td>
  <td>Long</td>
  <td>$150</td>
  </tr>
  <tr>
  <td>Hoan</td>
  <td>Linh</td>
  <td>$300</td>
  </tr>
  <tr>
  <td>Kinh</td>
  <td>Lang</td>
  <td>$250</td>
</tr>
</table>

</body>
</html>

9. Bàn sọc – Striped Tables

Đối với bảng sọc vằn, hãy sử dụng bộ chọn thứ nth-child() và thêm background-color cho tất cả các hàng bảng chẵn (hoặc lẻ):

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

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

tr:nth-child(even) {background-color: #f2f2f2;}
</style>
</head>
<body>

<h2>The text-align Property</h2>
<p>This property sets the horizontal alignment (like left, right, or center) of the content in th or td:</p>

<table>
  <tr>
  <th>Firstname</th>
  <th>Lastname</th>
  <th>Savings</th>
  </tr>
  <tr>
  <td>Xuan</td>
  <td>Hoa</td>
  <td>$100</td>
  </tr>
  <tr>
  <td>Nguyen</td>
  <td>Long</td>
  <td>$150</td>
  </tr>
  <tr>
  <td>Hoan</td>
  <td>Linh</td>
  <td>$300</td>
  </tr>
  <tr>
  <td>Kinh</td>
  <td>Lang</td>
  <td>$250</td>
</tr>
</table>

</body>
</html>

10. Table Color

Ví dụ dưới đây chỉ định màu nền và màu văn bản của các phần tử < th >:

th {
  background-color: #4CAF50;
  color: white;
}

11. Bảng đáp ứng – Responsive Table

Bảng đáp ứng sẽ hiển thị thanh cuộn ngang nếu màn hình quá nhỏ để hiển thị toàn bộ nội dung:

Thêm một phần tử vùng chứa (như < div >) với overflow-x:auto xung quanh phần tử < table > để làm cho nó phản hồi:

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

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

tr:nth-child(even) {background-color: #f2f2f2;}
</style>
</head>
<body>

<h2>Responsive Table</h2>
<p>A responsive table will display a horizontal scroll bar if the screen is too 
small to display the full content. Resize the browser window to see the effect:</p>
<p>To create a responsive table, add a container element (like div) with <strong>overflow-x:auto</strong> around the table element:</p>

<div style="overflow-x:auto;">
  <table>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
    </tr>
    <tr>
      <td>Adam</td>
      <td>Johnson</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
    </tr>
  </table>
</div>

</body>
</html>

Lưu ý: Trong OS X Lion (trên Mac), thanh cuộn được ẩn theo mặc định và chỉ hiển thị khi được sử dụng (ngay cả khi “tràn: cuộn” được đặt).

Full series tự học CSS từ cơ bản tới nâng cao.

Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:

Chào thân ái và quyết thắng!

Đăng ký kênh youtube để ủng hộ Cafedev nha các bạn, Thanks you!

BÀI VIẾT LIÊN QUANXEM THÊM