Tôi không tin rằng điều này có thể vượt trội với EditableTable. Và vì nhiều tiêu đề cũng không phải là HTML hợp lệ, tôi nghĩ cách tốt nhất của bạn là tắt hàng đầu tiên và sử dụng CSS để làm cho nó trông giống như một tiêu đề.
Bạn có thể sử dụng. lớp giả đầu tiên chỉ ảnh hưởng đến hàng đầu tiên của bảng cho phần bố cục, sau đó bên trong tiện ích EditableTable, bạn có thể làm cho nó thay vì có đầu vào, bạn sẽ hiển thị Biểu thức với các giá trị của mình
Trong bài viết thứ hai của mô-đun này, chúng ta xem xét một số tính năng nâng cao hơn của bảng HTML — chẳng hạn như chú thích/tóm tắt và nhóm các hàng của bạn thành các phần đầu bảng, nội dung và chân trang — cũng như xem xét khả năng truy cập bảng dành cho người dùng khiếm thị
điều kiện tiên quyết. Khái niệm cơ bản về HTML [xem Giới thiệu về HTML]. Khách quan. Để tìm hiểu về các tính năng bảng HTML nâng cao hơn và khả năng truy cập của bảngAdding a caption to your table with
Bạn có thể đặt chú thích cho bảng của mình bằng cách đặt chú thích đó bên trong phần tử
tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
0 và lồng chú thích đó bên trong phần tử tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
1. Bạn nên đặt nó ngay bên dưới thẻ mở đầu tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
1
Dinosaurs in the Jurassic period
…
Như bạn có thể suy ra từ ví dụ ngắn gọn ở trên, chú thích có nghĩa là chứa mô tả về nội dung của bảng. Điều này hữu ích cho tất cả những người đọc muốn biết nhanh liệu bảng có hữu ích với họ khi họ quét trang hay không, nhưng đặc biệt đối với người dùng khiếm thị. Thay vì yêu cầu trình đọc màn hình đọc to nội dung của nhiều ô chỉ để tìm hiểu nội dung của bảng, người dùng có thể dựa vào chú thích và sau đó quyết định có đọc bảng chi tiết hơn hay không
Chú thích được đặt ngay bên dưới thẻ
tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
1Ghi chú. Thuộc tính
tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
2 cũng có thể được sử dụng trên phần tử tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
1 để cung cấp mô tả — phần này cũng được trình đọc màn hình đọc ra. Tuy nhiên, chúng tôi khuyên bạn nên sử dụng phần tử tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
0 vì tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
2 không được dùng nữa và người dùng sáng mắt không thể đọc được [phần tử này không xuất hiện trên trang]học tích cực. Thêm chú thích
Hãy thử làm điều này, xem lại một ví dụ mà chúng ta đã gặp lần đầu trong bài viết trước
- Mở thời khóa biểu ở trường của giáo viên ngôn ngữ của bạn từ cuối Thông tin cơ bản về bảng HTML hoặc tạo một bản sao cục bộ của thời khóa biểu cố định của chúng tôi. tệp html
- Thêm chú thích phù hợp cho bảng
- Lưu mã của bạn và mở nó trong trình duyệt để xem nó trông như thế nào
Ghi chú. Bạn có thể tìm thấy phiên bản của chúng tôi trên GitHub — xem thời gian biểu-chú thích. html [cũng xem trực tiếp]
Adding structure with , , and Khi các bảng của bạn có cấu trúc phức tạp hơn một chút, sẽ rất hữu ích nếu bạn cung cấp thêm định nghĩa về cấu trúc cho chúng. Một cách rõ ràng để làm điều này là sử dụng
tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
6, tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
7 và tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
8, cho phép bạn đánh dấu phần đầu trang, chân trang và nội dung cho bảngNhững phần tử này không làm cho bảng dễ truy cập hơn đối với người dùng trình đọc màn hình và không dẫn đến bất kỳ cải thiện hình ảnh nào của riêng chúng. Tuy nhiên, chúng rất hữu ích cho việc tạo kiểu dáng và bố cục — đóng vai trò là móc hữu ích để thêm CSS vào bảng của bạn. Để cung cấp cho bạn một số ví dụ thú vị, trong trường hợp bảng dài, bạn có thể làm cho đầu trang và chân trang của bảng lặp lại trên mọi trang được in và bạn có thể làm cho phần thân của bảng hiển thị trên một trang và có sẵn nội dung bằng cách cuộn lên và xuống
Để sử dụng chúng
- Phần tử
tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
6 phải bọc một phần của bảng là tiêu đề — đây thường là hàng đầu tiên chứa tiêu đề cột, nhưng điều này không nhất thiết phải luôn luôn như vậy. Nếu bạn đang sử dụng phần tử DOCTYPE html>
My spending record
html {
font-family: sans-serif;
}
table {
border-collapse: collapse;
border: 4px solid rgb[200, 200, 200];
letter-spacing: 1px;
font-size: 0.8rem;
}
td,
th {
border: 2px solid rgb[190, 190, 190];
padding: 10px 20px;
}
th {
background-color: rgb[235, 235, 235];
}
td {
text-align: center;
}
tr:nth-child[even] td {
background-color: rgb[250, 250, 250];
}
tr:nth-child[odd] td {
background-color: rgb[245, 245, 245];
}
caption {
padding: 10px;
}
tbody {
font-size: 90%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
How I chose to spend my money
Purchase
Location
Date
Evaluation
Cost [€]
SUM
118
Haircut
Hairdresser
12/09
Great idea
30
Lasagna
Restaurant
12/09
Regrets
18
Shoes
Shoeshop
13/09
Big regrets
65
Toothpaste
Supermarket
13/09
Good
5
0/DOCTYPE html>
My spending record
html {
font-family: sans-serif;
}
table {
border-collapse: collapse;
border: 4px solid rgb[200, 200, 200];
letter-spacing: 1px;
font-size: 0.8rem;
}
td,
th {
border: 2px solid rgb[190, 190, 190];
padding: 10px 20px;
}
th {
background-color: rgb[235, 235, 235];
}
td {
text-align: center;
}
tr:nth-child[even] td {
background-color: rgb[250, 250, 250];
}
tr:nth-child[odd] td {
background-color: rgb[245, 245, 245];
}
caption {
padding: 10px;
}
tbody {
font-size: 90%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
How I chose to spend my money
Purchase
Location
Date
Evaluation
Cost [€]
SUM
118
Haircut
Hairdresser
12/09
Great idea
30
Lasagna
Restaurant
12/09
Regrets
18
Shoes
Shoeshop
13/09
Big regrets
65
Toothpaste
Supermarket
13/09
Good
5
1, tiêu đề bảng sẽ nằm ngay bên dưới phần tử đó. - Phần tử
tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
7 cần bao bọc một phần của bảng là chân trang - ví dụ: đây có thể là hàng cuối cùng với các mục trong các hàng trước được cộng lại. Bạn có thể bao gồm chân trang của bảng ngay ở cuối bảng như bạn muốn hoặc ngay bên dưới tiêu đề bảng [trình duyệt sẽ vẫn hiển thị nó ở cuối bảng] - Phần tử
tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
8 cần bọc các phần khác của nội dung bảng không có trong đầu trang hoặc chân trang của bảng. Nó sẽ xuất hiện bên dưới tiêu đề bảng hoặc đôi khi là chân trang, tùy thuộc vào cách bạn quyết định cấu trúc nó
Ghi chú.
tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
8 luôn được bao gồm trong mọi bảng, mặc nhiên nếu bạn không chỉ định nó trong mã của mình. Để kiểm tra điều này, hãy mở một trong những ví dụ trước của bạn không bao gồm tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
8 và xem mã HTML trong công cụ dành cho nhà phát triển trình duyệt của bạn — bạn sẽ thấy rằng trình duyệt đã thêm thẻ này cho bạn. Bạn có thể thắc mắc tại sao bạn phải bận tâm bao gồm cả nó — bạn nên làm thế, bởi vì nó cho phép bạn kiểm soát nhiều hơn đối với cấu trúc và kiểu dáng bảng của mìnhhọc tích cực. Thêm cấu trúc bảng
Hãy đưa những yếu tố mới này vào hoạt động
- Trước hết, tạo một bản sao hồ sơ chi tiêu tại địa phương. html và bảng tối thiểu. css trong một thư mục mới
- Hãy thử mở nó trong một trình duyệt — Bạn sẽ thấy nó trông ổn, nhưng nó có thể được cải thiện. Hàng "SUM" chứa tổng số tiền đã chi dường như nằm sai vị trí và có một số chi tiết bị thiếu trong mã
- Đặt hàng tiêu đề rõ ràng bên trong phần tử
tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
6, hàng "SUM" bên trong phần tử tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
7 và phần còn lại của nội dung bên trong phần tử tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
8 - Lưu và làm mới, bạn sẽ thấy rằng việc thêm phần tử
tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
7 đã khiến hàng "SUM" đi xuống cuối bảng - Tiếp theo, thêm thuộc tính
tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
70 để làm cho ô "SUM" trải dài trên bốn cột đầu tiên, để số thực xuất hiện ở cuối cột "Chi phí" - Hãy thêm một số kiểu dáng bổ sung đơn giản vào bảng, để cho bạn biết mức độ hữu ích của các phần tử này đối với việc áp dụng CSS. Bên trong phần đầu của tài liệu HTML của bạn, bạn sẽ thấy một phần tử
tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
71 trống. Bên trong phần tử này, thêm các dòng mã CSS sautbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
- Lưu và làm mới, và xem kết quả. Nếu các phần tử
tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
8 và tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
7 không có sẵn, bạn sẽ phải viết các bộ chọn/quy tắc phức tạp hơn nhiều để áp dụng cùng kiểu
Ghi chú. Chúng tôi không mong đợi bạn hiểu đầy đủ về CSS ngay bây giờ. Bạn sẽ tìm hiểu thêm về điều này khi xem qua các mô-đun CSS của chúng tôi [Giới thiệu về CSS là một nơi tốt để bắt đầu; chúng tôi cũng có một bài viết cụ thể về bảng tạo kiểu]
Bảng đã hoàn thành của bạn sẽ trông giống như sau
DOCTYPE html>
My spending record
html {
font-family: sans-serif;
}
table {
border-collapse: collapse;
border: 4px solid rgb[200, 200, 200];
letter-spacing: 1px;
font-size: 0.8rem;
}
td,
th {
border: 2px solid rgb[190, 190, 190];
padding: 10px 20px;
}
th {
background-color: rgb[235, 235, 235];
}
td {
text-align: center;
}
tr:nth-child[even] td {
background-color: rgb[250, 250, 250];
}
tr:nth-child[odd] td {
background-color: rgb[245, 245, 245];
}
caption {
padding: 10px;
}
tbody {
font-size: 90%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
How I chose to spend my money
Purchase
Location
Date
Evaluation
Cost [€]
SUM
118
Haircut
Hairdresser
12/09
Great idea
30
Lasagna
Restaurant
12/09
Regrets
18
Shoes
Shoeshop
13/09
Big regrets
65
Toothpaste
Supermarket
13/09
Good
5
Ghi chú. Bạn cũng có thể tìm thấy nó trên GitHub dưới dạng đã hoàn thành hồ sơ chi tiêu. html [cũng xem trực tiếp]
bàn làm tổ
Có thể lồng một bảng vào bên trong một bảng khác, miễn là bạn bao gồm cấu trúc hoàn chỉnh, bao gồm cả phần tử
tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
1. Điều này thường không thực sự được khuyến khích vì nó làm cho phần đánh dấu trở nên khó hiểu hơn và khó truy cập hơn đối với người dùng trình đọc màn hình và trong nhiều trường hợp, bạn cũng có thể chỉ cần chèn thêm các ô/hàng/cột vào bảng hiện có. Tuy nhiên, đôi khi cần thiết, chẳng hạn nếu bạn muốn nhập nội dung dễ dàng từ các nguồn khácĐánh dấu sau đây cho thấy một bảng lồng nhau đơn giản
tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
7
Đầu ra trông giống như thế này
tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
4Bàn dành cho người khiếm thị
Hãy tóm tắt ngắn gọn về cách chúng tôi sử dụng bảng dữ liệu. Một bảng có thể là một công cụ hữu ích, giúp chúng ta truy cập nhanh vào dữ liệu và cho phép chúng ta tra cứu các giá trị khác nhau. Ví dụ: chỉ cần nhìn lướt qua bảng bên dưới để biết có bao nhiêu chiếc nhẫn đã được bán ở Gent trong tháng 8 năm 2016. Để hiểu thông tin của bảng, chúng tôi tạo liên kết trực quan giữa dữ liệu trong bảng này với các tiêu đề cột và/hoặc hàng của nó
Mặt hàng đã bán Tháng 8 năm 2016Quần áoPhụ kiệnQuầnVáyVáyVòng tayNhẫnBỉAntwerp5622437223Gent4618506115Brussels5127386928Hà LanAmsterdam8934698538Utrecht8012433619Nhưng nếu bạn không thể tạo ra những liên tưởng trực quan đó thì sao? . Điều này không có vấn đề gì khi bạn đang đọc văn bản thuần túy nhưng việc diễn giải một bảng có thể là một thách thức khá lớn đối với người mù. Tuy nhiên, với cách đánh dấu phù hợp, chúng ta có thể thay thế các liên kết trực quan bằng các liên kết có lập trình
Ghi chú. Có khoảng 253 triệu người sống chung với bệnh Khiếm thị theo số liệu của WHO năm 2017
Phần này của bài viết cung cấp thêm các kỹ thuật để tạo các bảng dễ truy cập nhất có thể
Sử dụng tiêu đề cột và hàng
Trình đọc màn hình sẽ xác định tất cả các tiêu đề và sử dụng chúng để tạo liên kết có lập trình giữa các tiêu đề đó và các ô mà chúng liên quan. Sự kết hợp giữa tiêu đề cột và hàng sẽ xác định và diễn giải dữ liệu trong từng ô để người dùng trình đọc màn hình có thể diễn giải bảng tương tự như cách người dùng sáng mắt thực hiện
We already covered headers in our previous article — see Adding headers with elements.
thuộc tính phạm vi
Một chủ đề mới cho bài viết này là thuộc tính
tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
75, thuộc tính này có thể được thêm vào phần tử tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
76 để cho người đọc màn hình biết chính xác tiêu đề là tiêu đề cho những ô nào — ví dụ: đó là tiêu đề cho hàng hay cột. tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
7Và mỗi hàng có thể có một tiêu đề được xác định như thế này [nếu chúng tôi đã thêm tiêu đề hàng cũng như tiêu đề cột]
tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
8
trình đọc màn hình sẽ nhận ra đánh dấu có cấu trúc như thế này và cho phép người dùng của họ đọc to toàn bộ cột hoặc hàng cùng một lúc, chẳng hạn
tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
75 có thêm hai giá trị có thể — tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
78 và tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
79. Chúng được sử dụng cho các tiêu đề nằm trên đầu của nhiều cột hoặc hàng. Nếu bạn nhìn lại bảng "Các mặt hàng đã bán vào tháng 8 năm 2016" ở đầu phần này của bài viết, bạn sẽ thấy ô "Quần áo" nằm phía trên ô "Quần tây", "Váy" và "Đầm". Tất cả các ô này phải được đánh dấu là tiêu đề [tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
76], nhưng "Quần áo" là tiêu đề nằm trên cùng và xác định ba tiêu đề phụ khác. Do đó, "Quần áo" sẽ có thuộc tính là tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
41, trong khi những thứ khác sẽ có thuộc tính là tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
42Thuộc tính id và tiêu đề
Một cách khác để sử dụng thuộc tính
tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
75 là sử dụng thuộc tính tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
44 và tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
45 để tạo liên kết giữa tiêu đề và ô. Cách chúng được sử dụng như sau- Bạn thêm một
tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
44 duy nhất vào mỗi phần tử tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
76 - Bạn thêm một thuộc tính
tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
45 vào mỗi phần tử tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
49. Mỗi thuộc tính tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
45 phải chứa một danh sách các tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
44 của tất cả các phần tử tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
76 đóng vai trò là tiêu đề cho ô đó, được phân tách bằng dấu cách
Điều này cung cấp cho bảng HTML của bạn một định nghĩa rõ ràng về vị trí của từng ô trong bảng, được xác định bởi [các] tiêu đề cho mỗi cột và hàng mà nó là một phần của nó, giống như một bảng tính. Để nó hoạt động tốt, bảng thực sự cần cả tiêu đề cột và hàng
Quay trở lại ví dụ về chi phí chi tiêu của chúng tôi, hai đoạn trước có thể được viết lại như thế này
tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
5Ghi chú. Phương pháp này tạo ra các liên kết rất chính xác giữa các tiêu đề và các ô dữ liệu nhưng nó sử dụng nhiều đánh dấu hơn và không để lại bất kỳ lỗi nào. Cách tiếp cận
tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
75 thường là đủ cho hầu hết các bảnghọc tích cực. chơi với phạm vi và tiêu đề
- Đối với bài tập cuối cùng này, trước tiên chúng tôi muốn bạn tạo các bản sao cục bộ của các mặt hàng đã bán. html và bảng tối thiểu. css, trong một thư mục mới
- Bây giờ hãy thử thêm các thuộc tính
tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
75 phù hợp để làm cho bảng này phù hợp hơn - Cuối cùng, hãy thử tạo một bản sao khác của các tệp ban đầu và lần này làm cho bảng dễ truy cập hơn bằng cách sử dụng các thuộc tính
tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
44 và tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
45
Ghi chú. Bạn có thể kiểm tra công việc của mình dựa trên các ví dụ đã hoàn thành của chúng tôi — xem phạm vi các mặt hàng đã bán. html [xem trực tiếp phần này] và tiêu đề các mặt hàng đã bán. html [cũng xem trực tiếp này]
Bản tóm tắt
Có một vài điều khác mà bạn có thể tìm hiểu về bảng trong HTML, nhưng đây là tất cả những gì bạn cần biết bây giờ. Tiếp theo, bạn có thể tự kiểm tra với bảng đánh giá HTML của chúng tôi. Chúc vui vẻ
Nếu bạn đã học CSS và hoàn thành tốt bài đánh giá, bạn có thể tiếp tục và tìm hiểu về cách tạo kiểu bảng HTML — xem Bảng tạo kiểu
Một bảng HTML có thể có nhiều hàng tiêu đề không?
Bảng HTML có thể có tiêu đề cho từng cột hoặc hàng hoặc cho nhiều cột/hàng .
Một bảng có thể có nhiều tiêu đề không?
Các bảng có nhiều tiêu đề cũng có thể cần có chú thích để xác định bảng và tóm tắt để mô tả bố cục của bảng , xem Chú thích & Tóm tắt.
Thẻ HTML để tạo nhiều hàng trong một bảng phải là gì?
. Phần tử Table Row. Phần tử HTML
Thẻ nào thêm tiêu đề hàng mới vào bảng HTML?
Thẻ xác định ô tiêu đề trong bảng HTML. Một bảng HTML có hai loại ô. Các ô tiêu đề - chứa thông tin tiêu đề [được tạo bằng phần tử
Chủ Đề
tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
6 phải bọc một phần của bảng là tiêu đề — đây thường là hàng đầu tiên chứa tiêu đề cột, nhưng điều này không nhất thiết phải luôn luôn như vậy. Nếu bạn đang sử dụng phần tử DOCTYPE html>
My spending record
html {
font-family: sans-serif;
}
table {
border-collapse: collapse;
border: 4px solid rgb[200, 200, 200];
letter-spacing: 1px;
font-size: 0.8rem;
}
td,
th {
border: 2px solid rgb[190, 190, 190];
padding: 10px 20px;
}
th {
background-color: rgb[235, 235, 235];
}
td {
text-align: center;
}
tr:nth-child[even] td {
background-color: rgb[250, 250, 250];
}
tr:nth-child[odd] td {
background-color: rgb[245, 245, 245];
}
caption {
padding: 10px;
}
tbody {
font-size: 90%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
How I chose to spend my money
Purchase
Location
Date
Evaluation
Cost [€]
SUM
118
Haircut
Hairdresser
12/09
Great idea
30
Lasagna
Restaurant
12/09
Regrets
18
Shoes
Shoeshop
13/09
Big regrets
65
Toothpaste
Supermarket
13/09
Good
5
0/DOCTYPE html>
My spending record
html {
font-family: sans-serif;
}
table {
border-collapse: collapse;
border: 4px solid rgb[200, 200, 200];
letter-spacing: 1px;
font-size: 0.8rem;
}
td,
th {
border: 2px solid rgb[190, 190, 190];
padding: 10px 20px;
}
th {
background-color: rgb[235, 235, 235];
}
td {
text-align: center;
}
tr:nth-child[even] td {
background-color: rgb[250, 250, 250];
}
tr:nth-child[odd] td {
background-color: rgb[245, 245, 245];
}
caption {
padding: 10px;
}
tbody {
font-size: 90%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
How I chose to spend my money
Purchase
Location
Date
Evaluation
Cost [€]
SUM
118
Haircut
Hairdresser
12/09
Great idea
30
Lasagna
Restaurant
12/09
Regrets
18
Shoes
Shoeshop
13/09
Big regrets
65
Toothpaste
Supermarket
13/09
Good
5
1, tiêu đề bảng sẽ nằm ngay bên dưới phần tử đó.tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
7 cần bao bọc một phần của bảng là chân trang - ví dụ: đây có thể là hàng cuối cùng với các mục trong các hàng trước được cộng lại. Bạn có thể bao gồm chân trang của bảng ngay ở cuối bảng như bạn muốn hoặc ngay bên dưới tiêu đề bảng [trình duyệt sẽ vẫn hiển thị nó ở cuối bảng]tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
8 cần bọc các phần khác của nội dung bảng không có trong đầu trang hoặc chân trang của bảng. Nó sẽ xuất hiện bên dưới tiêu đề bảng hoặc đôi khi là chân trang, tùy thuộc vào cách bạn quyết định cấu trúc nótbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
học tích cực. Thêm cấu trúc bảng
Hãy đưa những yếu tố mới này vào hoạt động
- Trước hết, tạo một bản sao hồ sơ chi tiêu tại địa phương. html và bảng tối thiểu. css trong một thư mục mới
- Hãy thử mở nó trong một trình duyệt — Bạn sẽ thấy nó trông ổn, nhưng nó có thể được cải thiện. Hàng "SUM" chứa tổng số tiền đã chi dường như nằm sai vị trí và có một số chi tiết bị thiếu trong mã
- Đặt hàng tiêu đề rõ ràng bên trong phần tử
6, hàng "SUM" bên trong phần tửtbody { font-size: 95%; font-style: italic; } tfoot { font-weight: bold; }
7 và phần còn lại của nội dung bên trong phần tửtbody { font-size: 95%; font-style: italic; } tfoot { font-weight: bold; }
8tbody { font-size: 95%; font-style: italic; } tfoot { font-weight: bold; }
- Lưu và làm mới, bạn sẽ thấy rằng việc thêm phần tử
7 đã khiến hàng "SUM" đi xuống cuối bảngtbody { font-size: 95%; font-style: italic; } tfoot { font-weight: bold; }
- Tiếp theo, thêm thuộc tính
70 để làm cho ô "SUM" trải dài trên bốn cột đầu tiên, để số thực xuất hiện ở cuối cột "Chi phí"tbody { font-size: 95%; font-style: italic; } tfoot { font-weight: bold; }
- Hãy thêm một số kiểu dáng bổ sung đơn giản vào bảng, để cho bạn biết mức độ hữu ích của các phần tử này đối với việc áp dụng CSS. Bên trong phần đầu của tài liệu HTML của bạn, bạn sẽ thấy một phần tử
71 trống. Bên trong phần tử này, thêm các dòng mã CSS sautbody { font-size: 95%; font-style: italic; } tfoot { font-weight: bold; }
tbody { font-size: 95%; font-style: italic; } tfoot { font-weight: bold; }
- Lưu và làm mới, và xem kết quả. Nếu các phần tử
8 vàtbody { font-size: 95%; font-style: italic; } tfoot { font-weight: bold; }
7 không có sẵn, bạn sẽ phải viết các bộ chọn/quy tắc phức tạp hơn nhiều để áp dụng cùng kiểutbody { font-size: 95%; font-style: italic; } tfoot { font-weight: bold; }
Ghi chú. Chúng tôi không mong đợi bạn hiểu đầy đủ về CSS ngay bây giờ. Bạn sẽ tìm hiểu thêm về điều này khi xem qua các mô-đun CSS của chúng tôi [Giới thiệu về CSS là một nơi tốt để bắt đầu; chúng tôi cũng có một bài viết cụ thể về bảng tạo kiểu]
Bảng đã hoàn thành của bạn sẽ trông giống như sau
DOCTYPE html>
My spending record
html {
font-family: sans-serif;
}
table {
border-collapse: collapse;
border: 4px solid rgb[200, 200, 200];
letter-spacing: 1px;
font-size: 0.8rem;
}
td,
th {
border: 2px solid rgb[190, 190, 190];
padding: 10px 20px;
}
th {
background-color: rgb[235, 235, 235];
}
td {
text-align: center;
}
tr:nth-child[even] td {
background-color: rgb[250, 250, 250];
}
tr:nth-child[odd] td {
background-color: rgb[245, 245, 245];
}
caption {
padding: 10px;
}
tbody {
font-size: 90%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
How I chose to spend my money
Purchase
Location
Date
Evaluation
Cost [€]
SUM
118
Haircut
Hairdresser
12/09
Great idea
30
Lasagna
Restaurant
12/09
Regrets
18
Shoes
Shoeshop
13/09
Big regrets
65
Toothpaste
Supermarket
13/09
Good
5
Ghi chú. Bạn cũng có thể tìm thấy nó trên GitHub dưới dạng đã hoàn thành hồ sơ chi tiêu. html [cũng xem trực tiếp]
bàn làm tổ
Có thể lồng một bảng vào bên trong một bảng khác, miễn là bạn bao gồm cấu trúc hoàn chỉnh, bao gồm cả phần tử
tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
1. Điều này thường không thực sự được khuyến khích vì nó làm cho phần đánh dấu trở nên khó hiểu hơn và khó truy cập hơn đối với người dùng trình đọc màn hình và trong nhiều trường hợp, bạn cũng có thể chỉ cần chèn thêm các ô/hàng/cột vào bảng hiện có. Tuy nhiên, đôi khi cần thiết, chẳng hạn nếu bạn muốn nhập nội dung dễ dàng từ các nguồn khácĐánh dấu sau đây cho thấy một bảng lồng nhau đơn giản
tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
7Đầu ra trông giống như thế này
tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
4Bàn dành cho người khiếm thị
Hãy tóm tắt ngắn gọn về cách chúng tôi sử dụng bảng dữ liệu. Một bảng có thể là một công cụ hữu ích, giúp chúng ta truy cập nhanh vào dữ liệu và cho phép chúng ta tra cứu các giá trị khác nhau. Ví dụ: chỉ cần nhìn lướt qua bảng bên dưới để biết có bao nhiêu chiếc nhẫn đã được bán ở Gent trong tháng 8 năm 2016. Để hiểu thông tin của bảng, chúng tôi tạo liên kết trực quan giữa dữ liệu trong bảng này với các tiêu đề cột và/hoặc hàng của nó
Mặt hàng đã bán Tháng 8 năm 2016Quần áoPhụ kiệnQuầnVáyVáyVòng tayNhẫnBỉAntwerp5622437223Gent4618506115Brussels5127386928Hà LanAmsterdam8934698538Utrecht8012433619Nhưng nếu bạn không thể tạo ra những liên tưởng trực quan đó thì sao? . Điều này không có vấn đề gì khi bạn đang đọc văn bản thuần túy nhưng việc diễn giải một bảng có thể là một thách thức khá lớn đối với người mù. Tuy nhiên, với cách đánh dấu phù hợp, chúng ta có thể thay thế các liên kết trực quan bằng các liên kết có lập trình
Ghi chú. Có khoảng 253 triệu người sống chung với bệnh Khiếm thị theo số liệu của WHO năm 2017
Phần này của bài viết cung cấp thêm các kỹ thuật để tạo các bảng dễ truy cập nhất có thể
Sử dụng tiêu đề cột và hàng
Trình đọc màn hình sẽ xác định tất cả các tiêu đề và sử dụng chúng để tạo liên kết có lập trình giữa các tiêu đề đó và các ô mà chúng liên quan. Sự kết hợp giữa tiêu đề cột và hàng sẽ xác định và diễn giải dữ liệu trong từng ô để người dùng trình đọc màn hình có thể diễn giải bảng tương tự như cách người dùng sáng mắt thực hiện
We already covered headers in our previous article — see Adding headers with elements.
thuộc tính phạm vi
Một chủ đề mới cho bài viết này là thuộc tính
tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
75, thuộc tính này có thể được thêm vào phần tử tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
76 để cho người đọc màn hình biết chính xác tiêu đề là tiêu đề cho những ô nào — ví dụ: đó là tiêu đề cho hàng hay cột. tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
7Và mỗi hàng có thể có một tiêu đề được xác định như thế này [nếu chúng tôi đã thêm tiêu đề hàng cũng như tiêu đề cột]
tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
8trình đọc màn hình sẽ nhận ra đánh dấu có cấu trúc như thế này và cho phép người dùng của họ đọc to toàn bộ cột hoặc hàng cùng một lúc, chẳng hạn
tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
75 có thêm hai giá trị có thể — tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
78 và tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
79. Chúng được sử dụng cho các tiêu đề nằm trên đầu của nhiều cột hoặc hàng. Nếu bạn nhìn lại bảng "Các mặt hàng đã bán vào tháng 8 năm 2016" ở đầu phần này của bài viết, bạn sẽ thấy ô "Quần áo" nằm phía trên ô "Quần tây", "Váy" và "Đầm". Tất cả các ô này phải được đánh dấu là tiêu đề [tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
76], nhưng "Quần áo" là tiêu đề nằm trên cùng và xác định ba tiêu đề phụ khác. Do đó, "Quần áo" sẽ có thuộc tính là tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
41, trong khi những thứ khác sẽ có thuộc tính là tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
42Thuộc tính id và tiêu đề
Một cách khác để sử dụng thuộc tính
tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
75 là sử dụng thuộc tính tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
44 và tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
45 để tạo liên kết giữa tiêu đề và ô. Cách chúng được sử dụng như sau- Bạn thêm một
44 duy nhất vào mỗi phần tửtbody { font-size: 95%; font-style: italic; } tfoot { font-weight: bold; }
76tbody { font-size: 95%; font-style: italic; } tfoot { font-weight: bold; }
- Bạn thêm một thuộc tính
45 vào mỗi phần tửtbody { font-size: 95%; font-style: italic; } tfoot { font-weight: bold; }
49. Mỗi thuộc tínhtbody { font-size: 95%; font-style: italic; } tfoot { font-weight: bold; }
45 phải chứa một danh sách cáctbody { font-size: 95%; font-style: italic; } tfoot { font-weight: bold; }
44 của tất cả các phần tửtbody { font-size: 95%; font-style: italic; } tfoot { font-weight: bold; }
76 đóng vai trò là tiêu đề cho ô đó, được phân tách bằng dấu cáchtbody { font-size: 95%; font-style: italic; } tfoot { font-weight: bold; }
Điều này cung cấp cho bảng HTML của bạn một định nghĩa rõ ràng về vị trí của từng ô trong bảng, được xác định bởi [các] tiêu đề cho mỗi cột và hàng mà nó là một phần của nó, giống như một bảng tính. Để nó hoạt động tốt, bảng thực sự cần cả tiêu đề cột và hàng
Quay trở lại ví dụ về chi phí chi tiêu của chúng tôi, hai đoạn trước có thể được viết lại như thế này
tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
5Ghi chú. Phương pháp này tạo ra các liên kết rất chính xác giữa các tiêu đề và các ô dữ liệu nhưng nó sử dụng nhiều đánh dấu hơn và không để lại bất kỳ lỗi nào. Cách tiếp cận
tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
75 thường là đủ cho hầu hết các bảnghọc tích cực. chơi với phạm vi và tiêu đề
- Đối với bài tập cuối cùng này, trước tiên chúng tôi muốn bạn tạo các bản sao cục bộ của các mặt hàng đã bán. html và bảng tối thiểu. css, trong một thư mục mới
- Bây giờ hãy thử thêm các thuộc tính
75 phù hợp để làm cho bảng này phù hợp hơntbody { font-size: 95%; font-style: italic; } tfoot { font-weight: bold; }
- Cuối cùng, hãy thử tạo một bản sao khác của các tệp ban đầu và lần này làm cho bảng dễ truy cập hơn bằng cách sử dụng các thuộc tính
44 vàtbody { font-size: 95%; font-style: italic; } tfoot { font-weight: bold; }
45tbody { font-size: 95%; font-style: italic; } tfoot { font-weight: bold; }
Ghi chú. Bạn có thể kiểm tra công việc của mình dựa trên các ví dụ đã hoàn thành của chúng tôi — xem phạm vi các mặt hàng đã bán. html [xem trực tiếp phần này] và tiêu đề các mặt hàng đã bán. html [cũng xem trực tiếp này]
Bản tóm tắt
Có một vài điều khác mà bạn có thể tìm hiểu về bảng trong HTML, nhưng đây là tất cả những gì bạn cần biết bây giờ. Tiếp theo, bạn có thể tự kiểm tra với bảng đánh giá HTML của chúng tôi. Chúc vui vẻ
Nếu bạn đã học CSS và hoàn thành tốt bài đánh giá, bạn có thể tiếp tục và tìm hiểu về cách tạo kiểu bảng HTML — xem Bảng tạo kiểu