Tạo kiểu và colgroup html

Công nghệ Lập trình HTML

27/09
Thạch
HTML
0
766

Các hướng dẫn xây dựng Web được tổ chức tốt và dễ hiểu với rất nhiều ví dụ về cách sử dụng HTML, CSS, JavaScript, SQL, Python, PHP, Bootstrap, Java, XML và hơn thế nữa.

Tạo kiểu bảng HTML

Sử dụng CSS để làm cho bảng của bạn trông đẹp hơn.

Bảng HTML

Để tạo kiểu cho mọi phần tử hàng khác của bảng, hãy sử dụng :nth-child(even) bộ chọn như sau:

Thí dụ

tr:nth-child(even) {
  background-color: #D6EEEE;
}

Lưu ý: Nếu bạn sử dụng (odd)thay thế (even), kiểu dáng sẽ xảy ra trên hàng 1,3,5, v.v. thay vì 2,4,6, v.v.

Bảng HTML - Sọc ngựa vằn dọc

Để thực hiện các đường sọc dọc ngựa vằn, phong cách mỗi khác cột , thay vì mỗi khác hàng .

1	2	3	4
5	6	7	số 8
9	10	11	12
13	14	15	16
17	18	19	20

Đặt :nth-child(even)cho các phần tử dữ liệu bảng như sau:

Thí dụ

td:nth-child(even), th:nth-child(even) {
  background-color: #D6EEEE;
}

Lưu ý: Đặt :nth-child()bộ chọn trên cả hai thvà td các phần tử nếu bạn muốn có kiểu trên cả tiêu đề và ô bảng thông thường.

Kết hợp các sọc ngựa vằn dọc và ngang

Bạn có thể kết hợp kiểu từ hai ví dụ trên và bạn sẽ có các sọc trên mọi hàng khác và mọi cột khác.
Nếu bạn sử dụng màu trong suốt, bạn sẽ nhận được hiệu ứng chồng chéo.

Sử dụng một rgba()màu để chỉ định độ trong suốt của màu:

Thí dụ

tr:nth-child(even) {
  background-color: rgba(150, 212, 212, 0.4);
}

th:nth-child(even),td:nth-child(even) {
  background-color: rgba(150, 212, 212, 0.4);
}

Bộ chia ngang

Tên đầu tiên	Họ	Tiết kiệm
Peter	Griffin	$ 100
Lois	Griffin	$ 150
Joe	Swanson	$ 300

Nếu bạn chỉ định đường viền ở cuối mỗi hàng trong bảng, bạn sẽ có một bảng với các đường chia ngang.
Thêm thuộc border-bottomtính vào tất cả các trphần tử để có được các dải phân cách ngang:

Thí dụ

tr {
  border-bottom: 1px solid #ddd;
}

Bảng có thể lưu được

Sử dụng :hoverbộ chọn trên trđể đánh dấu các hàng trong bảng khi di chuột qua:

Tên đầu tiên	Họ	Tiết kiệm
Peter	Griffin	$ 100
Lois	Griffin	$ 150
Joe	Swanson	$ 300

Nhóm bảng HTML

Phần <colgroup>tử được sử dụng để tạo kiểu cho các cột cụ thể của bảng.

Nhóm bảng HTML

Nếu bạn muốn tạo kiểu cho hai cột đầu tiên của bảng, hãy sử dụng các phần tử <colgroup> và <col>.

THỨ HAI	TUE	THỨ TƯ	THU	FRI	ĐÃ NGỒI	MẶT TRỜI
1	2	3	4	5	6	7
số 8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28

Phần <colgroup>tử nên được sử dụng như một vùng chứa cho các thông số kỹ thuật của cột.
Mỗi nhóm được chỉ định bằng một <col>phần tử.
Các spanthuộc tính xác định có bao nhiêu cột mà được phong cách.
Các stylethuộc tính xác định phong cách cho các cột.

Lưu ý: Có rất ít lựa chọn các thuộc tính CSS hợp pháp cho các nhóm .

Thí dụ

<table>
  <colgroup>
    <col span="2" style="background-color: #D6EEEE">
  </colgroup>
  <tr>
    <th>MON</th>
    <th>TUE</th>
    <th>WED</th>
    <th>THU</th>
...

Lưu ý: Các <colgroup>thẻ phải là một đứa trẻ của một <table>phần tử và sẽ được đặt trước bất kỳ yếu tố bảng khác, như <thead>, <tr>, <td> vv, nhưng sau khi <caption>phần tử, nếu có.

Chỉ có một lựa chọn rất hạn chế các thuộc tính CSS được phép sử dụng trong nhóm cột:
widthtài sản tài sản tài
visibilitysản
backgroundtài
bordersản
Tất cả các thuộc tính CSS khác sẽ không ảnh hưởng đến bảng của bạn.

Nhiều yếu tố Col

Nếu bạn muốn tạo kiểu cho nhiều cột hơn với các kiểu khác nhau, hãy sử dụng nhiều <col>phần tử hơn bên trong <colgroup>:

Thí dụ

<table>
  <colgroup>
    <col span="2" style="background-color: #D6EEEE">
    <col span="3" style="background-color: pink">
  </colgroup>
  <tr>
    <th>MON</th>
    <th>TUE</th>
    <th>WED</th>
    <th>THU</th>
...

Nhóm trống

Nếu bạn muốn tạo kiểu cho các cột ở giữa bảng, hãy chèn <col>phần tử "trống" (không có kiểu) cho các cột trước:

Thí dụ

<table>
  <colgroup>
    <col span="3">
    <col span="2" style="background-color: pink">
  </colgroup>
  <tr>
    <th>MON</th>
    <th>TUE</th>
    <th>WED</th>
    <th>THU</th>
...

Ẩn các cột

Bạn có thể ẩn các cột bằng thuộc visibility: collapsetính:

Thí dụ

<table>
  <colgroup>
    <col span="2">
    <col span="3" style="visibility: collapse">
  </colgroup>
  <tr>
    <th>MON</th>
    <th>TUE</th>
    <th>WED</th>
    <th>THU</th>
...