Phần tử
6 HTML xác định một hàng ô trong bảng. Các ô của hàng sau đó có thể được thiết lập bằng cách sử dụng hỗn hợp các phần tử table {
border: 1px solid black;
}
th,
td {
border: 1px solid black;
}
7 [tế bào dữ liệu] và table {
border: 1px solid black;
}
th,
td {
border: 1px solid black;
}
8 [ô tiêu đề].table {
border: 1px solid black;
}
th,
td {
border: 1px solid black;
}
6 HTML element defines a row of cells in a table. The row's cells can then be established using a mix of table {
border: 1px solid black;
}
th,
td {
border: 1px solid black;
}
7 [data cell] and table {
border: 1px solid black;
}
th,
td {
border: 1px solid black;
}
8 [header cell] elements.table {
border: 1px solid black;
}
th,
td {
border: 1px solid black;
}
Thử nó
Để cung cấp quyền kiểm soát bổ sung về cách các tế bào phù hợp với [hoặc trải dài trên] các cột, cả
table {
border: 1px solid black;
}
th,
td {
border: 1px solid black;
}
8 và table {
border: 1px solid black;
}
th,
td {
border: 1px solid black;
}
7 đều hỗ trợ thuộc tính
Name
ID
Membership Dates
Balance
Joined
Canceled
Margaret Nguyen
427311
June 3, 2010
n/a
0.00
Edvard Galinski
533175
January 13, 2011
April 8, 2017
37.00
Hoshi Nakamura
601942
July 23, 2012
n/a
15.00
1, cho phép bạn chỉ định bao nhiêu cột của tế bào, với mặc định là 1. tương tự, bạn có thể sử dụng
Name
ID
Membership Dates
Balance
Joined
Canceled
Margaret Nguyen
427311
June 3, 2010
n/a
0.00
Edvard Galinski
533175
January 13, 2011
April 8, 2017
37.00
Hoshi Nakamura
601942
July 23, 2012
n/a
15.00
2 thuộc tính trên các ô để cho biết chúng nên trải dài hơn một hàng bảng.Điều này có thể mất một chút thực hành để có được ngay khi xây dựng bàn của bạn. Chúng tôi có một số ví dụ dưới đây, nhưng để biết thêm các ví dụ và hướng dẫn chuyên sâu, hãy xem chuỗi bảng HTML trong khu vực phát triển web tìm hiểu của chúng tôi, nơi bạn sẽ học cách sử dụng các yếu tố bảng và các thuộc tính của chúng để có được bố cục đúng và Định dạng cho dữ liệu bảng của bạn.
Thuộc tính
Yếu tố này bao gồm các thuộc tính toàn cầu. Ngoài ra còn có một số thuộc tính không dùng nữa, mà bạn nên tránh nhưng có thể cần biết khi đọc mã cũ hơn.
Thuộc tính không dùng nữa
Các thuộc tính sau đây vẫn có thể được thực hiện trong các trình duyệt nhưng không còn là một phần của đặc tả HTML và có thể bị thiếu hoặc không hoạt động như mong đợi. Họ nên tránh.
Name
ID
Membership Dates
Balance
Joined
Canceled
Margaret Nguyen
427311
June 3, 2010
n/a
0.00
Edvard Galinski
533175
January 13, 2011
April 8, 2017
37.00
Hoshi Nakamura
601942
July 23, 2012
n/a
15.00
3Deprecated DeprecatedMột chuỗi chỉ định cách thức bối cảnh của ô phải được căn chỉnh theo chiều ngang trong các ô trong hàng; Đây là tốc ký cho việc sử dụng
Name
ID
Membership Dates
Balance
Joined
Canceled
Margaret Nguyen
427311
June 3, 2010
n/a
0.00
Edvard Galinski
533175
January 13, 2011
April 8, 2017
37.00
Hoshi Nakamura
601942
July 23, 2012
n/a
15.00
3 trên mỗi ô trong hàng riêng lẻ. Các giá trị có thể là:
Name
ID
Membership Dates
Balance
Joined
Canceled
Margaret Nguyen
427311
June 3, 2010
n/a
0.00
Edvard Galinski
533175
January 13, 2011
April 8, 2017
37.00
Hoshi Nakamura
601942
July 23, 2012
n/a
15.00
5Căn chỉnh nội dung của mỗi ô ở cạnh trái của nó.
Name
ID
Membership Dates
Balance
Joined
Canceled
Margaret Nguyen
427311
June 3, 2010
n/a
0.00
Edvard Galinski
533175
January 13, 2011
April 8, 2017
37.00
Hoshi Nakamura
601942
July 23, 2012
n/a
15.00
6Giữa nội dung của mỗi ô giữa các cạnh trái và phải của chúng.
Name
ID
Membership Dates
Balance
Joined
Canceled
Margaret Nguyen
427311
June 3, 2010
n/a
0.00
Edvard Galinski
533175
January 13, 2011
April 8, 2017
37.00
Hoshi Nakamura
601942
July 23, 2012
n/a
15.00
7Căn chỉnh nội dung của mỗi ô ở cạnh phải của nó.
Name
ID
Membership Dates
Balance
Joined
Canceled
Margaret Nguyen
427311
June 3, 2010
n/a
0.00
Edvard Galinski
533175
January 13, 2011
April 8, 2017
37.00
Hoshi Nakamura
601942
July 23, 2012
n/a
15.00
8Mở rộng không gian trắng trong văn bản của mỗi ô để văn bản lấp đầy toàn bộ chiều rộng của mỗi ô [biện minh đầy đủ].
Name
ID
Membership Dates
Balance
Joined
Canceled
Margaret Nguyen
427311
June 3, 2010
n/a
0.00
Edvard Galinski
533175
January 13, 2011
April 8, 2017
37.00
Hoshi Nakamura
601942
July 23, 2012
n/a
15.00
9Căn chỉnh từng ô theo hàng trên một ký tự cụ thể [sao cho mỗi hàng trong cột được cấu hình theo cách này sẽ căn chỉnh theo chiều ngang của các ô trên ký tự đó]. Điều này sử dụng
Name
ID
Membership Dates
Balance
Joined
Canceled
Margaret Nguyen
427311
June 3, 2010
n/a
0.00
Edvard Galinski
533175
January 13, 2011
April 8, 2017
37.00
Hoshi Nakamura
601942
July 23, 2012
n/a
15.00
9 và table {
border: 1px solid black;
}
th,
td {
border: 1px solid black;
}
1 để thiết lập ký tự căn chỉnh [thường là "." Hoặc "", khi căn chỉnh dữ liệu số] và số lượng ký tự nên tuân theo ký tự căn chỉnh. Loại căn chỉnh này không bao giờ được hỗ trợ rộng rãi.Nếu không có giá trị nào được đặt rõ ràng cho
Name
ID
Membership Dates
Balance
Joined
Canceled
Margaret Nguyen
427311
June 3, 2010
n/a
0.00
Edvard Galinski
533175
January 13, 2011
April 8, 2017
37.00
Hoshi Nakamura
601942
July 23, 2012
n/a
15.00
3, giá trị của nút cha được kế thừa.Lưu ý: Thay vì sử dụng thuộc tính
3 lỗi thời, thay vào đó, bạn nên sử dụng thuộc tính CSS ____34 để thiết lập căn chỉnh
Name
ID
Membership Dates
Balance
Joined
Canceled
Margaret Nguyen
427311
June 3, 2010
n/a
0.00
Edvard Galinski
533175
January 13, 2011
April 8, 2017
37.00
Hoshi Nakamura
601942
July 23, 2012
n/a
15.00
5,
Name
ID
Membership Dates
Balance
Joined
Canceled
Margaret Nguyen
427311
June 3, 2010
n/a
0.00
Edvard Galinski
533175
January 13, 2011
April 8, 2017
37.00
Hoshi Nakamura
601942
July 23, 2012
n/a
15.00
6,
Name
ID
Membership Dates
Balance
Joined
Canceled
Margaret Nguyen
427311
June 3, 2010
n/a
0.00
Edvard Galinski
533175
January 13, 2011
April 8, 2017
37.00
Hoshi Nakamura
601942
July 23, 2012
n/a
15.00
7 hoặc
Name
ID
Membership Dates
Balance
Joined
Canceled
Margaret Nguyen
427311
June 3, 2010
n/a
0.00
Edvard Galinski
533175
January 13, 2011
April 8, 2017
37.00
Hoshi Nakamura
601942
July 23, 2012
n/a
15.00
8 cho các ô của hàng. Để áp dụng căn chỉnh dựa trên ký tự, đặt thuộc tính CSS
Name
ID
Membership Dates
Balance
Joined
Canceled
Margaret Nguyen
427311
June 3, 2010
n/a
0.00
Edvard Galinski
533175
January 13, 2011
April 8, 2017
37.00
Hoshi Nakamura
601942
July 23, 2012
n/a
15.00
4 cho ký tự căn chỉnh [chẳng hạn như table {
border: 1px solid black;
}
th,
td {
border: 1px solid black;
}
0 hoặc
Name
ID
Membership Dates
Balance
Joined
Canceled
Margaret Nguyen
427311
June 3, 2010
n/a
0.00
Edvard Galinski
533175
January 13, 2011
April 8, 2017
37.00
Hoshi Nakamura
601942
July 23, 2012
n/a
15.00
1]. Instead of using the obsolete
Name
ID
Membership Dates
Balance
Joined
Canceled
Margaret Nguyen
427311
June 3, 2010
n/a
0.00
Edvard Galinski
533175
January 13, 2011
April 8, 2017
37.00
Hoshi Nakamura
601942
July 23, 2012
n/a
15.00
Name
ID
Membership Dates
Balance
Joined
Canceled
Margaret Nguyen
427311
June 3, 2010
n/a
0.00
Edvard Galinski
533175
January 13, 2011
April 8, 2017
37.00
Hoshi Nakamura
601942
July 23, 2012
n/a
15.00
3 attribute, you should instead use the CSS table {
border: 1px solid black;
}
th,
td {
border: 1px solid black;
}
4 property to establish
Name
ID
Membership Dates
Balance
Joined
Canceled
Margaret Nguyen
427311
June 3, 2010
n/a
0.00
Edvard Galinski
533175
January 13, 2011
April 8, 2017
37.00
Hoshi Nakamura
601942
July 23, 2012
n/a
15.00
5,
Name
ID
Membership Dates
Balance
Joined
Canceled
Margaret Nguyen
427311
June 3, 2010
n/a
0.00
Edvard Galinski
533175
January 13, 2011
April 8, 2017
37.00
Hoshi Nakamura
601942
July 23, 2012
n/a
15.00
6,
Name
ID
Membership Dates
Balance
Joined
Canceled
Margaret Nguyen
427311
June 3, 2010
n/a
0.00
Edvard Galinski
533175
January 13, 2011
April 8, 2017
37.00
Hoshi Nakamura
601942
July 23, 2012
n/a
15.00
7, or
Name
ID
Membership Dates
Balance
Joined
Canceled
Margaret Nguyen
427311
June 3, 2010
n/a
0.00
Edvard Galinski
533175
January 13, 2011
April 8, 2017
37.00
Hoshi Nakamura
601942
July 23, 2012
n/a
15.00
8 alignment for the row's
cells. To apply character-based alignment, set the CSS table {
border: 1px solid black;
}
th,
td {
border: 1px solid black;
}
4 property to the alignment character [such as
Name
ID
Membership Dates
Balance
Joined
Canceled
Margaret Nguyen
427311
June 3, 2010
n/a
0.00
Edvard Galinski
533175
January 13, 2011
April 8, 2017
37.00
Hoshi Nakamura
601942
July 23, 2012
n/a
15.00
0 or
Name
ID
Membership Dates
Balance
Joined
Canceled
Margaret Nguyen
427311
June 3, 2010
n/a
0.00
Edvard Galinski
533175
January 13, 2011
April 8, 2017
37.00
Hoshi Nakamura
601942
July 23, 2012
n/a
15.00
1].
Name
ID
Membership Dates
Balance
Joined
Canceled
Margaret Nguyen
427311
June 3, 2010
n/a
0.00
Edvard Galinski
533175
January 13, 2011
April 8, 2017
37.00
Hoshi Nakamura
601942
July 23, 2012
n/a
15.00
2Deprecated DeprecatedMột chuỗi chỉ định một màu để áp dụng cho nền của mỗi ô của hàng. Đây có thể là giá trị thập lục phân
Name
ID
Membership Dates
Balance
Joined
Canceled
Margaret Nguyen
427311
June 3, 2010
n/a
0.00
Edvard Galinski
533175
January 13, 2011
April 8, 2017
37.00
Hoshi Nakamura
601942
July 23, 2012
n/a
15.00
3 hoặc
Name
ID
Membership Dates
Balance
Joined
Canceled
Margaret Nguyen
427311
June 3, 2010
n/a
0.00
Edvard Galinski
533175
January 13, 2011
April 8, 2017
37.00
Hoshi Nakamura
601942
July 23, 2012
n/a
15.00
4 hoặc từ khóa màu. Bỏ qua thuộc tính hoặc đặt nó thành
Name
ID
Membership Dates
Balance
Joined
Canceled
Margaret Nguyen
427311
June 3, 2010
n/a
0.00
Edvard Galinski
533175
January 13, 2011
April 8, 2017
37.00
Hoshi Nakamura
601942
July 23, 2012
n/a
15.00
5 trong JavaScript khiến các ô của hàng kế thừa màu nền của phần tử cha mẹ của hàng.
Lưu ý: Phần tử
6 nên được tạo kiểu bằng CSS. Để tạo hiệu ứng tương tự như thuộc tính table {
border: 1px solid black;
}
th,
td {
border: 1px solid black;
}
2, hãy sử dụng thuộc tính CSS
Name
ID
Membership Dates
Balance
Joined
Canceled
Margaret Nguyen
427311
June 3, 2010
n/a
0.00
Edvard Galinski
533175
January 13, 2011
April 8, 2017
37.00
Hoshi Nakamura
601942
July 23, 2012
n/a
15.00
8. The
Name
ID
Membership Dates
Balance
Joined
Canceled
Margaret Nguyen
427311
June 3, 2010
n/a
0.00
Edvard Galinski
533175
January 13, 2011
April 8, 2017
37.00
Hoshi Nakamura
601942
July 23, 2012
n/a
15.00
table {
border: 1px solid black;
}
th,
td {
border: 1px solid black;
}
6 element should be styled using CSS. To give a similar effect as the
Name
ID
Membership Dates
Balance
Joined
Canceled
Margaret Nguyen
427311
June 3, 2010
n/a
0.00
Edvard Galinski
533175
January 13, 2011
April 8, 2017
37.00
Hoshi Nakamura
601942
July 23, 2012
n/a
15.00
2 attribute, use the CSS property
Name
ID
Membership Dates
Balance
Joined
Canceled
Margaret Nguyen
427311
June 3, 2010
n/a
0.00
Edvard Galinski
533175
January 13, 2011
April 8, 2017
37.00
Hoshi Nakamura
601942
July 23, 2012
n/a
15.00
8.
Name
ID
Membership Dates
Balance
Joined
Canceled
Margaret Nguyen
427311
June 3, 2010
n/a
0.00
Edvard Galinski
533175
January 13, 2011
April 8, 2017
37.00
Hoshi Nakamura
601942
July 23, 2012
n/a
15.00
9Deprecated DeprecatedMột chuỗi đặt ký tự để căn chỉnh các ô trong mỗi cột của hàng trên [mỗi hàng của mỗi hàng sử dụng cùng một ký tự được căn chỉnh với các cột khác bằng cùng một ký tự. Khi cố gắng sắp xếp các số hoặc giá trị tiền tệ. Nếu
Name
ID
Membership Dates
Balance
Joined
Canceled
Margaret Nguyen
427311
June 3, 2010
n/a
0.00
Edvard Galinski
533175
January 13, 2011
April 8, 2017
37.00
Hoshi Nakamura
601942
July 23, 2012
n/a
15.00
3 không được đặt thành
Name
ID
Membership Dates
Balance
Joined
Canceled
Margaret Nguyen
427311
June 3, 2010
n/a
0.00
Edvard Galinski
533175
January 13, 2011
April 8, 2017
37.00
Hoshi Nakamura
601942
July 23, 2012
n/a
15.00
9, thuộc tính này sẽ bị bỏ qua.Lưu ý: Thuộc tính này không chỉ lỗi thời mà còn hiếm khi được thực hiện. Để đạt được hiệu ứng tương tự như thuộc tính
9, đặt thuộc tính CSS
Name
ID
Membership Dates
Balance
Joined
Canceled
Margaret Nguyen
427311
June 3, 2010
n/a
0.00
Edvard Galinski
533175
January 13, 2011
April 8, 2017
37.00
Hoshi Nakamura
601942
July 23, 2012
n/a
15.00
4 thành cùng một chuỗi bạn sẽ chỉ định cho thuộc tính table {
border: 1px solid black;
}
th,
td {
border: 1px solid black;
}
9, chẳng hạn như
Name
ID
Membership Dates
Balance
Joined
Canceled
Margaret Nguyen
427311
June 3, 2010
n/a
0.00
Edvard Galinski
533175
January 13, 2011
April 8, 2017
37.00
Hoshi Nakamura
601942
July 23, 2012
n/a
15.00
7. This attribute is not only obsolete, but was rarely implemented anyway. To achieve the same effect as the table {
border: 1px solid black;
}
th,
td {
border: 1px solid black;
}
Name
ID
Membership Dates
Balance
Joined
Canceled
Margaret Nguyen
427311
June 3, 2010
n/a
0.00
Edvard Galinski
533175
January 13, 2011
April 8, 2017
37.00
Hoshi Nakamura
601942
July 23, 2012
n/a
15.00
9
attribute, set the CSS table {
border: 1px solid black;
}
th,
td {
border: 1px solid black;
}
4 property to the same string you would specify for the
Name
ID
Membership Dates
Balance
Joined
Canceled
Margaret Nguyen
427311
June 3, 2010
n/a
0.00
Edvard Galinski
533175
January 13, 2011
April 8, 2017
37.00
Hoshi Nakamura
601942
July 23, 2012
n/a
15.00
9 property, such as table {
border: 1px solid black;
}
th,
td {
border: 1px solid black;
}
7.table {
border: 1px solid black;
}
th,
td {
border: 1px solid black;
}
1Deprecated DeprecatedMột chuỗi chỉ ra số lượng ký tự ở đầu đuôi của dữ liệu của cột phải được hiển thị sau khi ký tự căn chỉnh được chỉ định bởi thuộc tính
Name
ID
Membership Dates
Balance
Joined
Canceled
Margaret Nguyen
427311
June 3, 2010
n/a
0.00
Edvard Galinski
533175
January 13, 2011
April 8, 2017
37.00
Hoshi Nakamura
601942
July 23, 2012
n/a
15.00
9. Ví dụ: khi hiển thị các giá trị tiền cho các loại tiền tệ sử dụng một phần trăm của một đơn vị [chẳng hạn như đồng đô la, được chia thành 100 xu], bạn thường chỉ định giá trị là 2, do đó song song với
Name
ID
Membership Dates
Balance
Joined
Canceled
Margaret Nguyen
427311
June 3, 2010
n/a
0.00
Edvard Galinski
533175
January 13, 2011
April 8, 2017
37.00
Hoshi Nakamura
601942
July 23, 2012
n/a
15.00
9 được đặt thành
Name
ID
Membership Dates
Balance
Joined
Canceled
Margaret Nguyen
427311
June 3, 2010
n/a
0.00
Edvard Galinski
533175
January 13, 2011
April 8, 2017
37.00
Hoshi Nakamura
601942
July 23, 2012
n/a
15.00
0, Các giá trị trong một cột sẽ được căn chỉnh rõ ràng trên các điểm thập phân, với số lượng xu được hiển thị đúng ở bên phải của điểm thập phân.Lưu ý: Thuộc tính này đã lỗi thời và dù sao cũng không bao giờ được hỗ trợ rộng rãi. This attribute is obsolete, and was never widely supported anyway.
Name
ID
Membership Dates
Balance
Joined
Canceled
Margaret Nguyen
427311
June 3, 2010
n/a
0.00
Edvard Galinski
533175
January 13, 2011
April 8, 2017
37.00
Hoshi Nakamura
601942
July 23, 2012
n/a
15.00
2Deprecated DeprecatedMột chuỗi chỉ định sự liên kết dọc của văn bản trong mỗi ô trong hàng. Các giá trị có thể cho thuộc tính này là:
Name
ID
Membership Dates
Balance
Joined
Canceled
Margaret Nguyen
427311
June 3, 2010
n/a
0.00
Edvard Galinski
533175
January 13, 2011
April 8, 2017
37.00
Hoshi Nakamura
601942
July 23, 2012
n/a
15.00
3Căn chỉnh văn bản nội dung của mỗi ô càng gần càng tốt với đáy ô, xử lý sự liên kết của các phông chữ và kích thước phông chữ khác nhau bằng cách căn chỉnh các ký tự dọc theo đường cơ sở của phông chữ được sử dụng trong hàng. Nếu tất cả các ký tự trong hàng có cùng kích thước, hiệu ứng này giống như
Name
ID
Membership Dates
Balance
Joined
Canceled
Margaret Nguyen
427311
June 3, 2010
n/a
0.00
Edvard Galinski
533175
January 13, 2011
April 8, 2017
37.00
Hoshi Nakamura
601942
July 23, 2012
n/a
15.00
4.
Name
ID
Membership Dates
Balance
Joined
Canceled
Margaret Nguyen
427311
June 3, 2010
n/a
0.00
Edvard Galinski
533175
January 13, 2011
April 8, 2017
37.00
Hoshi Nakamura
601942
July 23, 2012
n/a
15.00
4,Vẽ văn bản trong mỗi ô của hàng càng gần với cạnh dưới của các ô đó.
Name
ID
Membership Dates
Balance
Joined
Canceled
Margaret Nguyen
427311
June 3, 2010
n/a
0.00
Edvard Galinski
533175
January 13, 2011
April 8, 2017
37.00
Hoshi Nakamura
601942
July 23, 2012
n/a
15.00
6Văn bản của mỗi ô được tập trung theo chiều dọc.
Name
ID
Membership Dates
Balance
Joined
Canceled
Margaret Nguyen
427311
June 3, 2010
n/a
0.00
Edvard Galinski
533175
January 13, 2011
April 8, 2017
37.00
Hoshi Nakamura
601942
July 23, 2012
n/a
15.00
7Văn bản của mỗi ô được vẽ gần nhất có thể đến cạnh trên của ô chứa.
Lưu ý: Không sử dụng thuộc tính
2 lỗi thời. Thay vào đó, hãy thêm thuộc tính CSS
Name
ID
Membership Dates
Balance
Joined
Canceled
Margaret Nguyen
427311
June 3, 2010
n/a
0.00
Edvard Galinski
533175
January 13, 2011
April 8, 2017
37.00
Hoshi Nakamura
601942
July 23, 2012
n/a
15.00
9 vào hàng. Don't use the obsolete
Name
ID
Membership Dates
Balance
Joined
Canceled
Margaret Nguyen
427311
June 3, 2010
n/a
0.00
Edvard Galinski
533175
January 13, 2011
April 8, 2017
37.00
Hoshi Nakamura
601942
July 23, 2012
n/a
15.00
Name
ID
Membership Dates
Balance
Joined
Canceled
Margaret Nguyen
427311
June 3, 2010
n/a
0.00
Edvard Galinski
533175
January 13, 2011
April 8, 2017
37.00
Hoshi Nakamura
601942
July 23, 2012
n/a
15.00
2 attribute. Instead, add the CSS
Name
ID
Membership Dates
Balance
Joined
Canceled
Margaret Nguyen
427311
June 3, 2010
n/a
0.00
Edvard Galinski
533175
January 13, 2011
April 8, 2017
37.00
Hoshi Nakamura
601942
July 23, 2012
n/a
15.00
9
property to the row.Ví dụ
Xem
table {
border: 1px solid black;
font: 16px "Open Sans", Helvetica, Arial, sans-serif;
}
thead > tr {
background-color: rgb[228, 240, 245];
}
th,
td {
border: 1px solid black;
padding: 4px 6px;
}
0 để biết ví dụ về table {
border: 1px solid black;
}
th,
td {
border: 1px solid black;
}
6.Ví dụ cơ bản
Ví dụ đơn giản này cho thấy một bảng liệt kê tên của mọi người cùng với nhiều thông tin khác nhau về tư cách thành viên trong một câu lạc bộ hoặc dịch vụ.
HTML
HTML này thể hiện cấu trúc cơ bản nhất của bảng. Không có nhóm, không có ô nào trải rộng trên nhiều hàng hoặc cột, không có chú thích và chỉ có kiểu dáng cơ bản nhất để tạo ra các dòng xung quanh các thành phần của bảng cho một cái gì đó giống như sự rõ ràng.
Chỉ có bốn hàng [bao gồm một hàng tiêu đề], mỗi hàng có bốn cột [bao gồm một cột tiêu đề]. Ngay cả các phần tử phần bảng không được sử dụng; Thay vào đó, trình duyệt được phép xác định điều này tự động. Chúng tôi sẽ thêm
table {
border: 1px solid black;
font: 16px "Open Sans", Helvetica, Arial, sans-serif;
}
thead > tr {
background-color: rgb[228, 240, 245];
}
th,
td {
border: 1px solid black;
padding: 4px 6px;
}
2, table {
border: 1px solid black;
font: 16px "Open Sans", Helvetica, Arial, sans-serif;
}
thead > tr {
background-color: rgb[228, 240, 245];
}
th,
td {
border: 1px solid black;
padding: 4px 6px;
}
3 và table {
border: 1px solid black;
font: 16px "Open Sans", Helvetica, Arial, sans-serif;
}
thead > tr {
background-color: rgb[228, 240, 245];
}
th,
td {
border: 1px solid black;
padding: 4px 6px;
}
4 trong ví dụ tiếp theo.
Name
ID
Member Since
Balance
Margaret Nguyen
427311
June 3, 2010
0.00
Edvard Galinski
533175
January 13, 2011
37.00
Hoshi Nakamura
601942
July 23, 2012
15.00
CSS
CSS đơn giản này chỉ thêm một đường viền màu đen rắn xung quanh bảng và xung quanh mỗi ô của nó, bao gồm cả các ô được chỉ định bằng cả
table {
border: 1px solid black;
}
th,
td {
border: 1px solid black;
}
8 và table {
border: 1px solid black;
}
th,
td {
border: 1px solid black;
}
7. Bằng cách đó, cả tiêu đề và ô dữ liệu đều dễ dàng phân định.table {
border: 1px solid black;
}
th,
td {
border: 1px solid black;
}
Kết quả
Hàng và cột kéo dài
Bây giờ, chúng ta hãy giới thiệu một cột khác hiển thị ngày thành viên của người dùng kết thúc, cùng với một siêu tiêu đề phía trên ngày "đã tham gia" và "bị hủy" được gọi là "ngày thành viên". Điều này liên quan đến việc thêm cả nhịp và cột vào bảng, để các ô tiêu đề có thể kết thúc ở đúng nơi.
Kết quả
Hàng và cột kéo dài
Bây giờ, chúng ta hãy giới thiệu một cột khác hiển thị ngày thành viên của người dùng kết thúc, cùng với một siêu tiêu đề phía trên ngày "đã tham gia" và "bị hủy" được gọi là "ngày thành viên". Điều này liên quan đến việc thêm cả nhịp và cột vào bảng, để các ô tiêu đề có thể kết thúc ở đúng nơi.
- Chúng ta thực sự nhìn vào đầu ra đầu tiên lần này:
- Lưu ý cách khu vực tiêu đề ở đây thực sự là hai hàng, một hàng có "Tên", "ID", "Ngày thành viên" và các tiêu đề "Cân bằng" và hàng kia có "tham gia" và "bị hủy", là tiêu đề phụ " Ngày". Điều này được thực hiện bởi:
- Có hàng "tên", "ID" và các ô tiêu đề "Cân bằng" kéo dài hai hàng bằng cách sử dụng thuộc tính
2, làm cho chúng có hai hàng cao hai hàng.Name ID Membership Dates Balance Joined Canceled Margaret Nguyen 427311 June 3, 2010 n/a 0.00 Edvard Galinski 533175 January 13, 2011 April 8, 2017 37.00 Hoshi Nakamura 601942 July 23, 2012 n/a 15.00
HTML
HTML này thể hiện cấu trúc cơ bản nhất của bảng. Không có nhóm, không có ô nào trải rộng trên nhiều hàng hoặc cột, không có chú thích và chỉ có kiểu dáng cơ bản nhất để tạo ra các dòng xung quanh các thành phần của bảng cho một cái gì đó giống như sự rõ ràng.
Name
ID
Membership Dates
Balance
Joined
Canceled
Margaret Nguyen
427311
June 3, 2010
n/a
0.00
Edvard Galinski
533175
January 13, 2011
April 8, 2017
37.00
Hoshi Nakamura
601942
July 23, 2012
n/a
15.00
Chỉ có bốn hàng [bao gồm một hàng tiêu đề], mỗi hàng có bốn cột [bao gồm một cột tiêu đề]. Ngay cả các phần tử phần bảng không được sử dụng; Thay vào đó, trình duyệt được phép xác định điều này tự động. Chúng tôi sẽ thêm
table {
border: 1px solid black;
font: 16px "Open Sans", Helvetica, Arial, sans-serif;
}
thead > tr {
background-color: rgb[228, 240, 245];
}
th,
td {
border: 1px solid black;
padding: 4px 6px;
}
2, table {
border: 1px solid black;
font: 16px "Open Sans", Helvetica, Arial, sans-serif;
}
thead > tr {
background-color: rgb[228, 240, 245];
}
th,
td {
border: 1px solid black;
padding: 4px 6px;
}
3 và table {
border: 1px solid black;
font: 16px "Open Sans", Helvetica, Arial, sans-serif;
}
thead > tr {
background-color: rgb[228, 240, 245];
}
th,
td {
border: 1px solid black;
padding: 4px 6px;
}
4 trong ví dụ tiếp theo.CSS
table {
border: 1px solid black;
}
th,
td {
border: 1px solid black;
}
CSS đơn giản này chỉ thêm một đường viền màu đen rắn xung quanh bảng và xung quanh mỗi ô của nó, bao gồm cả các ô được chỉ định bằng cả table {
border: 1px solid black;
}
th,
td {
border: 1px solid black;
}
8 và table {
border: 1px solid black;
}
th,
td {
border: 1px solid black;
}
7. Bằng cách đó, cả tiêu đề và ô dữ liệu đều dễ dàng phân định.
table {
border: 1px solid black;
}
th,
td {
border: 1px solid black;
}
table {
border: 1px solid black;
}
th,
td {
border: 1px solid black;
}
Kết quả
HTML
HTML này thể hiện cấu trúc cơ bản nhất của bảng. Không có nhóm, không có ô nào trải rộng trên nhiều hàng hoặc cột, không có chú thích và chỉ có kiểu dáng cơ bản nhất để tạo ra các dòng xung quanh các thành phần của bảng cho một cái gì đó giống như sự rõ ràng.
Name
ID
Membership Dates
Balance
Joined
Canceled
Margaret Nguyen
427311
June 3, 2010
n/a
0.00
Edvard Galinski
533175
January 13, 2011
April 8, 2017
37.00
Hoshi Nakamura
601942
July 23, 2012
n/a
15.00
Chỉ có bốn hàng [bao gồm một hàng tiêu đề], mỗi hàng có bốn cột [bao gồm một cột tiêu đề]. Ngay cả các phần tử phần bảng không được sử dụng; Thay vào đó, trình duyệt được phép xác định điều này tự động. Chúng tôi sẽ thêm
table {
border: 1px solid black;
font: 16px "Open Sans", Helvetica, Arial, sans-serif;
}
thead > tr {
background-color: rgb[228, 240, 245];
}
th,
td {
border: 1px solid black;
padding: 4px 6px;
}
2, table {
border: 1px solid black;
font: 16px "Open Sans", Helvetica, Arial, sans-serif;
}
thead > tr {
background-color: rgb[228, 240, 245];
}
th,
td {
border: 1px solid black;
padding: 4px 6px;
}
3 và table {
border: 1px solid black;
font: 16px "Open Sans", Helvetica, Arial, sans-serif;
}
thead > tr {
background-color: rgb[228, 240, 245];
}
th,
td {
border: 1px solid black;
padding: 4px 6px;
}
4 trong ví dụ tiếp theo.CSS
table {
border: 1px solid black;
}
th,
td {
border: 1px solid black;
}
Kết quả
Hàng và cột kéo dài
Bây giờ, chúng ta hãy giới thiệu một cột khác hiển thị ngày thành viên của người dùng kết thúc, cùng với một siêu tiêu đề phía trên ngày "đã tham gia" và "bị hủy" được gọi là "ngày thành viên". Điều này liên quan đến việc thêm cả nhịp và cột vào bảng, để các ô tiêu đề có thể kết thúc ở đúng nơi.
Chúng ta thực sự nhìn vào đầu ra đầu tiên lần này:
Lưu ý cách khu vực tiêu đề ở đây thực sự là hai hàng, một hàng có "Tên", "ID", "Ngày thành viên" và các tiêu đề "Cân bằng" và hàng kia có "tham gia" và "bị hủy", là tiêu đề phụ " Ngày". Điều này được thực hiện bởi:
Kết quả
Một lần nữa, chúng ta hãy xem kết quả trước.
Name
ID
Membership Dates
Balance
Joined
Canceled
Margaret Nguyen
427311
June 3, 2010
n/a
0.00
Edvard Galinski
533175
January 13, 2011
April 8, 2017
37.00
Hoshi Nakamura
601942
July 23, 2012
n/a
15.00
CSS
Lần này, HTML không thay đổi, vì vậy hãy đi sâu vào CSS.
table {
border: 1px solid black;
font: 16px "Open Sans", Helvetica, Arial, sans-serif;
}
thead > tr {
background-color: rgb[228, 240, 245];
}
th,
td {
border: 1px solid black;
padding: 4px 6px;
}
Mặc dù chúng tôi thêm thuộc tính
Name
ID
Membership Dates
Balance
Joined
Canceled
Margaret Nguyen
427311
June 3, 2010
n/a
0.00
Edvard Galinski
533175
January 13, 2011
April 8, 2017
37.00
Hoshi Nakamura
601942
July 23, 2012
n/a
15.00
5 vào phần tử table {
border: 1px solid black;
font: 16px "Open Sans", Helvetica, Arial, sans-serif;
}
thead > tr {
background-color: rgb[228, 240, 245];
}
th,
td {
border: 1px solid black;
padding: 4px 6px;
}
0 ở đây để đặt kiểu chữ hấp dẫn trực quan hơn [hoặc kiểu chữ Sans-serif ghê tởm, tùy thuộc vào ý kiến cá nhân của bạn], phần thú vị là kiểu thứ hai ở đây, nơi chúng tôi tạo kiểu table {
border: 1px solid black;
}
th,
td {
border: 1px solid black;
}
6 các yếu tố nằm Trong table {
border: 1px solid black;
font: 16px "Open Sans", Helvetica, Arial, sans-serif;
}
thead > tr {
background-color: rgb[228, 240, 245];
}
th,
td {
border: 1px solid black;
padding: 4px 6px;
}
2 để chúng có màu nền màu xanh nhạt. Đây là một cách để nhanh chóng áp dụng màu nền cho tất cả các ô trong khu vực tiêu đề cùng một lúc.Điều này không ảnh hưởng đến phong cách của các yếu tố
table {
border: 1px solid black;
}
th,
td {
border: 1px solid black;
}
8 trong cột đầu tiên, nơi chúng tôi coi các tên thành viên là một tiêu đề hàng.Phong cách nâng cao
Bây giờ chúng ta sẽ đi tất cả, với các kiểu trên các hàng trong các khu vực tiêu đề và cơ thể, bao gồm các màu hàng xen kẽ, các ô có màu sắc khác nhau tùy thuộc vào vị trí trong một hàng, v.v.
Kết quả
Đây là bảng cuối cùng sẽ trông như thế nào:
Không có thay đổi đối với HTML một lần nữa. Xem những gì chuẩn bị đúng của HTML của bạn có thể làm cho bạn?
Name
ID
Membership Dates
Balance
Joined
Canceled
Margaret Nguyen
427311
June 3, 2010
n/a
0.00
Edvard Galinski
533175
January 13, 2011
April 8, 2017
37.00
Hoshi Nakamura
601942
July 23, 2012
n/a
15.00
CSS
Lần này, HTML không thay đổi, vì vậy hãy đi sâu vào CSS.
Name
ID
Membership Dates
Balance
Joined
Canceled
Margaret Nguyen
427311
June 3, 2010
n/a
0.00
Edvard Galinski
533175
January 13, 2011
April 8, 2017
37.00
Hoshi Nakamura
601942
July 23, 2012
n/a
15.00
5 vào phần tử table {
border: 1px solid black;
font: 16px "Open Sans", Helvetica, Arial, sans-serif;
}
thead > tr {
background-color: rgb[228, 240, 245];
}
th,
td {
border: 1px solid black;
padding: 4px 6px;
}
0 ở đây để đặt kiểu chữ hấp dẫn trực quan hơn [hoặc kiểu chữ Sans-serif ghê tởm, tùy thuộc vào ý kiến cá nhân của bạn], phần thú vị là kiểu thứ hai ở đây, nơi chúng tôi tạo kiểu table {
border: 1px solid black;
}
th,
td {
border: 1px solid black;
}
6 các yếu tố nằm Trong table {
border: 1px solid black;
font: 16px "Open Sans", Helvetica, Arial, sans-serif;
}
thead > tr {
background-color: rgb[228, 240, 245];
}
th,
td {
border: 1px solid black;
padding: 4px 6px;
}
2 để chúng có màu nền màu xanh nhạt. Đây là một cách để nhanh chóng áp dụng màu nền cho tất cả các ô trong khu vực tiêu đề cùng một lúc.Điều này không ảnh hưởng đến phong cách của các yếu tố
table {
border: 1px solid black;
}
th,
td {
border: 1px solid black;
}
8 trong cột đầu tiên, nơi chúng tôi coi các tên thành viên là một tiêu đề hàng.Phong cách nâng cao
table {
border: 1px solid black;
}
th,
td {
border: 1px solid black;
}
0Bây giờ chúng ta sẽ đi tất cả, với các kiểu trên các hàng trong các khu vực tiêu đề và cơ thể, bao gồm các màu hàng xen kẽ, các ô có màu sắc khác nhau tùy thuộc vào vị trí trong một hàng, v.v.
Đây là bảng cuối cùng sẽ trông như thế nào:
table {
border: 1px solid black;
}
th,
td {
border: 1px solid black;
}
1Không có thay đổi đối với HTML một lần nữa. Xem những gì chuẩn bị đúng của HTML của bạn có thể làm cho bạn?
CSS có liên quan nhiều hơn lần này. Nó không phức tạp, nhưng có rất nhiều điều đang diễn ra. Hãy phá vỡ nó.Các kiểu bàn và cơ sở
table {
border: 1px solid black;
}
th,
td {
border: 1px solid black;
}
2table {
border: 1px solid black;
font: 16px "Open Sans", Helvetica, Arial, sans-serif;
border-spacing: 0;
border-collapse: collapse;
}
Ở đây, chúng tôi đã thêm các thuộc tính table {
border: 1px solid black;
font: 16px "Open Sans", Helvetica, Arial, sans-serif;
border-spacing: 0;
border-collapse: collapse;
}
0 và table {
border: 1px solid black;
font: 16px "Open Sans", Helvetica, Arial, sans-serif;
border-spacing: 0;
border-collapse: collapse;
}
1 để loại bỏ khoảng cách giữa các ô và các đường viền sụp đổ chạm vào nhau là một đường viền thay vì cuộn lên với đường viền đôi.Và đây là các kiểu mặc định cho tất cả các ô bảng. Bây giờ hãy tùy chỉnh!
table {
border: 1px solid black;
}
th,
td {
border: 1px solid black;
}
3Chúng ta sẽ xem xét tiêu đề hàng đầu trong hai mảnh. Đầu tiên, kiểu dáng tổng thể của tiêu đề:
table {
border: 1px solid black;
}
th,
td {
border: 1px solid black;
}
4Điều này đặt màu nền của tất cả các phần tử
table {
border: 1px solid black;
}
th,
td {
border: 1px solid black;
}
6 trong tiêu đề của bảng [như được chỉ định bằng cách sử dụng table {
border: 1px solid black;
font: 16px "Open Sans", Helvetica, Arial, sans-serif;
}
thead > tr {
background-color: rgb[228, 240, 245];
}
th,
td {
border: 1px solid black;
padding: 4px 6px;
}
2]. Sau đó, chúng tôi đặt đường viền dưới cùng của tiêu đề trên cùng thành một đường rộng hai pixel. Tuy nhiên, lưu ý rằng chúng tôi đang sử dụng bộ chọn table {
border: 1px solid black;
font: 16px "Open Sans", Helvetica, Arial, sans-serif;
border-spacing: 0;
border-collapse: collapse;
}
4 để áp dụng table {
border: 1px solid black;
font: 16px "Open Sans", Helvetica, Arial, sans-serif;
border-spacing: 0;
border-collapse: collapse;
}
5 cho hàng thứ hai trong tiêu đề. Tại sao? Bởi vì tiêu đề được làm từ hai hàng được kéo dài bởi một số tế bào. Điều đó có nghĩa là thực sự có hai hàng ở đó; Áp dụng phong cách cho hàng đầu tiên sẽ không cho chúng ta kết quả dự kiến.Các tiêu đề "đã tham gia" và "bị hủy"Hãy tạo kiểu cho hai ô tiêu đề này với màu xanh lá cây và màu đỏ để thể hiện "tốt" của một thành viên mới và "người lập dị" của một thành viên bị hủy bỏ.
table {
border: 1px solid black;
}
th,
td {
border: 1px solid black;
}
5Ở đây, chúng tôi đào vào hàng cuối cùng của khối tiêu đề của bàn và đưa ra ô tiêu đề đầu tiên trong đó [tiêu đề "tham gia"] một màu xanh lá cây và ô tiêu đề thứ hai trong đó [tiêu đề "bị hủy"] màu đỏ.
Màu sắc mọi thân xe khác khác nhau
Vì chúng tôi cũng muốn cột đầu tiên nổi bật, chúng tôi cũng sẽ thêm một số kiểu dáng tùy chỉnh ở đây. |
Biện minh cho số dư |
Điều này chỉ đặt thuộc tính CSS 4 cho 7 cuối cùng trong mỗi hàng cơ thể thành 9. |
Danh mục nội dung |
Nội dung cho phép |
Thiếu Thẻ |
Cha mẹ được phép |
table {
border: 1px solid black;
font: 16px "Open Sans", Helvetica, Arial, sans-serif;
}
thead > tr {
background-color: rgb[228, 240, 245];
}
th,
td {
border: 1px solid black;
padding: 4px 6px;
}
0 [chỉ khi bảng không có phần tử table {
border: 1px solid black;
font: 16px "Open Sans", Helvetica, Arial, sans-serif;
}
thead > tr {
background-color: rgb[228, 240, 245];
}
th,
td {
border: 1px solid black;
padding: 4px 6px;
}
3 trẻ em và thậm chí chỉ sau bất kỳ phần tử table {
border: 1px solid black;
}
th,
td {
border: 1px solid black;
}
11, table {
border: 1px solid black;
}
th,
td {
border: 1px solid black;
}
12 và table {
border: 1px solid black;
font: 16px "Open Sans", Helvetica, Arial, sans-serif;
}
thead > tr {
background-color: rgb[228, 240, 245];
}
th,
td {
border: 1px solid black;
padding: 4px 6px;
}
2]; Nếu không, cha mẹ phải là table {
border: 1px solid black;
font: 16px "Open Sans", Helvetica, Arial, sans-serif;
}
thead > tr {
background-color: rgb[228, 240, 245];
}
th,
td {
border: 1px solid black;
padding: 4px 6px;
}
2, table {
border: 1px solid black;
font: 16px "Open Sans", Helvetica, Arial, sans-serif;
}
thead > tr {
background-color: rgb[228, 240, 245];
}
th,
td {
border: 1px solid black;
padding: 4px 6px;
}
3 hoặc table {
border: 1px solid black;
font: 16px "Open Sans", Helvetica, Arial, sans-serif;
}
thead > tr {
background-color: rgb[228, 240, 245];
}
th,
td {
border: 1px solid black;
padding: 4px 6px;
}
4
table {
border: 1px solid black;
font: 16px "Open Sans", Helvetica, Arial, sans-serif;
}
thead > tr {
background-color: rgb[228, 240, 245];
}
th,
td {
border: 1px solid black;
padding: 4px 6px;
}
table {
border: 1px solid black;
font: 16px "Open Sans", Helvetica, Arial, sans-serif;
}
thead > tr {
background-color: rgb[228, 240, 245];
}
th,
td {
border: 1px solid black;
padding: 4px 6px;
}
table {
border: 1px solid black;
}
th,
td {
border: 1px solid black;
}
table {
border: 1px solid black;
}
th,
td {
border: 1px solid black;
}
table {
border: 1px solid black;
font: 16px "Open Sans", Helvetica, Arial, sans-serif;
}
thead > tr {
background-color: rgb[228, 240, 245];
}
th,
td {
border: 1px solid black;
padding: 4px 6px;
}
table {
border: 1px solid black;
font: 16px "Open Sans", Helvetica, Arial, sans-serif;
}
thead > tr {
background-color: rgb[228, 240, 245];
}
th,
td {
border: 1px solid black;
padding: 4px 6px;
}
table {
border: 1px solid black;
font: 16px "Open Sans", Helvetica, Arial, sans-serif;
}
thead > tr {
background-color: rgb[228, 240, 245];
}
th,
td {
border: 1px solid black;
padding: 4px 6px;
}
table {
border: 1px solid black;
font: 16px "Open Sans", Helvetica, Arial, sans-serif;
}
thead > tr {
background-color: rgb[228, 240, 245];
}
th,
td {
border: 1px solid black;
padding: 4px 6px;
}
17# the-tr-element |
Vai trò ARIA cho phép
Không tí nào
Giao diện DOM
18table { border: 1px solid black; } th, td { border: 1px solid black; }
- Thông số kỹ thuật
- Sự chỉ rõ
- Tiêu chuẩn HTML # phần tử