Html cho bảng vòng lặp

Question

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

Nội dung chính Show

Một bảng HTML điển hình
Tạo kiểu cho bảng của chúng tôi
Khoảng cách và bố cục
Một số kiểu chữ đơn giản
Đồ họa và màu sắc
Tạo kiểu cho chú thích
Mẹo tạo kiểu bảng nhanh
Kiểm tra kỹ năng của bạn
Bản tóm tắ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

<table>
  <caption>
    A summary of the UK's most famous punk bands
  caption>
  <thead>
    <tr>
      <th scope="col">Bandth>
      <th scope="col">Year formedth>
      <th scope="col">No. of Albumsth>
      <th scope="col">Most famous songth>
    tr>
  thead>
  <tbody>
    <tr>
      <th scope="row">Buzzcocksth>
      <td>1976td>
      <td>9td>
      <td>Ever fallen in love (with someone you shouldn't've)td>
    tr>
    <tr>
      <th scope="row">The Clashth>
      <td>1976td>
      <td>6td>
      <td>London Callingtd>
    tr>

    

    <tr>
      <th scope="row">The Stranglersth>
      <td>1974td>
      <td>17td>
      <td>No More Heroestd>
    tr>
  tbody>
  <tfoot>
    <tr>
      <th scope="row" colspan="2">Total albumsth>
      <td colspan="2">77td>
    tr>
  tfoot>
table>

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,

<link href="style.css" rel="stylesheet" />

0,

<link href="style.css" rel="stylesheet" />

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à
```
<link href="style.css" rel="stylesheet" />
```
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

<link href="style.css" rel="stylesheet" />

3 của bạn

<link href="style.css" rel="stylesheet" />

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

<link href="style.css" rel="stylesheet" />

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ị
```
<link href="style.css" rel="stylesheet" />
```
5 của
```
<link href="style.css" rel="stylesheet" />
```
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
```
<link href="style.css" rel="stylesheet" />
```
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
```
<link href="style.css" rel="stylesheet" />
```
8 (
```
<link href="style.css" rel="stylesheet" />
```
9) ("Chọn phần tử con thứ n là 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 trong một chuỗi, bên trong phần tử
```
<link href="style.css" rel="stylesheet" />
```
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
```
/* 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;
}
```
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)

Giá trị

/* 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;
}

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.

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

/* 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, các đường viền thu gọn thành một, trông đẹp hơn nhiều.

Chúng tôi đã đặt mộ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;
}

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

Chúng tôi đã đặt một số

/* 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;
}

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

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ử

<link href="style.css" rel="stylesheet" />

30 sau vào phần đầu HTML của bạn, ngay phía trên phần tử

<link href="style.css" rel="stylesheet" />

30 hiện tại của bạn

<link href="style.css" rel="stylesheet" />

3

Bây giờ, hãy thêm CSS sau vào tệp

<link href="style.css" rel="stylesheet" />

2 của bạn, bên dưới phần bổ sung trước đó

<link href="style.css" rel="stylesheet" />

9

Khô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ử
```
<link href="style.css" rel="stylesheet" />
```
0 và
```
<link href="style.css" rel="stylesheet" />
```
36, để có giao diện đẹp mắt, bụi bặm
Chúng tôi đã đặt một số
```
<link href="style.css" rel="stylesheet" />
```
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
```
<link href="style.css" rel="stylesheet" />
```
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ị
```
<link href="style.css" rel="stylesheet" />
```
39 là
```
<link href="style.css" rel="stylesheet" />
```
90 và các tiêu đề được cung cấp một giá trị là
```
<link href="style.css" rel="stylesheet" />
```
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
```
<link href="style.css" rel="stylesheet" />
```
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

<link href="style.css" rel="stylesheet" />

2 của bạn, một lần nữa ở dưới cùng

<link href="style.css" rel="stylesheet" />

9

Mộ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

<link href="style.css" rel="stylesheet" />

94 vào

<link href="style.css" rel="stylesheet" />

0 và

<link href="style.css" rel="stylesheet" />

36, đồng thời thay đổi

<link href="style.css" rel="stylesheet" />

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à

<link href="style.css" rel="stylesheet" />

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 được

Chú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ử

<link href="style.css" rel="stylesheet" />

0 và

<link href="style.css" rel="stylesheet" />

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ính

sọ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

<link href="style.css" rel="stylesheet" />

2 của bạn

<link href="style.css" rel="stylesheet" />

0

Trước đó, bạn đã thấy bộ chọn
```
<link href="style.css" rel="stylesheet" />
```
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
```
<link href="style.css" rel="stylesheet" />
```
95 sẽ chọn tất cả các con số lẻ (1, 3, 5, v.v. ) và công thức
```
<link href="style.css" rel="stylesheet" />
```
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
```
<link href="style.css" rel="stylesheet" />
```
97 và
```
<link href="style.css" rel="stylesheet" />
```
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
```
<link href="style.css" rel="stylesheet" />
```
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
```
<link href="style.css" rel="stylesheet" />
```
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

<link href="style.css" rel="stylesheet" />

2 của bạn

<link href="style.css" rel="stylesheet" />

9

Không có gì đáng chú ý ở đây, ngoại trừ tài sản

<link href="style.css" rel="stylesheet" />

02, đã được định giá là

<link href="style.css" rel="stylesheet" />

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

<link href="style.css" rel="stylesheet" />

5

<link href="style.css" rel="stylesheet" />

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

/* 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;
}

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)

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
```
<link href="style.css" rel="stylesheet" />
```
0,
```
<link href="style.css" rel="stylesheet" />
```
1 và
```
<link href="style.css" rel="stylesheet" />
```
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

<link href="style.css" rel="stylesheet" />

39 để sắp xếp văn 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;
}

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

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

programming html

Html cho bảng vòng lặp

Một bảng HTML điển hình

Tạo kiểu cho bảng của chúng tôi

Khoảng cách và bố cục

Một số kiểu chữ đơn giản

Đồ họa và màu sắc

sọc ngựa vằn

Tạo kiểu cho chú thích

Mẹo tạo kiểu bảng nhanh

Kiểm tra kỹ năng của bạn

Bản tóm tắt

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội