Tạo kiểu cho bảng HTML không phải là công việc hấp dẫn nhất trên thế giới, nhưng đôi khi tất cả chúng ta đều phải làm điều đó. Bài viết này cung cấp hướng dẫn để làm cho các bảng HTML trông đẹp mắt, với một số kỹ thuật tạo kiểu bảng cụ thể được làm nổi bật
điều kiện tiên quyết. Khái niệm cơ bản về HTML [nghiên cứu Giới thiệu về HTML], kiến thức về các bảng HTML và ý tưởng về cách thức hoạt động của CSS [nghiên cứu các bước đầu tiên về CSS. ]Khách quan. Để tìm hiểu cách tạo kiểu bảng HTML hiệu quảMột bảng HTML điển hình
Hãy bắt đầu bằng cách xem một bảng HTML điển hình. Chà, tôi nói điển hình — hầu hết các ví dụ về bảng HTML là về giày dép, thời tiết hoặc nhân viên; . Đánh dấu trông giống như vậy
A summary of the UK's most famous punk bands
Band
Year formed
No. of Albums
Most famous song
Buzzcocks
1976
9
Ever fallen in love [with someone you shouldn't've]
The Clash
1976
6
London Calling
The Stranglers
1974
17
No More Heroes
Total albums
77
Bảng được đánh dấu đẹp mắt, dễ tạo kiểu và có thể truy cập nhờ các tính năng như
/* spacing */
table {
table-layout: fixed;
width: 100%;
border-collapse: collapse;
border: 3px solid purple;
}
thead th:nth-child[1] {
width: 30%;
}
thead th:nth-child[2] {
width: 20%;
}
thead th:nth-child[3] {
width: 15%;
}
thead th:nth-child[4] {
width: 35%;
}
th,
td {
padding: 20px;
}
4, /* spacing */
table {
table-layout: fixed;
width: 100%;
border-collapse: collapse;
border: 3px solid purple;
}
thead th:nth-child[1] {
width: 30%;
}
thead th:nth-child[2] {
width: 20%;
}
thead th:nth-child[3] {
width: 15%;
}
thead th:nth-child[4] {
width: 35%;
}
th,
td {
padding: 20px;
}
5,
0,
1, v.v. Thật không may, nó trông không đẹp khi hiển thị trên màn hình [xem trực tiếp tại punk-band-unstyled. html]Chỉ với kiểu dáng trình duyệt mặc định, nó trông chật chội, khó đọc và nhàm chán. Chúng tôi cần sử dụng một số CSS để sửa lỗi này
Tạo kiểu cho bảng của chúng tôi
Hãy cùng nhau tạo kiểu cho ví dụ bảng của chúng ta
- Để bắt đầu, hãy tạo một bản sao cục bộ của đánh dấu mẫu, tải xuống cả hai hình ảnh [nhiễu và da báo] và đặt ba tệp kết quả vào một thư mục đang hoạt động ở đâu đó trên máy tính cục bộ của bạn
- Tiếp theo, tạo một tệp mới có tên là
2 và lưu nó vào cùng thư mục với các tệp khác của bạn - Liên kết CSS với HTML bằng cách đặt dòng HTML sau vào bên trong
3 của bạn
Khoảng cách và bố cục
Điều đầu tiên chúng ta cần làm là sắp xếp khoảng cách/bố cục - kiểu dáng bảng mặc định rất chật chội. Để thực hiện việc này, hãy thêm CSS sau vào tệp
2 của bạn/* spacing */
table {
table-layout: fixed;
width: 100%;
border-collapse: collapse;
border: 3px solid purple;
}
thead th:nth-child[1] {
width: 30%;
}
thead th:nth-child[2] {
width: 20%;
}
thead th:nth-child[3] {
width: 15%;
}
thead th:nth-child[4] {
width: 35%;
}
th,
td {
padding: 20px;
}
Các phần quan trọng nhất cần lưu ý như sau
- Giá trị
5 của
6 nói chung là một ý tưởng hay để đặt trên bảng của bạn, vì nó làm cho bảng hoạt động dễ đoán hơn một chút theo mặc định. Thông thường, các cột trong bảng có xu hướng được định kích thước tùy theo lượng nội dung mà chúng chứa, điều này tạo ra một số kết quả lạ. Với
7, bạn có thể định cỡ các cột của mình theo độ rộng của tiêu đề và sau đó xử lý nội dung của chúng khi thích hợp. Đây là lý do tại sao chúng tôi đã chọn bốn tiêu đề khác nhau với bộ chọn
8 [
9] ["Chọn phần tử con thứ n là phần tử
0 trong một chuỗi, bên trong phần tử/* spacing */ table { table-layout: fixed; width: 100%; border-collapse: collapse; border: 3px solid purple; } thead th:nth-child[1] { width: 30%; } thead th:nth-child[2] { width: 20%; } thead th:nth-child[3] { width: 15%; } thead th:nth-child[4] { width: 35%; } th, td { padding: 20px; }
0"] và cho chúng đặt độ rộng phần trăm. Toàn bộ chiều rộng của cột tuân theo chiều rộng của tiêu đề, tạo nên một cách hay để định kích thước cho các cột trong bảng của bạn. Chris Coyier thảo luận chi tiết hơn về kỹ thuật này trong Bố cục bảng cố định. Chúng tôi đã kết hợp điều này với
2 là 100%, nghĩa là bảng sẽ lấp đầy bất kỳ vùng chứa nào mà nó được đặt vào và phản hồi tốt [mặc dù vẫn cần thêm một số công việc để làm cho bảng trông đẹp mắt trên màn hình có chiều rộng hẹp]/* spacing */ table { table-layout: fixed; width: 100%; border-collapse: collapse; border: 3px solid purple; } thead th:nth-child[1] { width: 30%; } thead th:nth-child[2] { width: 20%; } thead th:nth-child[3] { width: 15%; } thead th:nth-child[4] { width: 35%; } th, td { padding: 20px; }
- Giá trị
3 của/* spacing */ table { table-layout: fixed; width: 100%; border-collapse: collapse; border: 3px solid purple; } thead th:nth-child[1] { width: 30%; } thead th:nth-child[2] { width: 20%; } thead th:nth-child[3] { width: 15%; } thead th:nth-child[4] { width: 35%; } th, td { padding: 20px; }
4 là phương pháp hay nhất tiêu chuẩn cho bất kỳ nỗ lực tạo kiểu bảng nào. Theo mặc định, khi bạn đặt đường viền cho các phần tử bảng, tất cả chúng sẽ có khoảng cách giữa chúng, như hình minh họa bên dưới./* spacing */ table { table-layout: fixed; width: 100%; border-collapse: collapse; border: 3px solid purple; } thead th:nth-child[1] { width: 30%; } thead th:nth-child[2] { width: 20%; } thead th:nth-child[3] { width: 15%; } thead th:nth-child[4] { width: 35%; } th, td { padding: 20px; }
Giao diện này trông không đẹp lắm [mặc dù đó có thể là giao diện bạn muốn, ai biết được?]. Khi đặt
5, các đường viền thu gọn thành một, trông đẹp hơn nhiều./* spacing */ table { table-layout: fixed; width: 100%; border-collapse: collapse; border: 3px solid purple; } thead th:nth-child[1] { width: 30%; } thead th:nth-child[2] { width: 20%; } thead th:nth-child[3] { width: 15%; } thead th:nth-child[4] { width: 35%; } th, td { padding: 20px; }
- Chúng tôi đã đặt một
6 xung quanh toàn bộ bảng, điều này là cần thiết vì chúng tôi sẽ đặt một số đường viền xung quanh đầu trang và chân trang của bảng sau này - nó trông thực sự kỳ quặc và rời rạc khi bạn không có đường viền bao quanh toàn bộ bên ngoài của bảng/* spacing */ table { table-layout: fixed; width: 100%; border-collapse: collapse; border: 3px solid purple; } thead th:nth-child[1] { width: 30%; } thead th:nth-child[2] { width: 20%; } thead th:nth-child[3] { width: 15%; } thead th:nth-child[4] { width: 35%; } th, td { padding: 20px; }
- Chúng tôi đã đặt một số
7 trên các phần tử/* spacing */ table { table-layout: fixed; width: 100%; border-collapse: collapse; border: 3px solid purple; } thead th:nth-child[1] { width: 30%; } thead th:nth-child[2] { width: 20%; } thead th:nth-child[3] { width: 15%; } thead th:nth-child[4] { width: 35%; } th, td { padding: 20px; }
0 và/* spacing */ table { table-layout: fixed; width: 100%; border-collapse: collapse; border: 3px solid purple; } thead th:nth-child[1] { width: 30%; } thead th:nth-child[2] { width: 20%; } thead th:nth-child[3] { width: 15%; } thead th:nth-child[4] { width: 35%; } th, td { padding: 20px; }
9 — điều này mang lại cho các mục dữ liệu một số không gian để thở, làm cho bảng trông dễ đọc hơn rất nhiều/* spacing */ table { table-layout: fixed; width: 100%; border-collapse: collapse; border: 3px solid purple; } thead th:nth-child[1] { width: 30%; } thead th:nth-child[2] { width: 20%; } thead th:nth-child[3] { width: 15%; } thead th:nth-child[4] { width: 35%; } th, td { padding: 20px; }
Tại thời điểm này, bảng của chúng tôi đã trông đẹp hơn rất nhiều
Một số kiểu chữ đơn giản
Bây giờ chúng tôi sẽ sắp xếp văn bản của chúng tôi một chút
Trước hết, chúng tôi đã tìm thấy một phông chữ trên Google Fonts phù hợp cho bảng về các ban nhạc punk. Bạn có thể đến đó và tìm một cái khác nếu bạn thích;
Trước tiên, hãy thêm phần tử
30 sau vào phần đầu HTML của bạn, ngay phía trên phần tử
30 hiện tại của bạn
3Bây giờ, hãy thêm CSS sau vào tệp
2 của bạn, bên dưới phần bổ sung trước đó
9Không có gì thực sự cụ thể cho các bảng ở đây;
- Chúng tôi đã đặt một ngăn xếp phông chữ sans-serif toàn cầu; . Chúng tôi cũng đã đặt phông chữ tùy chỉnh của mình trên các tiêu đề bên trong các phần tử
0 và
36, để có giao diện đẹp mắt, bụi bặm - Chúng tôi đã đặt một số
37 trên các tiêu đề và ô, vì chúng tôi cảm thấy nó hỗ trợ khả năng đọc. Một lần nữa, chủ yếu là một sự lựa chọn phong cách - Chúng tôi đã căn giữa văn bản trong các ô của bảng bên trong
1 để chúng thẳng hàng với tiêu đề. Theo mặc định, các ô được cung cấp một giá trị
39 là
90 và các tiêu đề được cung cấp một giá trị là
91, nhưng nhìn chung sẽ tốt hơn nếu đặt các sắp xếp giống nhau cho cả hai. Trọng lượng đậm mặc định trên các phông chữ tiêu đề là đủ để phân biệt giao diện của chúng - Chúng tôi đã căn phải tiêu đề bên trong
36 để nó được liên kết trực quan tốt hơn với điểm dữ liệu của nó
Kết quả trông gọn gàng hơn một chút
Đồ họa và màu sắc
Bây giờ vào đồ họa và màu sắc. Bởi vì chiếc bàn đầy chất punk và thái độ, chúng tôi cần tạo cho nó một số kiểu dáng ấn tượng tươi sáng để phù hợp với nó. Đừng lo lắng, bạn không cần phải làm cho bàn của mình ồn ào như vậy — bạn có thể chọn thứ gì đó tinh tế và trang nhã hơn
Bắt đầu bằng cách thêm CSS sau vào tệp
2 của bạn, một lần nữa ở dưới cùng
9Một lần nữa, không có gì cụ thể cho các bảng ở đây, nhưng đáng để lưu ý một số điều
Chúng tôi đã thêm
94 vào
0 và
36, đồng thời thay đổi
97 của tất cả văn bản bên trong đầu trang và chân trang thành màu trắng [và đặt tên là
98] để có thể đọc được. Bạn phải luôn đảm bảo rằng văn bản của bạn tương phản tốt với nền để có thể đọc đượcChúng tôi cũng đã thêm một dải màu tuyến tính cho các phần tử
/* spacing */
table {
table-layout: fixed;
width: 100%;
border-collapse: collapse;
border: 3px solid purple;
}
thead th:nth-child[1] {
width: 30%;
}
thead th:nth-child[2] {
width: 20%;
}
thead th:nth-child[3] {
width: 15%;
}
thead th:nth-child[4] {
width: 35%;
}
th,
td {
padding: 20px;
}
0 và /* spacing */
table {
table-layout: fixed;
width: 100%;
border-collapse: collapse;
border: 3px solid purple;
}
thead th:nth-child[1] {
width: 30%;
}
thead th:nth-child[2] {
width: 20%;
}
thead th:nth-child[3] {
width: 15%;
}
thead th:nth-child[4] {
width: 35%;
}
th,
td {
padding: 20px;
}
9 bên trong đầu trang và chân trang để có một chút họa tiết đẹp mắt, cũng như tạo cho các phần tử đó một đường viền màu tím sáng. Sẽ rất hữu ích khi có sẵn nhiều phần tử lồng nhau để bạn có thể xếp các kiểu chồng lên nhau. Có, chúng tôi có thể đã đặt cả hình nền và độ dốc tuyến tính trên các phần tử
0 và
36 bằng cách sử dụng nhiều hình nền, nhưng chúng tôi đã quyết định làm điều đó một cách riêng biệt vì lợi ích của các trình duyệt cũ không hỗ trợ nhiều hình nền hoặc độ dốc tuyến tínhsọc ngựa vằn
Chúng tôi muốn dành một phần riêng để chỉ cho bạn cách triển khai các sọc ngựa vằn — xen kẽ các hàng màu giúp các hàng dữ liệu khác nhau trong bảng của bạn dễ phân tích và đọc hơn. Thêm CSS sau vào cuối tệp
2 của bạn
0- Trước đó, bạn đã thấy bộ chọn
9 được sử dụng để chọn các phần tử con cụ thể. Nó cũng có thể được cung cấp một công thức làm tham số, vì vậy nó sẽ chọn một chuỗi các phần tử. Công thức
95 sẽ chọn tất cả các con số lẻ [1, 3, 5, v.v. ] và công thức
96 sẽ chọn tất cả các con số chẵn [2, 4, 6, v.v. ] Chúng tôi đã sử dụng các từ khóa
97 và
98 trong mã của mình, các từ khóa này thực hiện chính xác những điều tương tự như các công thức đã nói ở trên. Trong trường hợp này, chúng tôi đang cung cấp cho các hàng chẵn và lẻ các màu khác nhau [nhạt] - Chúng tôi cũng đã thêm một ô nền lặp lại cho tất cả các hàng nội dung, đây chỉ là một chút nhiễu [một
99 bán trong suốt với một chút biến dạng hình ảnh trên đó] để cung cấp một số kết cấu - Cuối cùng, chúng tôi đã cung cấp cho toàn bộ bảng một màu nền đồng nhất để các trình duyệt không hỗ trợ bộ chọn
9 vẫn có nền cho các hàng nội dung của chúng
Vụ nổ màu này dẫn đến cái nhìn sau đây
Bây giờ, điều này có thể hơi quá và không hợp khẩu vị của bạn, nhưng điểm mà chúng tôi đang cố gắng thực hiện ở đây là các bảng không nhất thiết phải nhàm chán và hàn lâm
Tạo kiểu cho chú thích
Còn một việc cuối cùng cần làm với bảng của chúng ta — tạo kiểu cho chú thích. Để thực hiện việc này, hãy thêm phần sau vào cuối tệp
2 của bạn
9Không có gì đáng chú ý ở đây, ngoại trừ tài sản
02, đã được định giá là
03. Điều này làm cho chú thích được định vị ở cuối bảng, cùng với các khai báo khác cho chúng ta cái nhìn cuối cùng này [xem nó trực tiếp tại punk-bands-complete. html]Mẹo tạo kiểu bảng nhanh
Trước khi tiếp tục, chúng tôi nghĩ rằng chúng tôi sẽ cung cấp cho bạn một danh sách nhanh các điểm hữu ích nhất được minh họa ở trên
- Hãy đánh dấu bảng của bạn đơn giản nhất có thể và giữ cho mọi thứ linh hoạt, e. g. bằng cách sử dụng tỷ lệ phần trăm, vì vậy thiết kế phản hồi nhanh hơn
- Sử dụng
5
05 để tạo bố cục bảng dễ đoán hơn, cho phép bạn dễ dàng đặt độ rộng cột bằng cách đặt
2 trên tiêu đề của chúng [/* spacing */ table { table-layout: fixed; width: 100%; border-collapse: collapse; border: 3px solid purple; } thead th:nth-child[1] { width: 30%; } thead th:nth-child[2] { width: 20%; } thead th:nth-child[3] { width: 15%; } thead th:nth-child[4] { width: 35%; } th, td { padding: 20px; }
0]/* spacing */ table { table-layout: fixed; width: 100%; border-collapse: collapse; border: 3px solid purple; } thead th:nth-child[1] { width: 30%; } thead th:nth-child[2] { width: 20%; } thead th:nth-child[3] { width: 15%; } thead th:nth-child[4] { width: 35%; } th, td { padding: 20px; }
- Sử dụng ________ 73 ________ 509 để làm cho các đường viền của các thành phần bảng thu gọn vào nhau, tạo ra giao diện gọn gàng và dễ kiểm soát hơn
- Sử dụng
0,
1 và
36 để chia bảng của bạn thành các phần hợp lý và cung cấp thêm các vị trí để áp dụng CSS, do đó, việc xếp các kiểu chồng lên nhau sẽ dễ dàng hơn nếu cần - Sử dụng sọc vằn để làm cho các hàng thay thế dễ đọc hơn
- Sử dụng
39 để sắp xếp văn bản
0 và/* spacing */ table { table-layout: fixed; width: 100%; border-collapse: collapse; border: 3px solid purple; } thead th:nth-child[1] { width: 30%; } thead th:nth-child[2] { width: 20%; } thead th:nth-child[3] { width: 15%; } thead th:nth-child[4] { width: 35%; } th, td { padding: 20px; }
9 của bạn, để làm cho mọi thứ gọn gàng và dễ theo dõi hơn/* spacing */ table { table-layout: fixed; width: 100%; border-collapse: collapse; border: 3px solid purple; } thead th:nth-child[1] { width: 30%; } thead th:nth-child[2] { width: 20%; } thead th:nth-child[3] { width: 15%; } thead th:nth-child[4] { width: 35%; } th, td { padding: 20px; }
Kiểm tra kỹ năng của bạn
Bạn đã đọc đến cuối bài viết này, nhưng liệu bạn có nhớ được thông tin quan trọng nhất không? . Những cái bàn
Bản tóm tắt
Với các bảng tạo kiểu hiện đang ở phía sau chúng tôi, chúng tôi cần một cái gì đó khác để chiếm thời gian của chúng tôi. Bài viết tiếp theo khám phá cách gỡ lỗi CSS — cách giải quyết các sự cố chẳng hạn như bố cục trông không giống như mong muốn hoặc các thuộc tính không được áp dụng khi bạn cho rằng chúng nên được áp dụng. Điều này bao gồm thông tin về cách sử dụng DevTools của trình duyệt để tìm giải pháp cho sự cố của bạn