programming html

Làm cách nào để hiển thị dữ liệu trong HTML?

Các bảng HTML đã được tạo để cung cấp một cách đơn giản để đánh dấu dữ liệu dạng bảng có cấu trúc và để hiển thị dữ liệu đó ở dạng người dùng dễ đọc và hiểu

Tuy nhiên, khi HTML đang được phát triển, CSS không được hỗ trợ rộng rãi trong các trình duyệt, vì vậy bảng là phương tiện chính để xây dựng trang web. Chúng được sử dụng để định vị nội dung cũng như để xây dựng bố cục tổng thể của trang. Điều này hoạt động vào thời điểm đó, nhưng nó không phải là mục đích đánh dấu bảng và nó dẫn đến nhiều vấn đề liên quan khác

May mắn thay, chúng ta đã đi một chặng đường dài kể từ đó. Ngày nay, các bảng được sử dụng đặc biệt để tổ chức dữ liệu [như chúng phải như vậy] và CSS có thể tự do thực hiện các công việc định vị và bố cục

Xây dựng bảng dữ liệu vẫn còn những thách thức. Cách tạo bảng trong HTML phụ thuộc phần lớn vào dữ liệu và cách hiển thị bảng. Sau đó, khi chúng được đánh dấu bằng HTML, các bảng cần được tạo kiểu bằng CSS để làm cho thông tin dễ đọc và dễ hiểu hơn đối với người dùng

Tạo bảng

Các bảng được tạo thành từ dữ liệu chứa trong các cột và hàng và HTML cung cấp một số phần tử khác nhau để xác định và cấu trúc các mục này. Ở mức tối thiểu, một bảng phải bao gồm các phần tử 


  

    Don’t Make Me Think by Steve Krug
    In Stock
    1
    $30.02
  

  

    A Project Guide to UX Design by Russ Unger & Carolyn Chandler
    In Stock
    2
    $52.94 [$26.47 × 2]
  

  

    Introducing HTML5 by Bruce Lawson & Remy Sharp
    Out of Stock
    1
    $22.23
  

  

    Bulletproof Web Design by Dan Cederholm
    In Stock
    1
    $30.17
8, 

  

    Don’t Make Me Think by Steve Krug
    In Stock
    1
    $30.02
  

  

    A Project Guide to UX Design by Russ Unger & Carolyn Chandler
    In Stock
    2
    $52.94 [$26.47 × 2]
  

  

    Introducing HTML5 by Bruce Lawson & Remy Sharp
    Out of Stock
    1
    $22.23
  

  

    Bulletproof Web Design by Dan Cederholm
    In Stock
    1
    $30.17
9 [hàng của bảng] và 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
0 [dữ liệu của bảng]. Để có cấu trúc lớn hơn và giá trị ngữ nghĩa bổ sung, các bảng có thể bao gồm phần tử 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
1 [tiêu đề bảng] và một vài phần tử khác. Khi tất cả các yếu tố này hoạt động cùng nhau, chúng sẽ tạo ra một bảng vững chắc
Bàn
Chúng tôi sử dụng phần tử 

  

    Don’t Make Me Think by Steve Krug
    In Stock
    1
    $30.02
  

  

    A Project Guide to UX Design by Russ Unger & Carolyn Chandler
    In Stock
    2
    $52.94 [$26.47 × 2]
  

  

    Introducing HTML5 by Bruce Lawson & Remy Sharp
    Out of Stock
    1
    $22.23
  

  

    Bulletproof Web Design by Dan Cederholm
    In Stock
    1
    $30.17
  




8 để khởi tạo một bảng trên một trang. Việc sử dụng phần tử 

  

    Don’t Make Me Think by Steve Krug
    In Stock
    1
    $30.02
  

  

    A Project Guide to UX Design by Russ Unger & Carolyn Chandler
    In Stock
    2
    $52.94 [$26.47 × 2]
  

  

    Introducing HTML5 by Bruce Lawson & Remy Sharp
    Out of Stock
    1
    $22.23
  

  

    Bulletproof Web Design by Dan Cederholm
    In Stock
    1
    $30.17
  




8 có nghĩa là thông tin trong phần tử này sẽ là dữ liệu dạng bảng được hiển thị trong các cột và hàng cần thiết
1
2
3
4

  ...



hàng bảng
Khi một bảng đã được xác định trong HTML, các hàng của bảng có thể được thêm vào bằng cách sử dụng phần tử 

  

    Don’t Make Me Think by Steve Krug
    In Stock
    1
    $30.02
  

  

    A Project Guide to UX Design by Russ Unger & Carolyn Chandler
    In Stock
    2
    $52.94 [$26.47 × 2]
  

  

    Introducing HTML5 by Bruce Lawson & Remy Sharp
    Out of Stock
    1
    $22.23
  

  

    Bulletproof Web Design by Dan Cederholm
    In Stock
    1
    $30.17
  




9. Một bảng có thể có nhiều hàng của bảng hoặc _______ 9 phần tử. Tùy thuộc vào lượng thông tin hiển thị, số lượng hàng của bảng có thể là đáng kể
1
2
3
4
5
6
7
8
9

    ...
  
    ...
  

  

  




Bảng dữ liệu
Khi một bảng được xác định và các hàng trong bảng đó đã được thiết lập, các ô dữ liệu có thể được thêm vào bảng thông qua dữ liệu bảng, hoặc phần tử 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
0. Liệt kê nhiều phần tử 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
0 lần lượt sẽ tạo các cột trong một hàng của bảng
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

  

    Don’t Make Me Think by Steve Krug
    In Stock
    1
    $30.02
  

  

    A Project Guide to UX Design by Russ Unger & Carolyn Chandler
    In Stock
    2
    $52.94 [$26.47 × 2]
  

  

    Introducing HTML5 by Bruce Lawson & Remy Sharp
    Out of Stock
    1
    $22.23
  

  

    Bulletproof Web Design by Dan Cederholm
    In Stock
    1
    $30.17
  




Bảng demo
Xem Bảng bút của Shay Howe [@shayhowe] trên CodePen
Tiêu đề bảng
Để chỉ định tiêu đề cho một cột hoặc hàng ô, nên sử dụng phần tử tiêu đề bảng, 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
1. Phần tử 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
1 hoạt động giống như phần tử 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
0 ở chỗ nó tạo ô chứa dữ liệu. Giá trị của việc sử dụng phần tử 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
1 trên phần tử 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
0 là phần tử tiêu đề bảng cung cấp giá trị ngữ nghĩa bằng cách biểu thị rằng dữ liệu trong ô là một tiêu đề, trong khi phần tử 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
0 chỉ đại diện cho một phần dữ liệu chung
Sự khác biệt giữa hai yếu tố này tương tự như sự khác biệt giữa tiêu đề [
ItemAvailabilityQtyPrice

  

    
    
    
    
  

  

    Don’t Make Me Think by Steve Krug
    In Stock
    1
    $30.02
  

  

    A Project Guide to UX Design by Russ Unger & Carolyn Chandler
    In Stock
    2
    $52.94 [$26.47 × 2]
  

  

    Introducing HTML5 by Bruce Lawson & Remy Sharp
    Out of Stock
    1
    $22.23
  

  

    Bulletproof Web Design by Dan Cederholm
    In Stock
    1
    $30.17
  




4 đến 
ItemAvailabilityQtyPrice

  

    
    
    
    
  

  

    Don’t Make Me Think by Steve Krug
    In Stock
    1
    $30.02
  

  

    A Project Guide to UX Design by Russ Unger & Carolyn Chandler
    In Stock
    2
    $52.94 [$26.47 × 2]
  

  

    Introducing HTML5 by Bruce Lawson & Remy Sharp
    Out of Stock
    1
    $22.23
  

  

    Bulletproof Web Design by Dan Cederholm
    In Stock
    1
    $30.17
  




5 yếu tố] và đoạn văn [
ItemAvailabilityQtyPrice

  

    
    
    
    
  

  

    Don’t Make Me Think by Steve Krug
    In Stock
    1
    $30.02
  

  

    A Project Guide to UX Design by Russ Unger & Carolyn Chandler
    In Stock
    2
    $52.94 [$26.47 × 2]
  

  

    Introducing HTML5 by Bruce Lawson & Remy Sharp
    Out of Stock
    1
    $22.23
  

  

    Bulletproof Web Design by Dan Cederholm
    In Stock
    1
    $30.17
  




6 yếu tố]. Mặc dù nội dung của tiêu đề có thể được đặt trong một đoạn văn, nhưng làm như vậy không hợp lý. Cụ thể là sử dụng tiêu đề bổ sung thêm giá trị ngữ nghĩa cho nội dung. Điều này cũng đúng với tiêu đề bảng
Tiêu đề bảng có thể được sử dụng trong cả cột và hàng; . Thuộc tính 
ItemAvailabilityQtyPrice

  

    
    
    
    
  

  

    Don’t Make Me Think by Steve Krug
    In Stock
    1
    $30.02
  

  

    A Project Guide to UX Design by Russ Unger & Carolyn Chandler
    In Stock
    2
    $52.94 [$26.47 × 2]
  

  

    Introducing HTML5 by Bruce Lawson & Remy Sharp
    Out of Stock
    1
    $22.23
  

  

    Bulletproof Web Design by Dan Cederholm
    In Stock
    1
    $30.17
  




7 giúp xác định chính xác nội dung mà tiêu đề bảng liên quan đến. Thuộc tính 
ItemAvailabilityQtyPrice

  

    
    
    
    
  

  

    Don’t Make Me Think by Steve Krug
    In Stock
    1
    $30.02
  

  

    A Project Guide to UX Design by Russ Unger & Carolyn Chandler
    In Stock
    2
    $52.94 [$26.47 × 2]
  

  

    Introducing HTML5 by Bruce Lawson & Remy Sharp
    Out of Stock
    1
    $22.23
  

  

    Bulletproof Web Design by Dan Cederholm
    In Stock
    1
    $30.17
  




7 cho biết với các giá trị 
ItemAvailabilityQtyPrice

  

    
    
    
    
  

  

    Don’t Make Me Think by Steve Krug
    In Stock
    1
    $30.02
  

  

    A Project Guide to UX Design by Russ Unger & Carolyn Chandler
    In Stock
    2
    $52.94 [$26.47 × 2]
  

  

    Introducing HTML5 by Bruce Lawson & Remy Sharp
    Out of Stock
    1
    $22.23
  

  

    Bulletproof Web Design by Dan Cederholm
    In Stock
    1
    $30.17
  




9, 
1
2
3
4
5
0, 
1
2
3
4
5
1 và 
1
2
3
4
5
2 liệu tiêu đề bảng có áp dụng cho một hàng hay cột hay không. Các giá trị được sử dụng phổ biến nhất là 
ItemAvailabilityQtyPrice

  

    
    
    
    
  

  

    Don’t Make Me Think by Steve Krug
    In Stock
    1
    $30.02
  

  

    A Project Guide to UX Design by Russ Unger & Carolyn Chandler
    In Stock
    2
    $52.94 [$26.47 × 2]
  

  

    Introducing HTML5 by Bruce Lawson & Remy Sharp
    Out of Stock
    1
    $22.23
  

  

    Bulletproof Web Design by Dan Cederholm
    In Stock
    1
    $30.17
  




9 và 
1
2
3
4
5
0. Giá trị 
ItemAvailabilityQtyPrice

  

    
    
    
    
  

  

    Don’t Make Me Think by Steve Krug
    In Stock
    1
    $30.02
  

  

    A Project Guide to UX Design by Russ Unger & Carolyn Chandler
    In Stock
    2
    $52.94 [$26.47 × 2]
  

  

    Introducing HTML5 by Bruce Lawson & Remy Sharp
    Out of Stock
    1
    $22.23
  

  

    Bulletproof Web Design by Dan Cederholm
    In Stock
    1
    $30.17
  




9 cho biết rằng mọi ô trong cột liên quan trực tiếp đến tiêu đề bảng đó và giá trị 
1
2
3
4
5
0 cho biết rằng mọi ô trong hàng liên quan trực tiếp đến tiêu đề bảng đó
Việc sử dụng phần tử 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
1, cùng với thuộc tính 
ItemAvailabilityQtyPrice

  

    
    
    
    
  

  

    Don’t Make Me Think by Steve Krug
    In Stock
    1
    $30.02
  

  

    A Project Guide to UX Design by Russ Unger & Carolyn Chandler
    In Stock
    2
    $52.94 [$26.47 × 2]
  

  

    Introducing HTML5 by Bruce Lawson & Remy Sharp
    Out of Stock
    1
    $22.23
  

  

    Bulletproof Web Design by Dan Cederholm
    In Stock
    1
    $30.17
  




7, giúp ích rất nhiều cho trình đọc màn hình và công nghệ hỗ trợ hiểu ý nghĩa của bảng. Do đó, chúng cũng có lợi cho những người duyệt trang web bằng các công nghệ đó
Ngoài ra, tùy thuộc vào trình duyệt, tiêu đề bảng có thể nhận được một số kiểu dáng mặc định, thường được in đậm và căn giữa
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
ItemAvailabilityQtyPrice

  

    
    
    
    
  

  

    Don’t Make Me Think by Steve Krug
    In Stock
    1
    $30.02
  

  

    A Project Guide to UX Design by Russ Unger & Carolyn Chandler
    In Stock
    2
    $52.94 [$26.47 × 2]
  

  

    Introducing HTML5 by Bruce Lawson & Remy Sharp
    Out of Stock
    1
    $22.23
  

  

    Bulletproof Web Design by Dan Cederholm
    In Stock
    1
    $30.17
  




Trình diễn tiêu đề bảng
Xem Tiêu đề bảng bút của Shay Howe [@shayhowe] trên CodePen
Lấy dữ liệu vào một bảng chỉ là khởi đầu. Mặc dù chúng ta đã tìm hiểu sơ bộ về cách thêm dữ liệu vào bảng theo ngữ nghĩa, nhưng chúng ta có thể làm nhiều việc hơn nữa để xác định cấu trúc của bảng
Thuộc tính tiêu đề
Thuộc tính tiêu đề rất giống với thuộc tính 
ItemAvailabilityQtyPrice

  

    
    
    
    
  

  

    Don’t Make Me Think by Steve Krug
    In Stock
    1
    $30.02
  

  

    A Project Guide to UX Design by Russ Unger & Carolyn Chandler
    In Stock
    2
    $52.94 [$26.47 × 2]
  

  

    Introducing HTML5 by Bruce Lawson & Remy Sharp
    Out of Stock
    1
    $22.23
  

  

    Bulletproof Web Design by Dan Cederholm
    In Stock
    1
    $30.17
  




7. Theo mặc định, thuộc tính 
ItemAvailabilityQtyPrice

  

    
    
    
    
  

  

    Don’t Make Me Think by Steve Krug
    In Stock
    1
    $30.02
  

  

    A Project Guide to UX Design by Russ Unger & Carolyn Chandler
    In Stock
    2
    $52.94 [$26.47 × 2]
  

  

    Introducing HTML5 by Bruce Lawson & Remy Sharp
    Out of Stock
    1
    $22.23
  

  

    Bulletproof Web Design by Dan Cederholm
    In Stock
    1
    $30.17
  




7 chỉ có thể được sử dụng trên phần tử 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
1. Trong trường hợp một ô, hoặc là một phần tử 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
0 hoặc 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
1, cần được liên kết với một tiêu đề khác, thì thuộc tính 
Design and Front-End Development Books
  ...


  


4 sẽ phát huy tác dụng. Giá trị của thuộc tính 
Design and Front-End Development Books
  ...


  


4 trên phần tử 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
0 hoặc 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
1 cần phải khớp với giá trị thuộc tính 
Design and Front-End Development Books
  ...


  


8 của phần tử 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
1 mà ô liên quan đến
Cấu trúc bảng
Biết cách xây dựng một bảng và sắp xếp dữ liệu là vô cùng mạnh mẽ; . Những yếu tố này bao gồm 

  ...



00, 

  ...



01, 

  ...



02 và 

  ...



03
Bảng chú thích
Phần tử 

  ...



00 cung cấp chú thích hoặc tiêu đề cho bảng. Chú thích sẽ giúp người dùng xác định bảng liên quan đến cái gì và họ có thể mong đợi tìm thấy dữ liệu gì trong đó. Phần tử 

  ...



00 phải xuất hiện ngay sau thẻ mở đầu 

  

    Don’t Make Me Think by Steve Krug
    In Stock
    1
    $30.02
  

  

    A Project Guide to UX Design by Russ Unger & Carolyn Chandler
    In Stock
    2
    $52.94 [$26.47 × 2]
  

  

    Introducing HTML5 by Bruce Lawson & Remy Sharp
    Out of Stock
    1
    $22.23
  

  

    Bulletproof Web Design by Dan Cederholm
    In Stock
    1
    $30.17
  




8 và nó được đặt ở đầu bảng theo mặc định
1
2
3
4
5
Design and Front-End Development Books
  ...


  


Bản giới thiệu phụ đề bảng
Xem Chú thích bảng bút của Shay Howe [@shayhowe] trên CodePen
Đầu, Thân, & Chân bàn
Nội dung trong bảng có thể được chia thành nhiều nhóm, bao gồm phần đầu, phần thân và phần chân. Các phần tử 

  ...



01 [đầu bảng], 

  ...



02 [thân bảng] và 

  ...



03 [chân bảng] giúp sắp xếp các bảng theo cấu trúc
Phần tử đầu bảng, 

  ...



01, bao quanh hàng tiêu đề hoặc các hàng của bảng để biểu thị phần đầu. Đầu bảng phải được đặt ở đầu bảng, sau bất kỳ phần tử 

  ...



00 nào và trước bất kỳ phần tử 

  ...



02 nào
Sau phần đầu bảng có thể là các phần tử 

  ...



02 hoặc 

  ...



03. Ban đầu, phần tử 

  ...



03 phải xuất hiện ngay sau phần tử 

  ...



01, nhưng HTML5 đã cung cấp thời gian ở đây. Bây giờ các phần tử này có thể xảy ra theo bất kỳ thứ tự nào miễn là chúng không bao giờ là phần tử cha của nhau. Phần tử 

  ...



02 phải chứa dữ liệu chính trong bảng, trong khi phần tử 

  ...



03 chứa dữ liệu phác thảo nội dung của bảng

  ...



0

  ...



1
Bản giới thiệu phụ đề bảng
Xem Đầu, Thân và Chân Bàn Bút của Shay Howe [@shayhowe] trên CodePen
Kết hợp nhiều ô
Thông thường, hai hoặc nhiều ô cần được kết hợp thành một ô mà không phá vỡ bố cục tổng thể của hàng và cột. Có lẽ hai ô cạnh nhau chứa cùng một dữ liệu, có một ô trống hoặc các ô nên được kết hợp cho mục đích tạo kiểu. Trong những trường hợp này, chúng ta có thể sử dụng các thuộc tính 

  ...



19 và 

  ...



20. Hai thuộc tính này hoạt động trên các phần tử 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
0 hoặc 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
1
Thuộc tính 

  ...



19 được sử dụng để mở rộng một ô trên nhiều cột trong một bảng, trong khi thuộc tính 

  ...



20 được sử dụng để mở rộng một ô trên nhiều hàng. Mỗi thuộc tính chấp nhận một giá trị số nguyên cho biết số lượng ô sẽ trải rộng, với ____7_______25 là giá trị mặc định
Sử dụng bảng sách từ trước, bây giờ chúng ta có thể xóa các ô bảng trống trong chân trang của bảng cũng như dọn dẹp tiêu đề bảng

  ...



2

  ...



3
Kết hợp nhiều ô Demo
Xem Bút kết hợp nhiều ô của Shay Howe [@shayhowe] trên CodePen
viền bảng
Sử dụng hiệu quả các đường viền có thể giúp làm cho bảng dễ hiểu hơn. Các đường viền xung quanh một bảng hoặc các ô riêng lẻ có thể tạo ra tác động lớn khi người dùng đang cố gắng diễn giải dữ liệu và quét nhanh thông tin. Khi tạo kiểu viền bảng bằng CSS, có hai thuộc tính sẽ nhanh chóng có ích. 

  ...



26 và 

  ...



27
Thuộc tính thu gọn đường viền
Các bảng bao gồm một phần tử mẹ 

  

    Don’t Make Me Think by Steve Krug
    In Stock
    1
    $30.02
  

  

    A Project Guide to UX Design by Russ Unger & Carolyn Chandler
    In Stock
    2
    $52.94 [$26.47 × 2]
  

  

    Introducing HTML5 by Bruce Lawson & Remy Sharp
    Out of Stock
    1
    $22.23
  

  

    Bulletproof Web Design by Dan Cederholm
    In Stock
    1
    $30.17
  




8 cũng như các phần tử 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
1 hoặc 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
0 lồng nhau. Khi chúng ta áp dụng các đường viền xung quanh các phần tử này, các đường viền đó sẽ bắt đầu xếp chồng lên nhau, với đường viền của một phần tử nằm cạnh đường viền của phần tử khác. Ví dụ: nếu chúng ta đặt một đường viền 

  ...



31 pixel xung quanh toàn bộ bảng và sau đó thêm một đường viền 

  ...



31 pixel xung quanh mỗi ô của bảng, thì sẽ có một đường viền 

  ...



33 pixel xung quanh mỗi ô trong bảng
Thuộc tính 

  ...



26 xác định mô hình đường viền của bảng. Có ba giá trị cho thuộc tính 

  ...



26. 

  ...



36, 

  ...



37 và 

  ...



38. Theo mặc định, giá trị thuộc tính 

  ...



26 là 

  ...



37, nghĩa là tất cả các đường viền khác nhau sẽ xếp chồng lên nhau, như được mô tả ở trên. Mặt khác, giá trị 

  ...



36 cô đọng các đường viền thành một, chọn ô của bảng làm đường viền chính
1
2
3
4
5
6
7
8
9

  ...



5
Bản trình diễn thuộc tính Border Collapse
Xem thuộc tính Pen Border Collapse của Shay Howe [@shayhowe] trên CodePen
Thuộc tính khoảng cách đường viền
Vì thuộc tính 

  ...



26 với giá trị 

  ...



37 cho phép các đường viền được xếp chồng lên nhau, nên thuộc tính 

  ...



27 có thể xác định khoảng cách, nếu có, xuất hiện giữa các đường viền
Ví dụ: một bảng có đường viền 

  ...



25 pixel xung quanh toàn bộ bảng và đường viền 

  ...



25 pixel xung quanh mỗi ô sẽ có đường viền 

  ...



31 pixel xung quanh mọi ô vì các đường viền xếp chồng lên nhau. Thêm giá trị 

  ...



27 của 

  ...



33 pixel sẽ phân tách các đường viền bằng 

  ...



33 pixel

  ...



6

  ...



7
Giới thiệu Thuộc tính Khoảng cách Đường viền
Xem Thuộc tính khoảng cách đường viền bút của Shay Howe [@shayhowe] trên CodePen
Thuộc tính 

  ...



27 chỉ hoạt động khi giá trị thuộc tính 

  ...



26 là 

  ...



37, giá trị mặc định của nó. Nếu tài sản 

  ...



26 chưa được sử dụng trước đây, chúng tôi có thể sử dụng tài sản 

  ...



27 mà không phải lo lắng
Ngoài ra, thuộc tính 

  ...



27 có thể chấp nhận hai giá trị độ dài. giá trị đầu tiên cho khoảng cách ngang và giá trị thứ hai cho khoảng cách dọc. Ví dụ, khai báo 

  ...



57 sẽ đặt khoảng cách ngang giữa các đường viền là 

  ...



58 pixel và khoảng cách dọc giữa các đường viền là 

  ...



59 pixel
Thêm viền vào hàng
Đôi khi, việc thêm đường viền vào bảng có thể phức tạp, đặc biệt là khi đặt đường viền giữa các hàng. Trong một bảng, không thể áp dụng các đường viền cho các phần tử 

  

    Don’t Make Me Think by Steve Krug
    In Stock
    1
    $30.02
  

  

    A Project Guide to UX Design by Russ Unger & Carolyn Chandler
    In Stock
    2
    $52.94 [$26.47 × 2]
  

  

    Introducing HTML5 by Bruce Lawson & Remy Sharp
    Out of Stock
    1
    $22.23
  

  

    Bulletproof Web Design by Dan Cederholm
    In Stock
    1
    $30.17
  




9 hoặc các phần tử cấu trúc bảng, vì vậy khi chúng ta muốn đặt đường viền giữa các hàng, cần phải suy nghĩ một chút
Chúng tôi sẽ bắt đầu bằng cách đảm bảo rằng giá trị thuộc tính 

  ...



26 của bảng được đặt thành 

  ...



36, sau đó chúng tôi sẽ thêm một phần dưới cùng của 

  ...



63 vào mỗi ô của bảng, bất kể đó là phần tử 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
1 hay ____2_______0. Nếu muốn, chúng ta có thể xóa 

  ...



63 dưới cùng khỏi các ô trong hàng cuối cùng của bảng bằng cách sử dụng bộ chọn lớp giả 

  ...



67 để chọn phần tử 

  

    Don’t Make Me Think by Steve Krug
    In Stock
    1
    $30.02
  

  

    A Project Guide to UX Design by Russ Unger & Carolyn Chandler
    In Stock
    2
    $52.94 [$26.47 × 2]
  

  

    Introducing HTML5 by Bruce Lawson & Remy Sharp
    Out of Stock
    1
    $22.23
  

  

    Bulletproof Web Design by Dan Cederholm
    In Stock
    1
    $30.17
  




9 cuối cùng trong bảng và nhắm mục tiêu các phần tử 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
0 trong hàng đó. Ngoài ra, nếu một bảng đang sử dụng các phần tử cấu trúc, chúng tôi sẽ muốn đảm bảo rằng hàng cuối cùng của bảng đủ điều kiện để nằm trong phần tử 

  ...



03

  ...



8

  ...



9
Thêm viền vào hàng Demo
Xem Bút thêm viền vào hàng của Shay Howe [@shayhowe] trên CodePen
Bảng sọc
Trong nỗ lực làm cho các bảng dễ đọc hơn, một phương pháp thiết kế phổ biến là "sọc" các hàng của bảng với các màu nền xen kẽ. Điều này làm cho các hàng rõ ràng hơn và cung cấp gợi ý trực quan để quét thông tin. Một cách để làm điều này là đặt một lớp trên mọi phần tử 

  

    Don’t Make Me Think by Steve Krug
    In Stock
    1
    $30.02
  

  

    A Project Guide to UX Design by Russ Unger & Carolyn Chandler
    In Stock
    2
    $52.94 [$26.47 × 2]
  

  

    Introducing HTML5 by Bruce Lawson & Remy Sharp
    Out of Stock
    1
    $22.23
  

  

    Bulletproof Web Design by Dan Cederholm
    In Stock
    1
    $30.17
  




9 khác và đặt màu nền cho lớp đó. Một cách khác, dễ dàng hơn là sử dụng bộ chọn lớp giả 

  ...



72 với đối số 

  ...



73 hoặc 

  ...



74 để chọn mọi phần tử 

  

    Don’t Make Me Think by Steve Krug
    In Stock
    1
    $30.02
  

  

    A Project Guide to UX Design by Russ Unger & Carolyn Chandler
    In Stock
    2
    $52.94 [$26.47 × 2]
  

  

    Introducing HTML5 by Bruce Lawson & Remy Sharp
    Out of Stock
    1
    $22.23
  

  

    Bulletproof Web Design by Dan Cederholm
    In Stock
    1
    $30.17
  




9 khác
Ở đây, bảng sách của chúng ta sử dụng bộ chọn lớp giả 

  ...



72 với đối số 

  ...



73 để chọn tất cả các hàng của bảng chẵn trong bảng và áp dụng màu xám 

  ...



78. Do đó, mọi hàng khác trong thân bảng đều có màu xám
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
1
Bảng Striping Demo
Xem Sọc bảng bút của Shay Howe [@shayhowe] trên CodePen
Trong mã này có một vài điều phức tạp đáng nói. Để bắt đầu, phần tử 

  

    Don’t Make Me Think by Steve Krug
    In Stock
    1
    $30.02
  

  

    A Project Guide to UX Design by Russ Unger & Carolyn Chandler
    In Stock
    2
    $52.94 [$26.47 × 2]
  

  

    Introducing HTML5 by Bruce Lawson & Remy Sharp
    Out of Stock
    1
    $22.23
  

  

    Bulletproof Web Design by Dan Cederholm
    In Stock
    1
    $30.17
  




8 có thuộc tính 

  ...



26 rõ ràng được đặt thành tách biệt và thuộc tính 

  ...



27 được đặt thành 

  ...



82. Lý do cho điều này là các phần tử 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
0 bao gồm các đường viền, trong khi các phần tử 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
1 thì không. Nếu không đặt thuộc tính 

  ...



26 thành 

  ...



37 thì đường viền của các phần tử 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
0 sẽ làm cho phần thân và chân của bảng rộng hơn phần đầu
Vì thuộc tính 

  ...



26 được đặt thành 

  ...



37 nên chúng ta cần cẩn thận về cách áp dụng đường viền cho các phần tử 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
0. Ở đây, các đường viền được đặt ở bên phải và bên dưới của tất cả các phần tử 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
0. Sau đó, phần tử 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
0 đầu tiên trong phần tử 

  

    Don’t Make Me Think by Steve Krug
    In Stock
    1
    $30.02
  

  

    A Project Guide to UX Design by Russ Unger & Carolyn Chandler
    In Stock
    2
    $52.94 [$26.47 × 2]
  

  

    Introducing HTML5 by Bruce Lawson & Remy Sharp
    Out of Stock
    1
    $22.23
  

  

    Bulletproof Web Design by Dan Cederholm
    In Stock
    1
    $30.17
  




9 sẽ nhận được một phần tử bên trái 

  ...



63. Vì tất cả các phần tử 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
0 xếp chồng lên nhau nên các đường viền của chúng cũng vậy, mang lại sự xuất hiện của một đường viền chắc chắn xung quanh mỗi phần tử
Cuối cùng, tất cả các phần tử 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
1 nhận được một 

  ...



78 màu xanh lam, và mọi phần tử 

  

    Don’t Make Me Think by Steve Krug
    In Stock
    1
    $30.02
  

  

    A Project Guide to UX Design by Russ Unger & Carolyn Chandler
    In Stock
    2
    $52.94 [$26.47 × 2]
  

  

    Introducing HTML5 by Bruce Lawson & Remy Sharp
    Out of Stock
    1
    $22.23
  

  

    Bulletproof Web Design by Dan Cederholm
    In Stock
    1
    $30.17
  




9 chẵn nhận được một 

  ...



78 màu xám bằng cách sử dụng bộ chọn lớp giả 

  ...



72

  


Căn chỉnh văn bản
Ngoài các đường viền và kẻ sọc của bảng, việc căn chỉnh văn bản trong các ô, cả theo chiều ngang và chiều dọc, đóng một vai trò không thể thiếu trong định dạng bảng. Tên, mô tả, v.v. thường được viết sang trái, trong khi số và các số liệu khác được viết sang phải. Thông tin khác, tùy thuộc vào ngữ cảnh của nó, có thể được căn giữa. Chúng ta có thể di chuyển văn bản theo chiều ngang bằng cách sử dụng thuộc tính 
1
2
3
4
5
6
7
8
9
01 trong CSS, như chúng ta đã đề cập trong Bài 6, “Làm việc với Typography. ”
Tuy nhiên, để căn chỉnh văn bản theo chiều dọc, thuộc tính 
1
2
3
4
5
6
7
8
9
02 được sử dụng. Thuộc tính 
1
2
3
4
5
6
7
8
9
02 chỉ hoạt động với các phần tử nội tuyến và ô bảng—nó sẽ không hoạt động đối với khối, khối nội tuyến hoặc bất kỳ cấp độ phần tử nào khác
Thuộc tính 
1
2
3
4
5
6
7
8
9
02 chấp nhận một số giá trị khác nhau; . Các giá trị này định vị văn bản theo chiều dọc liên quan đến ô của bảng, đối với các phần tử ô của bảng hoặc với phần tử cha gần nhất, đối với các phần tử cấp độ nội tuyến
Bằng cách sửa đổi HTML và CSS để bao gồm các thuộc tính 
1
2
3
4
5
6
7
8
9
01 và 
1
2
3
4
5
6
7
8
9
02, chúng tôi có thể làm sạch bố cục của bảng sách của mình. Lưu ý rằng dữ liệu trong bảng trở nên rõ ràng và dễ hiểu hơn nhiều
HTML
1
2
3
4
5
6
7
8
9
2
1
2
3
4
5
6
7
8
9
3               CSS
1
2
3
4
5
6
7
8
9
4
1
2
3
4
5
6
7
8
9
5
Căn chỉnh văn bản Demo
Xem Pen Aligning Text của Shay Howe [@shayhowe] trên CodePen
Bảng hoàn toàn theo kiểu
Cho đến nay bảng sách của chúng tôi trông khá tốt. Hãy tiến thêm một bước nữa bằng cách làm tròn một số góc và tạo kiểu cho một số văn bản hơn một chút
HTML
1
2
3
4
5
6
7
8
9
6
1
2
3
4
5
6
7
8
9
7               CSS
1
2
3
4
5
6
7
8
9
8
1
2
3
4
5
6
7
8
9
9
Bảng hoàn toàn theo kiểu
Xem Bảng được tạo kiểu hoàn toàn bằng bút của Shay Howe [@shayhowe] trên CodePen
Trong thực tế
Bây giờ chúng ta đã biết cách tạo và tạo kiểu bảng, hãy kết thúc trang cuối cùng còn lại của trang web Hội nghị Phong cách của chúng ta, lịch biểu
  1. Chúng tôi sẽ bắt đầu trang Lịch trình của mình bằng cách mở lịch trình. html và thêm phần tử 
    1
2
3
4
5
6
7
8
9
    10 với giá trị thuộc tính lớp là 
    1
2
3
4
5
    0, giống như chúng ta đã làm với tất cả các trang con khác. Trong phần tử 
    1
2
3
4
5
6
7
8
9
    10 mới này, hãy thêm một phần tử 
    1
2
3
4
5
6
7
8
9
    13 với giá trị thuộc tính lớp là 
    1
2
3
4
5
6
7
8
9
    14
    
    ...
  
    ...
  
    
  
    
  
    

    

    0_______11_______1
    Với các thành phần và lớp này, chúng tôi đã tạo một phần mới của trang có 
    
  ...

    

    78 màu trắng và 
    1
2
3
4
5
6
7
8
9
    16 dọc, đồng thời chúng tôi đã căn giữa nội dung của mình trên trang. Điều khác biệt ở đây so với tất cả các trang con khác là giá trị thuộc tính lớp 
    1
2
3
4
5
6
7
8
9
    14 thay cho giá trị thuộc tính lớp 
    1
2
3
4
5
6
7
8
9
    18 trên phần tử 
    1
2
3
4
5
6
7
8
9
    13. Vì chúng tôi không sử dụng bất kỳ lớp dựa trên 
    ItemAvailabilityQtyPrice
    
  
    
    
    
    
    
  
    
  
    
    Don’t Make Me Think by Steve Krug
    In Stock
    1
    $30.02
  
    
  
    
    A Project Guide to UX Design by Russ Unger & Carolyn Chandler
    In Stock
    2
    $52.94 [$26.47 × 2]
  
    
  
    
    Introducing HTML5 by Bruce Lawson & Remy Sharp
    Out of Stock
    1
    $22.23
  
    
  
    
    Bulletproof Web Design by Dan Cederholm
    In Stock
    1
    $30.17
  
    

    

    9 nào nên chúng tôi sẽ bỏ qua giá trị thuộc tính lớp 
    1
2
3
4
5
6
7
8
9
    18 để ủng hộ giá trị thuộc tính lớp 
    1
2
3
4
5
6
7
8
9
    14
  2. Trong phần mới, chúng tôi sẽ thêm ba bảng, một bảng cho mỗi ngày của hội nghị. Các bảng sẽ hiển thị các sự kiện của mỗi ngày bằng cách sử dụng ba cột và nhiều hàng, đồng thời sẽ bao gồm phần đầu bảng và phần thân bảng
    Để bắt đầu, hãy phác thảo cấu trúc của bảng đầu tiên, bao gồm các phần tử 
    
  
    
    Don’t Make Me Think by Steve Krug
    In Stock
    1
    $30.02
  
    
  
    
    A Project Guide to UX Design by Russ Unger & Carolyn Chandler
    In Stock
    2
    $52.94 [$26.47 × 2]
  
    
  
    
    Introducing HTML5 by Bruce Lawson & Remy Sharp
    Out of Stock
    1
    $22.23
  
    
  
    
    Bulletproof Web Design by Dan Cederholm
    In Stock
    1
    $30.17
  
    

    

    8, 
    
  ...

    

    01 và 
    
  ...

    

    02
    
    ...
  
    ...
  
    
  
    
  
    

    

    2_______11_______3
  3. Hiện tại, mặc dù bảng đầu tiên của chúng tôi không chứa bất kỳ dữ liệu nào, nhưng nó có một số kiểu được áp dụng cho nó. Cụ thể, thiết lập lại mà chúng tôi đã thêm lại trong Bài 1 để giảm bớt tất cả các kiểu trình duyệt mặc định đã thêm thuộc tính 
    
  ...

    

    26 với giá trị 
    
  ...

    

    36 và thuộc tính 
    
  ...

    

    27 với giá trị 
    
  ...

    

    82 vào bảng. Chúng tôi muốn những phong cách này, vì vậy chúng tôi sẽ để chúng một mình; 
    Trong phần mới của chúng tôi về các kiểu dành riêng cho trang Lịch trình [sẽ xuất hiện ngay bên dưới các kiểu dành cho trang Diễn giả], hãy đặt các phần tử 
    
  
    
    Don’t Make Me Think by Steve Krug
    In Stock
    1
    $30.02
  
    
  
    
    A Project Guide to UX Design by Russ Unger & Carolyn Chandler
    In Stock
    2
    $52.94 [$26.47 × 2]
  
    
  
    
    Introducing HTML5 by Bruce Lawson & Remy Sharp
    Out of Stock
    1
    $22.23
  
    
  
    
    Bulletproof Web Design by Dan Cederholm
    In Stock
    1
    $30.17
  
    

    

    8 của chúng tôi để có một 
    1
2
3
4
5
6
7
8
9
    32 của 
    1
2
3
4
5
6
7
8
9
    33 và một 
    1
2
3
4
5
6
7
8
9
    34 dưới cùng của 
    1
2
3
4
5
6
7
8
9
    35 pixel
    Sau đó, sử dụng bộ chọn lớp giả 
    
  ...

    

    67 để xác định phần tử 
    
  
    
    Don’t Make Me Think by Steve Krug
    In Stock
    1
    $30.02
  
    
  
    
    A Project Guide to UX Design by Russ Unger & Carolyn Chandler
    In Stock
    2
    $52.94 [$26.47 × 2]
  
    
  
    
    Introducing HTML5 by Bruce Lawson & Remy Sharp
    Out of Stock
    1
    $22.23
  
    
  
    
    Bulletproof Web Design by Dan Cederholm
    In Stock
    1
    $30.17
  
    

    

    8 cuối cùng trong phần, hãy đặt phần dưới cùng của nó là 
    1
2
3
4
5
6
7
8
9
    34 thành 
    
  ...

    

    82 pixel. Làm như vậy sẽ ngăn bảng này xung đột với phần dưới cùng của ____10_______16 thuộc phần tử ____10_______10 với giá trị thuộc tính lớp là ____28_______0
    Cho đến nay, phần mới trong tệp 
    1
2
3
4
5
6
7
8
9
    30 của chúng tôi trông như thế này
    
  ...

    

    6
    
    ...
  
    ...
  
    
  
    
  
    

    

    5
  4. Bây giờ, hãy thêm một số dữ liệu vào bảng của chúng tôi. Chúng ta sẽ bắt đầu với ngày đầu tiên của hội nghị, ngày hội thảo vào ngày 24 tháng 8
    Trong phần tử 
    
  ...

    

    01 của bảng, hãy thêm phần tử 
    
  
    
    Don’t Make Me Think by Steve Krug
    In Stock
    1
    $30.02
  
    
  
    
    A Project Guide to UX Design by Russ Unger & Carolyn Chandler
    In Stock
    2
    $52.94 [$26.47 × 2]
  
    
  
    
    Introducing HTML5 by Bruce Lawson & Remy Sharp
    Out of Stock
    1
    $22.23
  
    
  
    
    Bulletproof Web Design by Dan Cederholm
    In Stock
    1
    $30.17
  
    

    

    9. Ô đầu tiên trong hàng sẽ là một phần tử 
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
    1 ghi chú trọng tâm của ngày. “Hội thảo” cho ngày cụ thể này. Vì phần tử 
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
    1 là tiêu đề của hàng nên chúng tôi cũng sẽ thêm thuộc tính 
    ItemAvailabilityQtyPrice
    
  
    
    
    
    
    
  
    
  
    
    Don’t Make Me Think by Steve Krug
    In Stock
    1
    $30.02
  
    
  
    
    A Project Guide to UX Design by Russ Unger & Carolyn Chandler
    In Stock
    2
    $52.94 [$26.47 × 2]
  
    
  
    
    Introducing HTML5 by Bruce Lawson & Remy Sharp
    Out of Stock
    1
    $22.23
  
    
  
    
    Bulletproof Web Design by Dan Cederholm
    In Stock
    1
    $30.17
  
    

    

    7 với giá trị là 
    1
2
3
4
5
    0 vào phần tử đó
    Sau phần tử 
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
    1 là phần tử 
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
    0 với ngày, “ngày 24 tháng 8” trong trường hợp này. Bây giờ, thông thường chúng ta sẽ có ba cột, cột đầu tiên là tiêu đề bảng xác định thời gian trong ngày và hai cột thứ hai là các ô bảng thông thường xác định người nói trong thời gian nhất định đó. Vì hàng này không có hai loa riêng biệt nên chúng tôi sẽ muốn thêm thuộc tính 
    
  ...

    

    19 có giá trị là 
    
  ...

    

    31 vào phần tử 
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
    0, buộc nó phải trải rộng trên hai cột
    Mã của chúng tôi cho bảng bây giờ trông như thế này
    
    ...
  
    ...
  
    
  
    
  
    

    

    6_______11_______7
  5. Bên trong phần tử 
    
  ...

    

    02, hãy điền vào các hoạt động trong ngày. Chúng ta sẽ bắt đầu bằng cách thêm một phần tử 
    
  
    
    Don’t Make Me Think by Steve Krug
    In Stock
    1
    $30.02
  
    
  
    
    A Project Guide to UX Design by Russ Unger & Carolyn Chandler
    In Stock
    2
    $52.94 [$26.47 × 2]
  
    
  
    
    Introducing HTML5 by Bruce Lawson & Remy Sharp
    Out of Stock
    1
    $22.23
  
    
  
    
    Bulletproof Web Design by Dan Cederholm
    In Stock
    1
    $30.17
  
    

    

    9 với một phần tử 
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
    1 và một phần tử 
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
    0 ngay bên trong hàng
    Trên phần tử 
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
    1 và tất cả các phần tử 
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
    1 tiếp theo, chúng tôi sẽ thêm thuộc tính 
    ItemAvailabilityQtyPrice
    
  
    
    
    
    
    
  
    
  
    
    Don’t Make Me Think by Steve Krug
    In Stock
    1
    $30.02
  
    
  
    
    A Project Guide to UX Design by Russ Unger & Carolyn Chandler
    In Stock
    2
    $52.94 [$26.47 × 2]
  
    
  
    
    Introducing HTML5 by Bruce Lawson & Remy Sharp
    Out of Stock
    1
    $22.23
  
    
  
    
    Bulletproof Web Design by Dan Cederholm
    In Stock
    1
    $30.17
  
    

    

    7 với giá trị là 
    1
2
3
4
5
    0 để xác định theo ngữ nghĩa phần tử này làm tiêu đề cho hàng. Sau đó, trong phần tử 
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
    1, hãy thêm phần tử 
    1
2
3
4
5
6
7
8
9
    64 hiển thị thời gian của hoạt động đầu tiên trong ngày, “8. 30 giờ sáng” trong trường hợp này. Chúng tôi cũng sẽ bao gồm thuộc tính 
    1
2
3
4
5
6
7
8
9
    65 trên phần tử 
    1
2
3
4
5
6
7
8
9
    64 với giá trị ghi thời gian tính bằng giờ, phút và giây, 
    1
2
3
4
5
6
7
8
9
    67
    Trong phần tử 
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
    0 theo sau phần tử 
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
    1, chúng tôi sẽ bao gồm tên hoạt động [vì không có bất kỳ người nói nào vào thời điểm này], trong trường hợp này là "Đăng ký". Vì chỉ có một hoạt động tại thời điểm này nên chúng tôi cũng sẽ bao gồm thuộc tính 
    
  ...

    

    19 với giá trị là 2 trên phần tử 
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
    0
    Nói chung, mã cho bảng đầu tiên của chúng tôi trông như thế này
    1
2
3
4
5
6
7
8
9
    0____11_______9
  6. Đối với hàng thứ hai trong phần tử 
    
  ...

    

    02, hãy thêm phần tử 
    
  
    
    Don’t Make Me Think by Steve Krug
    In Stock
    1
    $30.02
  
    
  
    
    A Project Guide to UX Design by Russ Unger & Carolyn Chandler
    In Stock
    2
    $52.94 [$26.47 × 2]
  
    
  
    
    Introducing HTML5 by Bruce Lawson & Remy Sharp
    Out of Stock
    1
    $22.23
  
    
  
    
    Bulletproof Web Design by Dan Cederholm
    In Stock
    1
    $30.17
  
    

    

    9 ngay bên dưới hàng trước đó của chúng ta. Sau đó, hãy thêm phần tử 
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
    1 với thuộc tính 
    ItemAvailabilityQtyPrice
    
  
    
    
    
    
    
  
    
  
    
    Don’t Make Me Think by Steve Krug
    In Stock
    1
    $30.02
  
    
  
    
    A Project Guide to UX Design by Russ Unger & Carolyn Chandler
    In Stock
    2
    $52.94 [$26.47 × 2]
  
    
  
    
    Introducing HTML5 by Bruce Lawson & Remy Sharp
    Out of Stock
    1
    $22.23
  
    
  
    
    Bulletproof Web Design by Dan Cederholm
    In Stock
    1
    $30.17
  
    

    

    7 có giá trị là 
    1
2
3
4
5
    0 và thêm một lần nữa phần tử 
    1
2
3
4
5
6
7
8
9
    64 với thời gian thích hợp và giá trị thuộc tính 
    1
2
3
4
5
6
7
8
9
    65 trong phần tử 
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
    1 đó
    Sau phần tử 
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
    1, hãy thêm hai phần tử 
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
    0 cho hai diễn giả đang trình bày tại thời điểm đó. Trực tiếp bên trong mỗi phần tử 
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
    0, chúng tôi sẽ thêm một phần tử 
    1
2
3
4
5
6
7
8
9
    83, phần tử này sẽ liên kết trở lại vị trí của người phát biểu đó trên trang Người phát biểu. Hãy nhớ rằng, chúng tôi đã thêm các thuộc tính 
    Design and Front-End Development Books
  ...

    
  
    

    8 với tên của mỗi người nói vào các phần tử gốc của mỗi người nói. Sử dụng giá trị thuộc tính 
    Design and Front-End Development Books
  ...

    
  
    

    8 đứng trước tên tệp 
    1
2
3
4
5
6
7
8
9
    86 và dấu thăng/dấu thăng, 
    1
2
3
4
5
6
7
8
9
    87, chúng ta có thể liên kết trực tiếp đến mô tả bài nói và tiểu sử của diễn giả đó trên trang Diễn giả
    
  
    

    Trong phần tử 
    1
2
3
4
5
6
7
8
9
    83, chúng tôi sẽ bao gồm phần tử 
    1
2
3
4
5
6
7
8
9
    89 với tên của diễn giả theo sau là tiêu đề bài nói chuyện
    Mã cho hai hội thảo đầu tiên trông như thế này
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
    0_______14_______1
  7. Từ đây, chúng tôi có thể lặp lại mô hình này cho từng hoạt động và diễn giả để hoàn thành bàn đầu tiên của chúng tôi và sau đó thêm hai bàn tiếp theo trong hai ngày thứ hai của hội nghị
    Trong khi thực hiện việc này, hãy nhớ rằng đầu bảng sẽ luôn bao gồm đầu đề bảng ghi chú các sự kiện trong ngày và một ô của bảng kéo dài hai cột hiển thị ngày.
    Sau đó, trong nội dung của mỗi bảng, mỗi hàng sẽ có tiêu đề bảng hiển thị thời gian trong ngày. Sau tiêu đề bảng sẽ là một hoạt động, một diễn giả hoặc nhiều diễn giả. Các hoạt động không có người thuyết trình sẽ nằm trong một phần tử 
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
    0 kéo dài hai cột. Nếu chỉ có một diễn giả trình bày tại một thời điểm nhất định, thì diễn giả đó sẽ nằm trong một phần tử 
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
    0 duy nhất kéo dài hai cột, các phần tử 
    1
2
3
4
5
6
7
8
9
    83 và 
    1
2
3
4
5
6
7
8
9
    89 và tất cả
    Nếu có hai người nói trong một thời gian nhất định thì mỗi người nói sẽ cư trú trong phần tử 
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
    0 của riêng mình, giống như trước đây
    Mã đầy đủ cho cả ba bảng có thể được tìm thấy ở phần cuối của bài tập này. Để tham khảo, bảng cho ngày đầu tiên, bao gồm bữa trưa và thêm hai diễn giả, trông như thế này
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
    2_______14_______3
  8. Bây giờ các bảng của chúng ta đang hình thành, đã đến lúc thêm một chút phong cách cho chúng. Hãy bắt đầu bằng cách thêm một số phong cách chung cho các phần tử 
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
    1 và 
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
    0. Đối với cả hai phần tử 
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
    1 và 
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
    0, hãy thêm một phần dưới cùng của 
    1
2
3
4
5
6
7
8
9
    16 của 
    
    ...
  
    ...
  
    
  
    
  
    

    

    00 pixel và căn chỉnh theo chiều dọc của 
    1
2
3
4
5
6
7
8
9
    05. Đối với các phần tử 
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
    1 cụ thể, hãy thêm một 
    1
2
3
4
5
6
7
8
9
    16 bên phải của 
    
    ...
  
    ...
  
    
  
    
  
    

    

    04 pixel, căn chỉnh văn bản của 
    
    ...
  
    ...
  
    
  
    
  
    

    

    05 và một 
    1
2
3
4
5
6
7
8
9
    32 của 
    
    ...
  
    ...
  
    
  
    
  
    

    

    07. Sau đó, đối với các phần tử 
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
    0, hãy thêm một 
    1
2
3
4
5
6
7
8
9
    32 của 
    
    ...
  
    ...
  
    
  
    
  
    

    

    10
    Bên dưới các kiểu bảng và lịch biểu hiện có của chúng tôi, mã của chúng tôi sẽ trông như thế này
    
  ...

    

    6
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
    5
  9. Tiếp theo, hãy tạo kiểu cho đầu bảng và các phần tử trong đầu bảng. Chúng tôi sẽ chỉ đặt một 
    
    ...
  
    ...
  
    
  
    
  
    

    

    11 của 
    1
2
3
4
5
6
7
8
9
    35 pixel trên phần tử 
    
  ...

    

    01 và một 
    
    ...
  
    ...
  
    
  
    
  
    

    

    14 của 
    
    ...
  
    ...
  
    
  
    
  
    

    

    15 và một 
    
    ...
  
    ...
  
    
  
    
  
    

    

    16 của 
    
    ...
  
    ...
  
    
  
    
  
    

    

    17 pixel trên tất cả các phần tử 
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
    1 được lồng trong một phần tử 
    
  ...

    

    01. phong cách mới của chúng tôi bao gồm những điều sau đây
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
    6_______14_______7
  10. Đầu bảng trông đẹp, vì vậy hãy thêm một số kiểu cho thân bảng. Chúng ta sẽ bắt đầu với phần tử 
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
    1 được lồng trong phần tử 
    
  ...

    

    02. thay đổi 
    
    ...
  
    ...
  
    
  
    
  
    

    

    14 của họ, thêm một số phong cách dựa trên 
    
    ...
  
    ...
  
    
  
    
  
    

    

    23- và 
    
    ...
  
    ...
  
    
  
    
  
    

    

    24 và thêm một số 
    1
2
3
4
5
6
7
8
9
    16 hàng đầu
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
    6_______14_______9
  11. Chúng tôi cũng sẽ thêm một số kiểu vào phần tử 
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
    0 được lồng trong phần tử 
    
  ...

    

    02, bắt đầu bằng đường viền trên cùng và phần đệm. Chúng ta sẽ tạo kiểu cho các phần tử 
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
    0 chỉ kéo dài một cột bằng cách thêm 15 pixel của phần đệm bên phải vào những phần tạo thành cột bên trái và 15 pixel phần đệm bên trái vào những phần tạo thành cột bên phải. Làm như vậy sẽ đặt tổng cộng 30 pixel đệm giữa hai cột trong khi giữ cho mỗi ô có cùng kích thước. Chúng tôi không cần áp dụng bất kỳ phần đệm bên trái hoặc bên phải nào cho các phần tử 
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
    0 kéo dài hai cột
    Chúng tôi sẽ thêm tất cả các phần đệm ngang này bằng cách sử dụng bộ chọn lớp giả 
    
    ...
  
    ...
  
    
  
    
  
    

    

    30, 
    
    ...
  
    ...
  
    
  
    
  
    

    

    31 và 
    
    ...
  
    ...
  
    
  
    
  
    

    

    32. Các bộ chọn lớp giả này hoạt động rất giống với bộ chọn lớp giả 
    
  ...

    

    67 mà chúng ta đã sử dụng trước đây
    Bộ chọn lớp giả 
    
    ...
  
    ...
  
    
  
    
  
    

    

    30 sẽ chọn phần tử đầu tiên thuộc loại của nó trong phần tử cha. Trong trường hợp của chúng ta, bộ chọn 
    
    ...
  
    ...
  
    
  
    
  
    

    

    35 sẽ chọn phần tử 
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
    0 đầu tiên trong phần tử 
    
  
    
    Don’t Make Me Think by Steve Krug
    In Stock
    1
    $30.02
  
    
  
    
    A Project Guide to UX Design by Russ Unger & Carolyn Chandler
    In Stock
    2
    $52.94 [$26.47 × 2]
  
    
  
    
    Introducing HTML5 by Bruce Lawson & Remy Sharp
    Out of Stock
    1
    $22.23
  
    
  
    
    Bulletproof Web Design by Dan Cederholm
    In Stock
    1
    $30.17
  
    

    

    9. Sau đó, bộ chọn lớp giả 
    
    ...
  
    ...
  
    
  
    
  
    

    

    31 sẽ chọn phần tử cuối cùng của loại của nó trong phần tử cha
    Một lần nữa, trong trường hợp của chúng ta, bộ chọn 
    
    ...
  
    ...
  
    
  
    
  
    

    

    39 sẽ chọn phần tử 
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
    0 cuối cùng trong phần tử 
    
  
    
    Don’t Make Me Think by Steve Krug
    In Stock
    1
    $30.02
  
    
  
    
    A Project Guide to UX Design by Russ Unger & Carolyn Chandler
    In Stock
    2
    $52.94 [$26.47 × 2]
  
    
  
    
    Introducing HTML5 by Bruce Lawson & Remy Sharp
    Out of Stock
    1
    $22.23
  
    
  
    
    Bulletproof Web Design by Dan Cederholm
    In Stock
    1
    $30.17
  
    

    

    9. Cuối cùng, bộ chọn lớp giả 
    
    ...
  
    ...
  
    
  
    
  
    

    

    32 sẽ chọn một phần tử nếu đó là phần tử duy nhất thuộc loại của nó trong một phần tử cha. Ở đây, bộ chọn 
    
    ...
  
    ...
  
    
  
    
  
    

    

    43 sẽ chỉ chọn một phần tử 
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
    0 nếu nó là phần tử duy nhất 
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
    0 trong một phần tử 
    
  
    
    Don’t Make Me Think by Steve Krug
    In Stock
    1
    $30.02
  
    
  
    
    A Project Guide to UX Design by Russ Unger & Carolyn Chandler
    In Stock
    2
    $52.94 [$26.47 × 2]
  
    
  
    
    Introducing HTML5 by Bruce Lawson & Remy Sharp
    Out of Stock
    1
    $22.23
  
    
  
    
    Bulletproof Web Design by Dan Cederholm
    In Stock
    1
    $30.17
  
    

    

    9, chẳng hạn như khi phần tử 
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
    0 kéo dài hai cột
    Phong cách của chúng tôi hơi phức tạp, nhưng chúng linh hoạt trong việc giải quyết các nhu cầu của bảng của chúng tôi. Những phong cách mới này bao gồm những điều sau đây
    
    ...
  
    ...
  
    
  
    
  
    

    

    2_______0_______1
  12. Lịch trình của chúng tôi—và các bảng hiển thị nó—đang kết hợp với nhau. Hãy điều chỉnh một vài phong cách trên các yếu tố hiện có để làm sạch thiết kế. Chúng tôi sẽ bắt đầu bằng cách làm cho tất cả các liên kết trong bảng có màu xám trung bình. Nếu chúng ta chỉ nhắm mục tiêu vào các phần tử 
    1
2
3
4
5
6
7
8
9
    83 trong một bảng, các tiêu đề của chúng ta có tên người nói trong các liên kết sẽ vẫn có màu xanh lục, trong khi các tiêu đề của bài nói chuyện sẽ có màu xám, tạo ra sự tương phản đẹp mắt giữa hai phần tử đó.
    Trong khi chúng ta đang điều chỉnh phong cách của các mục nhập cho các bài nói chuyện, chúng ta cũng hãy loại bỏ phần tử 
    1
2
3
4
5
6
7
8
9
    34 dưới cùng trên phần tử 
    1
2
3
4
5
6
7
8
9
    89 trong bảng, để tên của người nói gần với chức danh của cô ấy hoặc anh ấy hơn. Chúng ta có thể triển khai các kiểu này bằng đoạn mã sau
    
  
    
    Don’t Make Me Think by Steve Krug
    In Stock
    1
    $30.02
  
    
  
    
    A Project Guide to UX Design by Russ Unger & Carolyn Chandler
    In Stock
    2
    $52.94 [$26.47 × 2]
  
    
  
    
    Introducing HTML5 by Bruce Lawson & Remy Sharp
    Out of Stock
    1
    $22.23
  
    
  
    
    Bulletproof Web Design by Dan Cederholm
    In Stock
    1
    $30.17
  
    

    

    2
    
  
    
    Don’t Make Me Think by Steve Krug
    In Stock
    1
    $30.02
  
    
  
    
    A Project Guide to UX Design by Russ Unger & Carolyn Chandler
    In Stock
    2
    $52.94 [$26.47 × 2]
  
    
  
    
    Introducing HTML5 by Bruce Lawson & Remy Sharp
    Out of Stock
    1
    $22.23
  
    
  
    
    Bulletproof Web Design by Dan Cederholm
    In Stock
    1
    $30.17
  
    

    

    3
  13. Cuối cùng, hãy tạo ra một số tương phản trực quan giữa các loại hoạt động khác nhau diễn ra trong ngày. Tất cả các cuộc đàm phán đều ổn với những thay đổi mới nhất của chúng tôi. Đối với tất cả các hoạt động khác, chẳng hạn như đăng ký, ăn trưa và nghỉ giải lao [nằm trong phần thân bảng] cũng như cho ngày [nằm trong tiêu đề bảng], hãy sử dụng màu xám tinh tế.
    Chúng tôi sẽ làm như vậy bằng cách tạo một lớp mới, 
    
    ...
  
    ...
  
    
  
    
  
    

    

    51 và gán một 
    
    ...
  
    ...
  
    
  
    
  
    

    

    14 của 
    
    ...
  
    ...
  
    
  
    
  
    

    

    53 cho nó
    1
2
3
4
    
  
    
    Don’t Make Me Think by Steve Krug
    In Stock
    1
    $30.02
  
    
  
    
    A Project Guide to UX Design by Russ Unger & Carolyn Chandler
    In Stock
    2
    $52.94 [$26.47 × 2]
  
    
  
    
    Introducing HTML5 by Bruce Lawson & Remy Sharp
    Out of Stock
    1
    $22.23
  
    
  
    
    Bulletproof Web Design by Dan Cederholm
    In Stock
    1
    $30.17
  
    

    

    5
    Sau khi lớp đã sẵn sàng, hãy thêm nó vào tất cả các phần tử 
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
    0 kéo dài hai cột và bao gồm ngày trong ngày hoặc một hoạt động được chỉ định—đăng ký, ăn trưa hoặc nghỉ giải lao. Nhìn lại bảng của chúng ta trong ngày đầu tiên, ngày hội thảo, HTML sẽ như thế này
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
    
  
    
    Don’t Make Me Think by Steve Krug
    In Stock
    1
    $30.02
  
    
  
    
    A Project Guide to UX Design by Russ Unger & Carolyn Chandler
    In Stock
    2
    $52.94 [$26.47 × 2]
  
    
  
    
    Introducing HTML5 by Bruce Lawson & Remy Sharp
    Out of Stock
    1
    $22.23
  
    
  
    
    Bulletproof Web Design by Dan Cederholm
    In Stock
    1
    $30.17
  
    

    

    7
Các bảng, bề ngoài có vẻ đơn giản, có thể khá phức tạp và đó là trường hợp của lịch trình Hội nghị Phong cách của chúng tôi. Tin tốt là lịch trình của chúng tôi hiện đã hoàn tất và nó trông rất tuyệt
Hình 11
Trang Lịch biểu, bao gồm nhiều bảng, cho Hội nghị Kiểu dáng
Demo và mã nguồn
Bên dưới, bạn có thể xem trang web Styles Conference ở trạng thái hiện tại, cũng như tải xuống mã nguồn cho trang web ở trạng thái hiện tại
Xem Trang web Styles Conference  hoặc Tải xuống Mã nguồn  [Tệp zip]
Tóm lược
Được rồi, bây giờ chúng ta đã biết cách sắp xếp ngữ nghĩa dữ liệu dạng bảng trong HTML đồng thời làm cho nó trực quan với CSS. Thảo luận về bảng là trở ngại lớn cuối cùng của chúng tôi trong việc học HTML và CSS và giờ đây chúng tôi đã chính thức hoàn thành trang web Hội nghị Phong cách của mình
Để xem xét, trong bài học này, chúng tôi đã đề cập đến những điều sau đây
  • Các cách tốt nhất để tạo bảng theo ngữ nghĩa
  • Cách làm cho các ô của bảng riêng lẻ trải rộng trên nhiều cột hoặc hàng
  • Các thành phần cấu trúc tạo nên các bảng
  • Các cách khác nhau để định kiểu đường viền trên bảng và cách các thuộc tính đường viền khác nhau ảnh hưởng đến hình thức của bảng
  • Cách căn chỉnh văn bản theo chiều dọc trong bảng
Chúng ta đã hoàn thành xuất sắc việc sử dụng tất cả các kỹ năng mới của mình và chúng ta đã tiến xa hơn rất nhiều so với một vài bài học trước đây. Hãy kết thúc bằng một nốt cao, kết thúc một số kết thúc lỏng lẻo và xem xét các cách để viết mã tốt nhất có thể của chúng tôi
 

			
Làm thế nào chúng ta có thể sử dụng HTML để hiển thị dữ liệu văn bản?

			
Thẻ HTML  Thẻ HTML  . Nó được sử dụng để chèn hoặc thêm dữ liệu trong mỗi ô. Trong văn bản thẻ 

		
			
Làm cách nào để lấy dữ liệu trong HTML?

			
Thuộc tính phương thức chỉ định cách gửi dữ liệu biểu mẫu [dữ liệu biểu mẫu được gửi đến trang được chỉ định trong thuộc tính hành động].  Dữ liệu biểu mẫu có thể được gửi dưới dạng biến URL [với method="get" ] hoặc dưới dạng giao dịch bài đăng HTTP [với method="post" ] . Ghi chú về NHẬN. Nối dữ liệu biểu mẫu vào URL theo cặp tên/giá trị.

Bài Viết Liên Quan

Pdf2htmlex cài mac
Dự đoán đại lý miễn phí NBA 2023
WordPress có cho phép viết mã không
Làm cách nào để chuyển đổi một chuỗi thành CamelCAse trong PHP?
Vòng cổ bạc bao nhiêu tiền?
Code html Contact Form 7
Toán tử nào sau đây được thêm vào trong php 7?
JavaScript di chuyển hình dạng
\n có phải là khoảng trắng trong Python không?
Buổi hòa nhạc ngày 14 tháng 1 năm 2023
Tiền tố chuỗi Python r
Heap tràn Python
Tiếng vang làm gì trong Laravel?
1 thùng lê Hàn Quốc bao nhiêu kg?
Làm cách nào để tạo một ứng dụng trò chuyện bằng PHP?
Không thể giải quyết các tiện ích nhập python
Làm cách nào để bật chế độ gỡ lỗi PHP?
Các khóa học BMCC Mùa đông 2023
Có bao nhiêu hàng và cột Excel?
Kiểu dữ liệu không gian trong MySQL là gì?

Toplist mới

#1
Top 9 review kem chống nắng cho bà bầu 2023
6 tháng trước
#2
Top 5 tiếng anh lớp 2 unit 7 trang 46 2023
6 tháng trước
#3
Top 10 tải: mẫu the nhân viên trên excel 2023
6 tháng trước
#4
Top 7 tuyển dụng nhân viên chốt đơn tại nhà 2023
6 tháng trước
#5
Top 7 mẫu nhà 2 tầng chữ l 100m2 mái bằng 2023
6 tháng trước
#6
Top 4 truyện ngắn về quê hương lớp 2 2023
6 tháng trước
#7
Top 6 sơ đồ bộ máy nhà nước thời hồ 2023
6 tháng trước
#8
Top 8 trước việc nhật đảo chính pháp, đảng ta có chủ trương gì mới 2023
6 tháng trước
#9
Top 7 dân số đông đã đem đến cho nước ta 2023
6 tháng trước

Bài mới nhất

Trường trung cấp nghề 19 thái bình năm 2024
Làm thế nào để lưu ứng dụng vào thẻ nhớ năm 2024
Máy bán card điện thoại truemoney bị lỗi năm 2024
Cơ chế giao vốn cho doanh nghiệp là gì năm 2024
Máy hít bâm của máy năng lương là gì năm 2024
Chiến tranh cục bộ dưới thời tổng thống nào năm 2024
Ngành disaster resilience and sustainable development là ngành gì năm 2024
187a lê văn lương nhà bè tp hcm năm 2024
Bãi nổi sông hồng có những loại cat nào năm 2024
Bài8 sgk toán 6 tập 2 trang 75 năm 2024

Chủ Đề

Toplist programming Địa Điểm Hay Hỏi Đáp Là gì Mẹo Hay Nghĩa của từ Học Tốt Công Nghệ Khỏe Đẹp bao nhiêu mẹo hay Top List Bao nhiêu Sản phẩm tốt Bài Tập Xây Đựng Ngôn ngữ đánh giá Tiếng anh Bài tập So Sánh Ở đâu So sánh Hướng dẫn Dịch bao nhieu Tại sao Đại học hướng dẫn Máy tính Thế nào Vì sao Bao lâu Khoa Học Hà Nội