Bảng chiều cao cố định css

STTHọ tênNgày sinh1Nguyễn Hoàng Anh23/11/19922Nguyễn Thị Thùy Anh12/12/19943Hoàng Hiếu Dương07/07/19934Hoàng Tiến Đạt16/01/19945Lê Quang Đạt12/10/1994

- Trong bộ tài liệu học HTML thì tôi đã 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 số thuộc tính (đường viền, không gian ô, ô đệm,. . . . ) 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

- Khẽ 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ư những chiếc bảng bên dưới) thì ở bài viết này, tôi sẽ hướng dẫn các bạn cách sử dụng CSS vận tải để định dạng cho bảng

STTMã thẻ SVHọ tênNgày sinhGiới tínhQuê quánLớp112A10010151Nguyễn Hoàng Anh23/11/1992NamCần Thơ12A1212A10010007Nguyễn Thị Thùy Anh12/12/1994NữVĩnh Long12A1312A10010184Hoàng Hiếu Dương07/07/1993NamSóc Trăng12A1412A10010154Hoàng Tiến Đạt16/01/1994NamHậu Giang12A1512A10010160Lê Quang Đạt10/12/1994NamBạc Liêu12A1

1) Cách tạo đường viền cho bảng và 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 đường viền cho phần tử

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

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

Họ tênGiới tínhQuê quánTrần Anh ĐứcNamCần ThơKiều Thị Thu HằngNữVĩnh LongDương Kim ThươngNamTrà 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 các ranh giới đườ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ử ,

,thì mặc định mỗi phần tử đó sẽ có một đườ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ị thu gọn cho phần tử để các đường viền lân cận bên trong bảng lại với nhau (hoặc

Họ tênGiới tínhQuê quánTrần Anh ĐứcNamCần ThơKiều Thị Thu HằngNữVĩnh LongDương Kim ThươngNamTrà Vinh

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

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

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

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

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

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

||

---

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

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 đệm cho ô đó

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

---

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

Xem ví dụ

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

- Để chỉnh sửa chiều rộng ( chiều cao) cho bảng thì ta thiết lập thuộc tính chiều rộng (chiều cao) cho phần tử

- Để chỉnh sửa chiều rộng ( chiều cao) cho ô thì ta thiết lập thuộc tính chiều rộng (chiều cao) cho phần tử

để 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 phụ đề bên được sử dụng để thiết lập lại vị trí của tiêu đề

- Cú pháp

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

1

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

||

---

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

Xem ví dụ

- Lưu ý

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

---

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

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)

Xem ví dụ

6) Các thuộc tính được sử 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 công 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)

khoảng cách biên giới

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

phụ đề

- Thuộc tính này được sử dụng để thiết lập vị trí tiêu đề của bảng

ô trống

- Thuộc tính này được sử dụng để chỉnh sửa hiển thị hoặc ẩn một ô có nội dung trống

căn chỉnh văn bản

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

canh dọc

- Thuộc tính này được sử 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ố định dạng định dạng cho bảng

7. 1) Bảng chỉ chứa các đường ngang

STTHọ tênNgày sinhGiới tínhQuê quán1Trần Anh Đức03/08/1993NamCần Thơ2Kiều Thị Thu Hằng04/09/1991NữVĩnh Long3Vương Thị Lê Na06/10/1991Nữ Sóc Trăng4Dương Kim Thương16/11/1990NamTrà Vinh5Mai Đức Hiếu18/06/1989NamHậu Giang