Hướng dẫn table css - bảng css

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

STTHọ tênNgà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.

STTMã thẻ SVHọ tênNgày sinhNguyễn Hoàng Anh 23/11/1992 Nguyễn Thị Thùy Anh
1 12/12/1994 Nguyễn Hoàng Anh 23/11/1992 Nguyễn Thị Thùy Anh 12/12/1994 Hoàng Hiếu Dương
2 07/07/1993 Nguyễn Thị Thùy Anh 12/12/1994 Hoàng Hiếu Dương 07/07/1993 Hoàng Hiếu Dương
3 07/07/1993 Hoàng Hiếu Dương 07/07/1993 Nguyễn Thị Thùy Anh 12/12/1994 Hoàng Hiếu Dương
4 07/07/1993 Hoàng Tiến Đạt 16/01/1994 Nguyễn Thị Thùy Anh 12/12/1994 Hoàng Hiếu Dương
5 07/07/1993 Lê Quang Đạt 10/12/1994 Nguyễn Thị Thùy Anh 12/12/1994 Hoàng Hiếu Dương

07/07/1993

Hoàng Tiến Đạt bảng thì chúng ta thiết lập thuộc tính border cho phần tử

16/01/1994 ô tiêu đề thì chúng ta thiết lập thuộc tính border cho phần tử

Lê Quang Đạt ô bình thường thì chúng ta thiết lập thuộc tính border cho phần tử

Họ tênNguyễn Hoàng Anh 23/11/1992
Nguyễn Thị Thùy Anh Nguyễn Thị Thùy Anh 12/12/1994
Hoàng Hiếu Dương Hoàng Hiếu Dương 07/07/1993
Hoàng Tiến Đạt Nguyễn Thị Thùy Anh 12/12/1994

Hoàng Hiếu Dương

07/07/1993

Hoàng Tiến Đạt

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

16/01/1994

Lê Quang Đạt border-collapse với giá trị collapse cho phần tử

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

Họ tênNguyễn Hoàng Anh 23/11/1992
Nguyễn Thị Thùy Anh Nguyễn Thị Thùy Anh 12/12/1994
Hoàng Hiếu Dương Hoàng Hiếu Dương 07/07/1993
Hoàng Tiến Đạt Nguyễn Thị Thùy Anh 12/12/1994

Hoàng Hiếu Dương

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

07/07/1993

Hoàng Tiến Đạt nguyên cái bảng thì ta thiết lập thuộc tính background-color cho phần tử

16/01/1994 tất cả ô trên hàng thì ta thiết lập thuộc tính background-color cho phần tử

Lê Quang Đạt một ô thì ta thiết lập thuộc tính background-color cho phần 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.

Mã thẻ SV


Giới tính

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.

Mã thẻ SV


. . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . .

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.
  • Mã thẻ SV


. . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . .

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)

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. để xem hướng dẫn chi tiết về cách sử dụng của từng thuộc tính)

Mã thẻ SV

Giới tính

Quê quán

Lớp

12A10010151

Nam

Cần Thơ

12A1

12A10010007

Nữ

Vĩnh Long

12A10010184

STTHọ tênNgày sinhNguyễn Hoàng Anh 23/11/1992
1 Nguyễn Thị Thùy Anh 12/12/1994 Nguyễn Thị Thùy Anh 12/12/1994
2 Hoàng Hiếu Dương 07/07/1993 Hoàng Hiếu Dương 07/07/1993
3 Hoàng Tiến Đạt 16/01/1994 Hoàng Hiếu Dương 12/12/1994
4 Hoàng Tiến Đạt 16/01/1994 Nguyễn Thị Thùy Anh 12/12/1994
5 Hoàng Hiếu Dương 07/07/1993 Nguyễn Thị Thùy Anh 12/12/1994


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

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.

STTHọ tênNgày sinhGiới tínhQuê 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ữ Vĩnh Long
4 Vương Thị Lê Na 06/10/1991 Nam Cần Thơ
5 Kiều Thị Thu Hằng 04/09/1991 Nam Cần Thơ


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

Kiều Thị Thu Hằng

04/09/1991

Nữ Vĩnh Long Ngày sinhGiới tínhQuê 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ữ Vĩnh Long
4 Vương Thị Lê Na 06/10/1991 Nam Cần Thơ
5 Kiều Thị Thu Hằng 04/09/1991 Nam Cần Thơ


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

Kiều Thị Thu Hằng

04/09/1991

Nữ

Nữ Vĩnh Long Ngày sinhGiới tínhQuê 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ữ Vĩnh Long
4 Vương Thị Lê Na 06/10/1991 Nam Cần Thơ
5 Kiều Thị Thu Hằng 04/09/1991 Nam Cần Thơ

Kiều Thị Thu Hằng overflow-x với giá trị là auto cho phần tử chứa cái bảng.

Nữ Vĩnh Long Ngày sinhGiới tínhQuê 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ữ Vĩnh Long
4 Vương Thị Lê Na 06/10/1991 Nam Cần Thơ
5 Kiều Thị Thu Hằng 04/09/1991 Nam Cần Thơ


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

Kiều Thị Thu Hằng

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

Nữ

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

Vĩnh Long

Vương Thị Lê Na

06/10/1991

Sóc Trăng

  • Dương Kim Thương
  • 16/11/1990

Trà Vinh

Mai Đức Hiếu
18/06/1989

Hậu Giang

Xem ví dụ

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

STT

Họ tên

7.4) Bảng responsivecaption-side được dùng để thiết lập lại vị trí của tiêu đề.

Nữ

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

Vĩnh Long

Vương Thị Lê Na

06/10/1991

Mai Đức Hiếu
18/06/1989

Hậu Giang

18/06/1989

Hậu Giang

Xem ví dụ

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

STT

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

Nữ

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

Vĩnh Long

Vương Thị Lê Na

06/10/1991

Mai Đức Hiếu
18/06/1989

Hậu Giang

18/06/1989

Hậu Giang

Xem ví dụ

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

STT

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

Nữ

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

Vĩnh Long

Vương Thị Lê Na

06/10/1991

Mai Đức Hiếu
18/06/1989

Hậu Giang

Xem ví dụ

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

STT

Họ tên

7.4) Bảng responsivevertical-align được dùng để canh lề cho văn bản nằm ở bên trong ô (theo chiều dọc)

Nữ

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

Vĩnh Long

Vương Thị Lê Na

06/10/1991

Mai Đức Hiếu
18/06/1989

Hậu Giang

18/06/1989

Hậu Giang