Bảng CSS HTML

Question

Khi bạn đang xây dựng một dự án cần thể hiện dữ liệu một cách trực quan, bạn sẽ cần một cách tốt để hiển thị thông tin sao cho dễ đọc và dễ hiểu

Nội dung chính Show

Bảng trong HTML là gì?
Các thẻ bảng HTML phổ biến
Cú pháp bảng HTML
Cách thêm tiêu đề bảng trong HTML
Cách thêm chú thích vào bảng
Cú pháp phụ đề
Cách sử dụng thuộc tính phạm vi trong bảng HTML
Cú pháp phạm vi
Cách sử dụng kéo dài ô trong bảng HTML
Cách thêm Đầu trang, Nội dung và Chân trang của Bảng trong Bảng HTML
Cách tạo kiểu bảng HTML bằng CSS
Khi nào nên sử dụng bảng
Gói (lại
Làm cách nào để tạo bảng trong CSS HTML?
Bạn có thể sử dụng CSS để tạo kiểu cho bảng HTML không?
Làm cách nào để sử dụng lớp CSS trong bảng HTML?
Bạn có thể tạo một bảng trong CSS không?

Bây giờ, tùy thuộc vào loại dữ liệu, bạn có thể chọn giữa các phương pháp biểu diễn khác nhau bằng cách sử dụng các phần tử HTML

Trong hầu hết các trường hợp, bảng thuận tiện hơn để hiển thị số lượng lớn dữ liệu có cấu trúc độc đáo. Đó là lý do tại sao, trong bài viết này, chúng ta sẽ học cách sử dụng các bảng trong HTML và sau đó là cách tạo kiểu cho chúng.

Nhưng, điều đầu tiên trước tiên – bảng trong HTML là gì?

Bảng trong HTML là gì?

Bảng là một biểu diễn dữ liệu được sắp xếp theo hàng và cột. Thực sự, nó giống một bảng tính hơn. Trong HTML, với sự trợ giúp của bảng, bạn có thể sắp xếp dữ liệu như hình ảnh, văn bản, liên kết, v.v. vào các hàng và cột của ô

Việc sử dụng bảng trong web gần đây đã trở nên phổ biến hơn do các thẻ bảng HTML tuyệt vời giúp tạo và thiết kế chúng dễ dàng hơn

Để tạo một bảng trong HTML, bạn sẽ cần sử dụng các thẻ. Điều quan trọng nhất là thẻ

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Email Address</th>
  </tr>
  <tr>
   <td>Hillary</td>
   <td>Nyakundi</td>
   <td>[email protected]</td>
  </tr>
  <tr>
    <td>Lary</td>
    <td>Mak</td>
    <td>[email protected]</td>
  </tr>
</table>

3 là nơi chứa chính của bảng. Nó cho thấy nơi bảng sẽ bắt đầu và nơi nó kết thúc

Các thẻ bảng HTML phổ biến

Các thẻ khác bao gồm

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Email Address</th>
  </tr>
  <tr>
   <td>Hillary</td>
   <td>Nyakundi</td>
   <td>[email protected]</td>
  </tr>
  <tr>
    <td>Lary</td>
    <td>Mak</td>
    <td>[email protected]</td>
  </tr>
</table>

4 - đại diện cho các hàng

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Email Address</th>
  </tr>
  <tr>
   <td>Hillary</td>
   <td>Nyakundi</td>
   <td>[email protected]</td>
  </tr>
  <tr>
    <td>Lary</td>
    <td>Mak</td>
    <td>[email protected]</td>
  </tr>
</table>

0 - được sử dụng để tạo các ô dữ liệu

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Email Address</th>
  </tr>
  <tr>
   <td>Hillary</td>
   <td>Nyakundi</td>
   <td>[email protected]</td>
  </tr>
  <tr>
    <td>Lary</td>
    <td>Mak</td>
    <td>[email protected]</td>
  </tr>
</table>

1 - được sử dụng để thêm tiêu đề bảng

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Email Address</th>
  </tr>
  <tr>
   <td>Hillary</td>
   <td>Nyakundi</td>
   <td>[email protected]</td>
  </tr>
  <tr>
    <td>Lary</td>
    <td>Mak</td>
    <td>[email protected]</td>
  </tr>
</table>

2 - dùng để chèn chú thích

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Email Address</th>
  </tr>
  <tr>
   <td>Hillary</td>
   <td>Nyakundi</td>
   <td>[email protected]</td>
  </tr>
  <tr>
    <td>Lary</td>
    <td>Mak</td>
    <td>[email protected]</td>
  </tr>
</table>

3 - thêm tiêu đề riêng vào bảng

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Email Address</th>
  </tr>
  <tr>
   <td>Hillary</td>
   <td>Nyakundi</td>
   <td>[email protected]</td>
  </tr>
  <tr>
    <td>Lary</td>
    <td>Mak</td>
    <td>[email protected]</td>
  </tr>
</table>

4 - hiển thị nội dung chính của bảng

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Email Address</th>
  </tr>
  <tr>
   <td>Hillary</td>
   <td>Nyakundi</td>
   <td>[email protected]</td>
  </tr>
  <tr>
    <td>Lary</td>
    <td>Mak</td>
    <td>[email protected]</td>
  </tr>
</table>

5 - tạo chân trang riêng cho bảng

Cú pháp bảng HTML

<table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  </tr>
  <tr>
    <td>Cell 4</td>
    <td>Cell 5</td>
    <td>Cell 6</td>
  </tr>
</table>

Ô 1 Ô 2 Ô 3 Ô 4 Ô 5 Ô 6

Bây giờ bạn đã hiểu bảng HTML là gì và cách bạn có thể tạo bảng đó, hãy tiếp tục và xem cách chúng ta có thể sử dụng các thẻ này để tạo bảng có nhiều tính năng hơn

Cách thêm tiêu đề bảng trong HTML

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Email Address</th>
  </tr>
  <tr>
   <td>Hillary</td>
   <td>Nyakundi</td>
   <td>[email protected]</td>
  </tr>
  <tr>
    <td>Lary</td>
    <td>Mak</td>
    <td>[email protected]</td>
  </tr>
</table>

1 được sử dụng để thêm tiêu đề vào bảng. Trong các thiết kế cơ bản, tiêu đề bảng sẽ luôn ở hàng trên cùng, nghĩa là chúng ta sẽ khai báo

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Email Address</th>
  </tr>
  <tr>
   <td>Hillary</td>
   <td>Nyakundi</td>
   <td>[email protected]</td>
  </tr>
  <tr>
    <td>Lary</td>
    <td>Mak</td>
    <td>[email protected]</td>
  </tr>
</table>

1 ở hàng đầu tiên của bảng, sau đó là dữ liệu thực tế trong bảng. Theo mặc định, văn bản được chuyển vào Tiêu đề được căn giữa và In đậm

Một ví dụ với việc sử dụng

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Email Address</th>
  </tr>
  <tr>
   <td>Hillary</td>
   <td>Nyakundi</td>
   <td>[email protected]</td>
  </tr>
  <tr>
    <td>Lary</td>
    <td>Mak</td>
    <td>[email protected]</td>
  </tr>
</table>

1

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Email Address</th>
  </tr>
  <tr>
   <td>Hillary</td>
   <td>Nyakundi</td>
   <td>[email protected]</td>
  </tr>
  <tr>
    <td>Lary</td>
    <td>Mak</td>
    <td>[email protected]</td>
  </tr>
</table>

Tên HọĐịa chỉ emailHillaryNyakunditables@mail. comLaryMakdeveloper@mail. com

Từ ví dụ trên, chúng ta có thể biết cột nào chứa thông tin nào. Điều này được thực hiện với việc sử dụng thẻ

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Email Address</th>
  </tr>
  <tr>
   <td>Hillary</td>
   <td>Nyakundi</td>
   <td>[email protected]</td>
  </tr>
  <tr>
    <td>Lary</td>
    <td>Mak</td>
    <td>[email protected]</td>
  </tr>
</table>

1

Cách thêm chú thích vào bảng

Công dụng chính của việc thêm chú thích vào bảng là để cung cấp mô tả về dữ liệu được trình bày trong bảng. Chú thích có thể được đặt ở đầu bảng hoặc cuối bảng và theo mặc định, chú thích sẽ luôn được đặt ở giữa

Để chèn chú thích vào bảng, hãy sử dụng thẻ

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Email Address</th>
  </tr>
  <tr>
   <td>Hillary</td>
   <td>Nyakundi</td>
   <td>[email protected]</td>
  </tr>
  <tr>
    <td>Lary</td>
    <td>Mak</td>
    <td>[email protected]</td>
  </tr>
</table>

2

Cú pháp phụ đề

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Email Address</th>
  </tr>
  <tr>
   <td>Hillary</td>
   <td>Nyakundi</td>
   <td>[email protected]</td>
  </tr>
  <tr>
    <td>Lary</td>
    <td>Mak</td>
    <td>[email protected]</td>
  </tr>
</table>

3

Một ví dụ với việc sử dụng

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Email Address</th>
  </tr>
  <tr>
   <td>Hillary</td>
   <td>Nyakundi</td>
   <td>[email protected]</td>
  </tr>
  <tr>
    <td>Lary</td>
    <td>Mak</td>
    <td>[email protected]</td>
  </tr>
</table>

2

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Email Address</th>
  </tr>
  <tr>
   <td>Hillary</td>
   <td>Nyakundi</td>
   <td>[email protected]</td>
  </tr>
  <tr>
    <td>Lary</td>
    <td>Mak</td>
    <td>[email protected]</td>
  </tr>
</table>

5Tài nguyên mã hóa miễn phí Trang web Kênh Youtube Ứng dụng di độngTrại mã hóa miễn phíTrại mã hóa miễn phíEnkiW3Trường họcAcademindProgramming HeroKhan AcademyThe Coding TrainSolo learn

Cách sử dụng thuộc tính phạm vi trong bảng HTML

Thuộc tính phạm vi được sử dụng để xác định xem một tiêu đề cụ thể dành cho cột, hàng hay nhóm của cả hai. Tôi biết định nghĩa có thể khó hiểu nhưng hãy chờ đã - với sự trợ giúp của một ví dụ, bạn sẽ hiểu rõ hơn về định nghĩa đó

Mục đích chính của phần tử phạm vi là hiển thị dữ liệu đích để người dùng không phải dựa vào các giả định. Thuộc tính được khai báo trong ô tiêu đề

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Email Address</th>
  </tr>
  <tr>
   <td>Hillary</td>
   <td>Nyakundi</td>
   <td>[email protected]</td>
  </tr>
  <tr>
    <td>Lary</td>
    <td>Mak</td>
    <td>[email protected]</td>
  </tr>
</table>

1 và nó nhận các giá trị

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Email Address</th>
  </tr>
  <tr>
   <td>Hillary</td>
   <td>Nyakundi</td>
   <td>[email protected]</td>
  </tr>
  <tr>
    <td>Lary</td>
    <td>Mak</td>
    <td>[email protected]</td>
  </tr>
</table>

33,

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Email Address</th>
  </tr>
  <tr>
   <td>Hillary</td>
   <td>Nyakundi</td>
   <td>[email protected]</td>
  </tr>
  <tr>
    <td>Lary</td>
    <td>Mak</td>
    <td>[email protected]</td>
  </tr>
</table>

34,

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Email Address</th>
  </tr>
  <tr>
   <td>Hillary</td>
   <td>Nyakundi</td>
   <td>[email protected]</td>
  </tr>
  <tr>
    <td>Lary</td>
    <td>Mak</td>
    <td>[email protected]</td>
  </tr>
</table>

35 và

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Email Address</th>
  </tr>
  <tr>
   <td>Hillary</td>
   <td>Nyakundi</td>
   <td>[email protected]</td>
  </tr>
  <tr>
    <td>Lary</td>
    <td>Mak</td>
    <td>[email protected]</td>
  </tr>
</table>

36

Các giá trị

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Email Address</th>
  </tr>
  <tr>
   <td>Hillary</td>
   <td>Nyakundi</td>
   <td>[email protected]</td>
  </tr>
  <tr>
    <td>Lary</td>
    <td>Mak</td>
    <td>[email protected]</td>
  </tr>
</table>

33 và

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Email Address</th>
  </tr>
  <tr>
   <td>Hillary</td>
   <td>Nyakundi</td>
   <td>[email protected]</td>
  </tr>
  <tr>
    <td>Lary</td>
    <td>Mak</td>
    <td>[email protected]</td>
  </tr>
</table>

34 chỉ ra rằng ô tiêu đề đang cung cấp thông tin cho các hàng hoặc cột tương ứng

Cú pháp phạm vi

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Email Address</th>
  </tr>
  <tr>
   <td>Hillary</td>
   <td>Nyakundi</td>
   <td>[email protected]</td>
  </tr>
  <tr>
    <td>Lary</td>
    <td>Mak</td>
    <td>[email protected]</td>
  </tr>
</table>

3

Một ví dụ với việc sử dụng

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Email Address</th>
  </tr>
  <tr>
   <td>Hillary</td>
   <td>Nyakundi</td>
   <td>[email protected]</td>
  </tr>
  <tr>
    <td>Lary</td>
    <td>Mak</td>
    <td>[email protected]</td>
  </tr>
</table>

39

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Email Address</th>
  </tr>
  <tr>
   <td>Hillary</td>
   <td>Nyakundi</td>
   <td>[email protected]</td>
  </tr>
  <tr>
    <td>Lary</td>
    <td>Mak</td>
    <td>[email protected]</td>
  </tr>
</table>

5Học kỳLớp1Tháng 1 - Tháng 4Tín chỉ2Tháng 5 - Tháng 8Vượt qua2Tháng 9 - Tháng 12Phân biệt

Điều mà thuộc tính

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Email Address</th>
  </tr>
  <tr>
   <td>Hillary</td>
   <td>Nyakundi</td>
   <td>[email protected]</td>
  </tr>
  <tr>
    <td>Lary</td>
    <td>Mak</td>
    <td>[email protected]</td>
  </tr>
</table>

50 đã làm là nó cho biết ô tiêu đề thuộc về cột, hàng hay nhóm của cả hai

Trong trường hợp này, các tiêu đề thuộc về cột vì đó là những gì chúng tôi đặt trong mã. Bạn có thể chơi xung quanh bằng cách thay đổi thuộc tính để xem các hành vi khác nhau

Cách sử dụng kéo dài ô trong bảng HTML

Có lẽ bạn đã bắt gặp các ô trải dài trên hai hoặc nhiều cột hoặc hàng trong một bảng. Đó gọi là kéo dài tế bào

Nếu bạn đã làm việc trong các chương trình như MS office hoặc Excel, có lẽ bạn đã sử dụng chức năng này bằng cách tô sáng các ô và nhấp vào lệnh, thế là xong. Bạn có nó

Các tính năng tương tự có thể được áp dụng trong bảng HTML bằng cách sử dụng hai thuộc tính ô,

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Email Address</th>
  </tr>
  <tr>
   <td>Hillary</td>
   <td>Nyakundi</td>
   <td>[email protected]</td>
  </tr>
  <tr>
    <td>Lary</td>
    <td>Mak</td>
    <td>[email protected]</td>
  </tr>
</table>

51 cho trải dài theo chiều ngang và

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Email Address</th>
  </tr>
  <tr>
   <td>Hillary</td>
   <td>Nyakundi</td>
   <td>[email protected]</td>
  </tr>
  <tr>
    <td>Lary</td>
    <td>Mak</td>
    <td>[email protected]</td>
  </tr>
</table>

52 cho trải dài theo chiều dọc. Hai thuộc tính được gán các số lớn hơn 0, hiển thị số lượng ô bạn muốn mở rộng

Một ví dụ với việc sử dụng

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Email Address</th>
  </tr>
  <tr>
   <td>Hillary</td>
   <td>Nyakundi</td>
   <td>[email protected]</td>
  </tr>
  <tr>
    <td>Lary</td>
    <td>Mak</td>
    <td>[email protected]</td>
  </tr>
</table>

53

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Email Address</th>
  </tr>
  <tr>
   <td>Hillary</td>
   <td>Nyakundi</td>
   <td>[email protected]</td>
  </tr>
  <tr>
    <td>Lary</td>
    <td>Mak</td>
    <td>[email protected]</td>
  </tr>
</table>

0TênChủ đềMarksHillaryWeb nâng cao75Hệ thống điều hành60LaryWeb nâng cao80Hệ thống điều hành75Tổng trung bình. 72. 5

Trong ví dụ trên, chúng ta có một ô bao gồm 2 ô trong các hàng và 3 ô trong cột như được chỉ ra. Chúng tôi đã quản lý để áp dụng nhịp theo cả chiều dọc và chiều ngang

Khi sử dụng các thuộc tính

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Email Address</th>
  </tr>
  <tr>
   <td>Hillary</td>
   <td>Nyakundi</td>
   <td>[email protected]</td>
  </tr>
  <tr>
    <td>Lary</td>
    <td>Mak</td>
    <td>[email protected]</td>
  </tr>
</table>

51 và

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Email Address</th>
  </tr>
  <tr>
   <td>Hillary</td>
   <td>Nyakundi</td>
   <td>[email protected]</td>
  </tr>
  <tr>
    <td>Lary</td>
    <td>Mak</td>
    <td>[email protected]</td>
  </tr>
</table>

52, đảm bảo khai báo các giá trị được gán chính xác để tránh chồng chéo các ô

Cách thêm Đầu trang, Nội dung và Chân trang của Bảng trong Bảng HTML

Giống như cách một trang web hoặc bất kỳ tài liệu nào khác có ba phần chính - đầu trang, nội dung và chân trang - bảng cũng vậy

Trong một bảng, chúng được chia bằng cách sử dụng các thuộc tính cụ thể là

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Email Address</th>
  </tr>
  <tr>
   <td>Hillary</td>
   <td>Nyakundi</td>
   <td>[email protected]</td>
  </tr>
  <tr>
    <td>Lary</td>
    <td>Mak</td>
    <td>[email protected]</td>
  </tr>
</table>

3 - cung cấp một haeder riêng cho bảng

________ 04 - chứa nội dung chính của bảng

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Email Address</th>
  </tr>
  <tr>
   <td>Hillary</td>
   <td>Nyakundi</td>
   <td>[email protected]</td>
  </tr>
  <tr>
    <td>Lary</td>
    <td>Mak</td>
    <td>[email protected]</td>
  </tr>
</table>

5 - tạo chân trang riêng cho bảng

Một ví dụ sử dụng

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Email Address</th>
  </tr>
  <tr>
   <td>Hillary</td>
   <td>Nyakundi</td>
   <td>[email protected]</td>
  </tr>
  <tr>
    <td>Lary</td>
    <td>Mak</td>
    <td>[email protected]</td>
  </tr>
</table>

3,

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Email Address</th>
  </tr>
  <tr>
   <td>Hillary</td>
   <td>Nyakundi</td>
   <td>[email protected]</td>
  </tr>
  <tr>
    <td>Lary</td>
    <td>Mak</td>
    <td>[email protected]</td>
  </tr>
</table>

4 &

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Email Address</th>
  </tr>
  <tr>
   <td>Hillary</td>
   <td>Nyakundi</td>
   <td>[email protected]</td>
  </tr>
  <tr>
    <td>Lary</td>
    <td>Mak</td>
    <td>[email protected]</td>
  </tr>
</table>

5

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Email Address</th>
  </tr>
  <tr>
   <td>Hillary</td>
   <td>Nyakundi</td>
   <td>[email protected]</td>
  </tr>
  <tr>
    <td>Lary</td>
    <td>Mak</td>
    <td>[email protected]</td>
  </tr>
</table>

9Tháng 11Tháng 11Doanh sốLợi nhuậnDoanh thuDoanh thu$200,00$50,00$300,000$70,000Tháng 11 năng suất cao hơn

Trong ví dụ trên, tiêu đề được biểu thị bằng tên của các tháng, phần có số liệu về cả doanh thu và lợi nhuận đại diện cho phần thân bảng và cuối cùng là phần có câu lệnh đại diện cho chân trang của bảng của chúng ta

Một điều quan trọng khác cần lưu ý là một bảng có thể có nhiều bộ phận cơ thể. Trong trường hợp như thế này, mỗi nội dung sẽ nhóm các hàng có liên quan với nhau

Cách tạo kiểu bảng HTML bằng CSS

Mặc dù ngày nay các bảng được sử dụng rộng rãi, nhưng rất hiếm khi tìm thấy một bảng nào không được tạo kiểu. Hầu hết trong số họ sử dụng các dạng phong cách khác nhau, cho dù đó là màu sắc, phông chữ, làm nổi bật các giá trị quan trọng, v.v.

Kiểu dáng giúp làm cho bảng trông chuyên nghiệp và bắt mắt. Rốt cuộc, bạn sẽ không muốn người đọc của mình nhìn chằm chằm vào dữ liệu được chia cho chỉ một dòng duy nhất

Không giống như tạo kiểu với các ngôn ngữ hoặc công cụ khác, trong HTML, bạn sẽ cần lấy một tệp bổ sung có phần mở rộng

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Email Address</th>
  </tr>
  <tr>
   <td>Hillary</td>
   <td>Nyakundi</td>
   <td>[email protected]</td>
  </tr>
  <tr>
    <td>Lary</td>
    <td>Mak</td>
    <td>[email protected]</td>
  </tr>
</table>

32 được tạo để bạn thêm kiểu và liên kết tệp đó với tệp HTML của mình

Bên dưới, được đính kèm là một sân chơi mã với một ví dụ về bảng được tạo kiểu. Vui lòng chơi xung quanh nó để xem kiểu dáng khác nhau sẽ ảnh hưởng đến màn hình như thế nào

Sân chơi mã ở trên, chúng tôi đã tạo một bảng và tạo kiểu cho nó bằng một số thuộc tính mà chúng tôi đã đề cập trong bài viết

Chúng tôi đã tạo kiểu cho nó bằng tệp CSS, nơi chúng tôi đã thêm màu và đường viền vào bảng của mình để làm cho nó dễ đọc và đẹp hơn. Bảng cũng có tiêu đề cố định để bạn có thể cuộn qua lượng lớn dữ liệu mà vẫn thấy tiêu đề của một cột cụ thể

Vì vậy, chúng ta đã biết bảng là gì, chúng ta đã tạo một vài trong số chúng và thậm chí đã đi trước một bước và áp dụng kiểu dáng

Nhưng có kiến thức mà không biết áp dụng cũng chẳng ích gì. Vì vậy, như đã nói, bạn cần sử dụng bảng ở đâu hoặc khi nào trong thiết kế của mình?

Khi nào nên sử dụng bảng

Có nhiều tình huống mà các bảng có thể hữu ích khi phát triển các dự án của bạn

Bạn có thể sử dụng bảng khi muốn so sánh và đối chiếu dữ liệu với các đặc điểm chung như sự khác biệt giữa A và B hoặc điểm số của đội X so với đội Y
Bạn cũng có thể sử dụng một cái nếu bạn muốn đưa ra cái nhìn tổng quan về dữ liệu số. Một ví dụ điển hình về điều này là khi bạn đang cố gắng thể hiện điểm của học sinh hoặc thậm chí là điểm của các đội như bảng EPL
Và một bảng có thể giúp người đọc nhanh chóng tìm thấy thông tin cụ thể được trình bày một cách rõ ràng. Ví dụ: nếu bạn đang xem qua một danh sách dài tên, một bảng có thể được sử dụng để chia nhỏ danh sách giúp người đọc dễ dàng

Gói (lại

Bảng là một cách tuyệt vời để biểu diễn dữ liệu dạng bảng và bạn có thể tạo chúng bằng cách sử dụng các thành phần HTML cơ bản như

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Email Address</th>
  </tr>
  <tr>
   <td>Hillary</td>
   <td>Nyakundi</td>
   <td>[email protected]</td>
  </tr>
  <tr>
    <td>Lary</td>
    <td>Mak</td>
    <td>[email protected]</td>
  </tr>
</table>

3,

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Email Address</th>
  </tr>
  <tr>
   <td>Hillary</td>
   <td>Nyakundi</td>
   <td>[email protected]</td>
  </tr>
  <tr>
    <td>Lary</td>
    <td>Mak</td>
    <td>[email protected]</td>
  </tr>
</table>

34,

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Email Address</th>
  </tr>
  <tr>
   <td>Hillary</td>
   <td>Nyakundi</td>
   <td>[email protected]</td>
  </tr>
  <tr>
    <td>Lary</td>
    <td>Mak</td>
    <td>[email protected]</td>
  </tr>
</table>

0

Và bạn cũng có thể thêm một số kiểu dáng để làm cho chúng trông đẹp mắt và trình bày dữ liệu rõ ràng với sự trợ giúp của tệp CSS

Trước khi chúng ta kết thúc, hãy làm một nhiệm vụ nữa

Tạo một bảng sử dụng những gì chúng ta đã học để tóm tắt những gì chúng ta đã trình bày trong bài viết ngày hôm nay. Sau đó so sánh thiết kế của bạn với sân chơi mã được ghim của tôi bên dưới

QUẢNG CÁO

Hillary Nyakundi

Nhà phát triển đang phát triển. Python & Mã nguồn mở ❤. Tech Enthusiasts & Writer ✍ "Mỗi ngày là một ngày học tập"

Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

Làm cách nào để tạo bảng trong CSS HTML?

Bạn có thể tạo bảng bằng cách sử dụng phần tử . Bên trong phần tử

Bạn có thể sử dụng CSS để tạo kiểu cho bảng HTML không?

CSS cung cấp một số thuộc tính để tạo kiểu bảng . Các thuộc tính này cho phép bạn—trong số những thứ khác—tách các ô trong bảng, chỉ định viền bảng và chỉ định chiều rộng và chiều cao của bảng.

Làm cách nào để sử dụng lớp CSS trong bảng HTML?

Để tạo kiểu bảng bằng CSS, trước tiên bạn nên làm quen với cú pháp bảng HTML. Chỉ định khoảng cách giữa các đường viền liền kề và nội dung xung quanh bảng. Lấy các giá trị riêng biệt và thu gọn. Được sử dụng để cho biết liệu các đường viền liền kề có nên được hợp nhất (thu gọn) hay không (tách biệt)

Bạn có thể tạo một bảng trong CSS không?

Có. Chỉ sử dụng CSS, chúng tôi có thể đạt được điều này nhờ một thuộc tính đặc biệt được cung cấp . Kiểu dáng này không được sử dụng thường xuyên và do đó nhiều nhà phát triển có thể không biết về kiểu dáng tương tự. Chúng tôi có thể sử dụng thuộc tính hiển thị và cung cấp chiều rộng cho tất cả các div của chúng tôi để tự động làm cho chúng trông giống như một bảng.

programming html