WEB CƠ BẢN

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


STT Họ tên Ngày sinh
1 Nguyễn Hoàng Anh 23/11/1992
2 Nguyễn Thị Thùy Anh 12/12/1994
3 Hoàng Hiếu Dương 07/07/1993
4 Hoàng Tiến Đạt 16/01/1994
5 Lê Quang Đạt 10/12/1994

- Trong bộ tài liệu học HTML thì tôi đã có hướng dẫn các bạn cách tạo một cái bảng rồi. Tuy nhiên, HTML chỉ hỗ trợ có một vài thuộc tính (border, cellspacing, cellpadding, . . . .) dùng để định dạng cho bảng, cho nên cái bảng sẽ nhìn rất đơn sơ, hay nói cách khác là không được đẹp.

- Nhằm giúp các bạn có thể tạo ra được những chiếc bảng đẹp hơn và nhìn chuyên nghiệp hơn (giống như cái bảng bên dưới) thì ở trong bài viết này, tôi sẽ hướng dẫn các bạn cách vận dụng CSS để định dạng cho bảng.

STT Mã thẻ SV Họ tên Ngày sinh Giới tính Quê quán Lớp
1 12A10010151 Nguyễn Hoàng Anh 23/11/1992 Nam Cần Thơ 12A1
2 12A10010007 Nguyễn Thị Thùy Anh 12/12/1994 Nữ Vĩnh Long 12A1
3 12A10010184 Hoàng Hiếu Dương 07/07/1993 Nam Sóc Trăng 12A1
4 12A10010154 Hoàng Tiến Đạt 16/01/1994 Nam Hậu Giang 12A1
5 12A10010160 Lê Quang Đạt 10/12/1994 Nam Bạc Liêu 12A1

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>

Ví dụ:
Họ tên Giới tính Quê quán
Trần Anh Đức Nam Cần Thơ
Kiều Thị Thu Hằng Nữ Vĩnh Long
Dương Kim Thương Nam Trà Vinh

Tạo đường viền cho bảng.

Tạo đường viền cho ô tiêu đề.

Tạo đường viền cho ô bình thường.

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ử).

Ví dụ:
Họ tên Giới tính Quê quán
Trần Anh Đức Nam Cần Thơ
Kiều Thị Thu Hằng Nữ Vĩnh Long
Dương Kim Thương Nam Trà Vinh

Gộp các đường viền lân cận bên trong cái bảng lại với nhau

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>

Ví dụ:

<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.

Ví dụ:

<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>

Ví dụ:

<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.
Ví dụ:

<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)

border-spacing

- Thuộc tính này dùng để thiết lập khoảng cách nằm giữa mỗi hai ô liền kề.

.ttt-border-spacing
caption-side

- Thuộc tính này dùng để thiết lập vị trí tiêu đề của cái bảng.

.ttt-caption-side
empty-cells

- Thuộc tính này dùng để tùy chỉnh việc hiển thị hay ẩn một ô có nội dung rỗng.

.ttt-empty-cells
text-align

- Thuộc tính này dùng để canh lề cho văn bản bên trong ô (theo chiều ngang)

.ttt-text-align
vertical-align

- Thuộc tính này dùng để canh lề cho văn bản bên trong ô (theo chiều dọc)

.ttt-vertical-align

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

STT Họ tên Ngày sinh Giới tính Quê quán
1 Trần Anh Đức 03/08/1993 Nam Cần Thơ
2 Kiều Thị Thu Hằng 04/09/1991 Nữ Vĩnh Long
3 Vương Thị Lê Na 06/10/1991 Nữ Sóc Trăng
4 Dương Kim Thương 16/11/1990 Nam Trà Vinh
5 Mai Đức Hiếu 18/06/1989 Nam Hậu Giang
Ví dụ:

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

STT Họ tên Ngày sinh Giới tính Quê quán
1 Trần Anh Đức 03/08/1993 Nam Cần Thơ
2 Kiều Thị Thu Hằng 04/09/1991 Nữ Vĩnh Long
3 Vương Thị Lê Na 06/10/1991 Nữ Sóc Trăng
4 Dương Kim Thương 16/11/1990 Nam Trà Vinh
5 Mai Đức Hiếu 18/06/1989 Nam Hậu Giang
Ví dụ:

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ẻ

STT Họ tên Ngày sinh Giới tính Quê quán
1 Trần Anh Đức 03/08/1993 Nam Cần Thơ
2 Kiều Thị Thu Hằng 04/09/1991 Nữ Vĩnh Long
3 Vương Thị Lê Na 06/10/1991 Nữ Sóc Trăng
4 Dương Kim Thương 16/11/1990 Nam Trà Vinh
5 Mai Đức Hiếu 18/06/1989 Nam Hậu Giang
Ví dụ:

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)

STT Họ tên Ngày sinh Giới tính Quê quán
1 Trần Anh Đức 03/08/1993 Nam Cần Thơ
2 Kiều Thị Thu Hằng 04/09/1991 Nữ Vĩnh Long
3 Vương Thị Lê Na 06/10/1991 Nữ Sóc Trăng
4 Dương Kim Thương 16/11/1990 Nam Trà Vinh
5 Mai Đức Hiếu 18/06/1989 Nam Hậu Giang

- Để 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.

STT Họ tên Ngày sinh Giới tính Quê quán
1 Trần Anh Đức 03/08/1993 Nam Cần Thơ
2 Kiều Thị Thu Hằng 04/09/1991 Nữ Vĩnh Long
3 Vương Thị Lê Na 06/10/1991 Nữ Sóc Trăng
4 Dương Kim Thương 16/11/1990 Nam Trà Vinh
5 Mai Đức Hiếu 18/06/1989 Nam Hậu Giang
Ví dụ:

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

- Thuộc tính border-spacing dùng để thiết lập khoảng cách nằm giữa mỗi hai ô liền kề.

- Cú pháp:

border-spacing: value;

- Trong đó, value có thể được xác định dựa theo một trong ba loại giá trị:

length1 length2

- Chỉ định cụ thể khoảng cách nằm giữa mỗi hai ô liền bằng cặp giá trị length1 length2.

- Trong đó:

  • length1 là khoảng cách nằm giữa mỗi hai ô liền kề theo chiều ngang.
  • length2 là khoảng cách nằm giữa mỗi hai ô liền kề theo chiều dọc.

- Lưu ý: Nếu chúng ta chỉ xác định một giá trị length thì nó sẽ đại diện cho cả length1 & length2

Xem ví dụ
initial

- Sử dụng giá trị mặc định của nó.

(mặc định thì thuộc tính border-spacing có giá trị là 0px)

inherit

- Kế thừa giá trị thuộc tính border-spacing từ phần tử cha của nó.

- Thông thường, khi chúng ta sử dụng thẻ <caption> để tạo tiêu đề cho cái bảng thì mặc định tiêu đề sẽ nằm phía trên cái bảng.

- Từ đây, thuộc tính caption-side được dùng để thiết lập lại vị trí của tiêu đề.

- Cú pháp:

caption-side: value;

- Trong đó, value có thể được xác định dựa theo một trong bốn loại giá trị:

top

- Tiêu đề sẽ nằm phía trên cái bảng.

Xem ví dụ
bottom

- Tiêu đề sẽ nằm phía dưới cái bảng.

initial

- Sử dụng giá trị mặc định của nó.

(mặc định thì thuộc tính caption-side có giá trị là top)

inherit

- Kế thừa giá trị thuộc tính caption-side từ phần tử cha của nó.

- Thuộc tính empty-cells dùng để tùy chỉnh việc hiển thị hay ẩn một ô có nội dung rỗng.

- Cú pháp:

empty-cells: value;

- Trong đó, value có thể được xác định dựa theo một trong bốn loại giá trị:

show

- Các ô có nội dung rỗng được phép hiển thị.

Xem ví dụ
hide

- Các ô có nội dung rỗng bị ẩn đi.

initial

- Sử dụng giá trị mặc định của nó.

(mặc định thì thuộc tính empty-cells có giá trị là show)

inherit

- Kế thừa giá trị thuộc tính empty-cells từ phần tử cha của nó.

- Thuộc tính text-align được dùng để canh lề cho văn bản nằm ở bên trong ô (theo chiều ngang)

- Cú pháp:

text-align: value;

- Trong đó, value có thể được xác định dựa theo một trong bốn loại giá trị:

left

- Văn bản sẽ được canh nằm bên trái.

Xem ví dụ
center

- Văn bản sẽ được canh nằm ở giữa.

right

- Văn bản sẽ được canh nằm bên phải.

justify

- Văn bản sẽ được canh đều hai bên trái phải.

- Thuộc tính vertical-align được dùng để canh lề cho văn bản nằm ở bên trong ô (theo chiều dọc)

- Cú pháp:

vertical-align: value;

- Trong đó, value có thể được xác định dựa theo một trong ba loại giá trị:

top

- Văn bản sẽ được canh nằm ở trên.

Xem ví dụ
middle

- Văn bản sẽ được canh nằm ở giữa.

bottom

- Văn bản sẽ được canh nằm ở dưới.