Hướng dẫn code table html đẹp

Posted on by mtoplistChuyên mục:Top List

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

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

Nội dung chính

Show

  • 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
  • 2) Cách gộp các đường viền lân cận lại với nhau
  • 3) Chỉnh màu nền cho bảng hoặc các ô bên trong bảng
  • 4) Thiết lập vùng đệm bên trong ô
  • 5) Chỉnh kích thước cho bảng hoặc các ô bên trong bảng
  • 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
  • 7.2) Hàng đổi màu khi bị dí con chuột vào
  • 7.3) Bảng có màu xen kẻ
  • 7.4) Bảng responsive

– 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 sinhGiới tínhQuê quánLớp1
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>

Họ tênGiới tínhQuê quánTrầ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ử).

Họ tênGiới tínhQuê quánTrầ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>

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

Xem ví dụ

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>

Xem ví dụ

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>

Xem ví dụ

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

Xem ví dụ

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

caption-side

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

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.

text-align

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

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)

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

STTHọ tênNgày sinhGiới tínhQuê quán1
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

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

Xem ví dụ

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

STTHọ tênNgày sinhGiới tínhQuê quán1
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

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

Xem ví dụ

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

STTHọ tênNgày sinhGiới tínhQuê quán1
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

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

Xem ví dụ

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)

STTHọ tênNgày sinhGiới tínhQuê quán1
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.

STTHọ tênNgày sinhGiới tínhQuê quán1
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

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

Xem ví dụ

– 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ị:

length2 length2

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

– Trong đó:

  • length2 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ả length2 & 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.

mtoplist