Tìm hiểu cách định dạng cho một cái bảng trong CSS

1) Cách tạo đường viền cho bảng & các ô bên trong bảng

– Để tạo đường viền cho bảng thì chúng ta thiết lập thuộc tính border cho phần tử <table>

– Để tạo đường viền cho ô tiêu đề thì chúng ta thiết lập thuộc tính border cho phần tử <th>

– Để tạo đường viền cho ô bình thường thì chúng ta thiết lập thuộc tính border cho phần tử <td>

table{
    border:1px solid black;
}
th{
    border:1px solid black;
}
td{
    border:1px solid black;
}

2) Cách gộp các đường viền lân cận lại với nhau

– Khi chúng ta sử dụng thuộc tính border để thiết lập đường viền cho các phần tử <table>, <th>, <td> thì mặc định mỗi phần tử đó sẽ có một cái đường viền riêng biệt. Tuy nhiên, nếu các bạn không thích điều này thì các bạn có thể tùy chỉnh lại bằng cách thiết lập thuộc tính border-collapse với giá trị collapse cho phần tử <table> để gộp các đường viền lân cận bên trong cái bảng lại với nhau (hoặc giá trị separate để giữ nguyên đường viền của các phần tử).

table, th, td{
    border:1px solid black;
}
table{
    border-collapse:collapse;
}

3) Chỉnh màu nền cho bảng hoặc các ô bên trong bảng

– Để chỉnh màu nền cho nguyên cái bảng thì ta thiết lập thuộc tính background-color cho phần tử <table>

– Để chỉnh màu nền cho tất cả ô trên hàng thì ta thiết lập thuộc tính background-color cho phần tử <tr>

– Để chỉnh màu nền cho một ô thì ta thiết lập thuộc tính background-color cho phần tử <th> || <td>

<table style="background-color:yellow">
    <tr style="background-color:skyblue">
        <td>. . . . . . . . . . . .</td>
        <td>. . . . . . . . . . . .</td>
        <td>. . . . . . . . . . . .</td>
      </tr>
      <tr>
        <td>. . . . . . . . . . . .</td>
        <td>. . . . . . . . . . . .</td>
        <td>. . . . . . . . . . . .</td>
      </tr>
      <tr>
        <td>. . . . . . . . . . . .</td>
        <td>. . . . . . . . . . . .</td>
        <td style="background-color:red">. . . . . . . . . . . .</td>
    </tr>
</table>

4) Thiết lập vùng đệm bên trong ô

– Để thiết lập vùng đệm bên trong một ô thì chúng ta thiết lập thuộc tính padding cho ô đó.

– Lưu ý: Cách sử dụng thuộc tính padding để thiết lập vùng đệm cho một ô cũng giống như cách sử dụng thuộc tính padding để thiết lập vùng đệm cho một phần tử thông thường.

<table>
    <tr>
        <td>. . . . . . . . . . . .</td>
        <td>. . . . . . . . . . . .</td>
        <td>. . . . . . . . . . . .</td>
    </tr>
    <tr>
        <td>. . . . . . . . . . . .</td>
        <td>. . . . . . . . . . . .</td>
        <td>. . . . . . . . . . . .</td>
    </tr>
    <tr>
        <td>. . . . . . . . . . . .</td>
        <td>. . . . . . . . . . . .</td>
        <td style="padding:40px 0px 0px 80px">. . . . . . . . . . . .</td>
    </tr>
</table>

5) Chỉnh kích thước cho bảng hoặc các ô bên trong bảng

– Để chỉnh chiều rộng (chiều cao) cho bảng thì ta thiết lập thuộc tính width (height) cho phần tử <table>

– Để chỉnh chiều rộng (chiều cao) cho ô thì ta thiết lập thuộc tính width (height) cho phần tử <th> || <td>

<table style="width:100%;height:300px">
    <tr>
        <td style="width:70%;">. . . . . . . . .</td>
        <td>. . . . . . . . .</td>
        <td>. . . . . . . . .</td>
    </tr>
    <tr>
        <td>. . . . . . . . .</td>
        <td>. . . . . . . . .</td>
        <td>. . . . . . . . .</td>
    </tr>
    <tr>
        <td>. . . . . . . . .</td>
        <td>. . . . . . . . .</td>
        <td style="height:200px">. . . . . . . . .</td>
    </tr>
</table>

– Lưu ý:

• Đối với các ô được xếp chung một cột, chiều rộng của các ô sẽ được tính dựa theo chiều rộng của ô được thiết lập thuộc tính width với giá trị lớn nhất.
• Đối với các ô được xếp chung một hàng, chiều cao của các ô sẽ được tính dựa theo chiều cao của ô được thiết lập thuộc tính height với giá trị lớn nhất.

<table>
    <tr>
        <td style="width:200px">. . . . . . . . .</td>
        <td>. . . . . . . . .</td>
        <td>. . . . . . . . .</td>
    </tr>
    <tr>
        <td style="width:300px">. . . . . . . . .</td>
        <td>. . . . . . . . .</td>
        <td>. . . . . . . . .</td>
    </tr>
    <tr>
        <td style="width:100px">. . . . . . . . .</td>
        <td>. . . . . . . . .</td>
        <td>. . . . . . . . .</td>
    </tr>
</table>
<p>Chiều rộng của các ô trong cột thứ nhất là 300px (vì nó là giá trị lớn nhất)</p>

6) Các thuộc tính được dùng để định dạng cho bảng

– Dưới đây là một số thuộc tính khác thường được áp dụng vào việc định dạng cho bảng.

(các bạn vui lòng bấm vào hình để xem hướng dẫn chi tiết về cách sử dụng của từng thuộc tính)

7) Giới thiệu thêm một số kiểu định dạng cho bảng

7.1) Bảng chỉ chứa các đường kẻ ngang

table, th, td{
    border-top:1px solid #ccc;
    border-bottom:1px solid #ccc;
}
table{
    border-collapse:collapse;
}

7.2) Hàng đổi màu khi bị dí con chuột vào

table, th, td{
    border:1px solid #ccc;
}
table{
    border-collapse:collapse;
}
tr:hover{
    background-color:#ddd;
    cursor:pointer;
}

7.3) Bảng có màu xen kẻ

table, th, td{
    border:1px solid #868585;
}
table{
    border-collapse:collapse;
}
table tr:nth-child(odd){
    background-color:#eee;
}
table tr:nth-child(even){
    background-color:white;
}
table tr:nth-child(1){
    background-color:skyblue;
}

7.4) Bảng responsive

– Thông thường, khi chiều rộng của cái bảng lớn hơn chiều rộng của phần tử chứa nó thì mặc định cái bảng sẽ bị tràn ra khỏi phần tử (điều đó gây mất thẩm mỹ đối với trang web)

– Để khắc phục tình trạng này thì chúng ta cần phải thiết lập thuộc tính overflow-x với giá trị là auto cho phần tử chứa cái bảng.

#father{
    width:400px;
    overflow:auto;
}
table{
    width:600px;
}

border-spacing: value;

caption-side: value;

empty-cells: value;

text-align: value;

vertical-align: value;