Trong bài viết trước Taimienphi. vn đã giới thiệu cho bạn về thẻ img trong HTML. Trong bài viết tiếp theo bên dưới Taimienphi. vn sẽ giới thiệu tiếp cho bạn về bảng (table) trong HTML Trong HTML, table (table) verify by tag table. Tham khảo tiếp bài viết dưới đây của Taimienphi. vn để tìm hiểu chi tiết bảng (table) trong HTML Table (bảng) trong HTML 1. Table (bảng) trong HTML Như đã đề cập ở trên, bảng trong HTML được xác định bằng thẻ bảng Mỗi hàng trong bảng được xác định bằng thẻ tr. Bảng tiêu đề được xác định bằng thẻ thứ. Mặc định các bảng tiêu đề được in đậm và căn giữa. Dữ liệu / ô của bảng được xác định bằng thẻ td Ví dụ. ví dụ dưới đây bảng minh họa trong HTML Kết quả trả về có dạng như dưới đây Lưu ý. Các phần tử td là các phần tử chứa dữ liệu của bảng. Các phần tử này có thể chứa tất cả các loại phần tử HTML, văn bản, hình ảnh, danh sách,. 2. Thêm đường viền cho bảng trong HTML Để thiết lập đường viền cho bảng trong HTML, chúng ta sử dụng đường viền thuộc tính trong CSS Ví dụ. trong ví dụ dưới đây chúng ta sẽ thêm đường viền cho bảng trong HTML Kết quả trả về sau khi áp dụng thuộc tính rowspan để xác định 1 ô trong bảng mở rộng thêm bao nhiêu hàng có dạng như dưới đây Công tyLiên hệQuốc giaAlfreds FutterkisteMaria AndersĐứcTrung tâm thương mại MoctezumaFrancisco ChangMexicoErnst HandelRoland MendelÁoThương mại trên đảoHelen BennettVương quốc AnhHầm rượu vang Laughing BacchusYoshi TannamuriCanadaMagazzini Alimentari RiunitiGiovanni RovelliÝ Tự mình thử »
Xác định một bảng HTMLMột bảng trong HTML bao gồm các ô của bảng bên trong các hàng và cột Thí dụMột bảng HTML đơn giản
Công tyLiên hệQuốc giaAlfreds FutterkisteMaria AndersĐứcTrung tâm thương mại MoctezumaFrancisco ChangMexicoTự mình thử »
ô bảngMỗi ô của bảng được xác định bởi một và một thẻ Mọi thứ ở giữa và là nội dung của ô bảng Thí dụ
EmilTobiasLinusTự mình thử »Ghi chú. Một ô của bảng có thể chứa tất cả các loại phần tử HTML. văn bản, hình ảnh, danh sách, liên kết, bảng khác, v.v.
hàng bảngMỗi hàng của bảng bắt đầu bằng a và kết thúc bằng thẻ Thí dụ
EmilTobiasLinus161410Tự mình thử »Bạn có thể có bao nhiêu hàng tùy thích trong một bảng; Ghi chú. Đôi khi một hàng có thể có ít hoặc nhiều ô hơn hàng khác. Bạn sẽ tìm hiểu về điều đó trong một chương sau
Tiêu đề bảngĐôi khi bạn muốn các ô của mình là các ô tiêu đề của bảng. Trong những trường hợp đó, hãy sử dụng thẻ thay vì thẻ Table (hay còn gọi là bảng) thường được sử dụng trong HTML để sắp xếp và hiển thị dữ liệu. Chúng giúp chuyển thông tin đến người dùng của trang web một cách dễ dàng hơn Trong bài viết hôm nay, mình sẽ trình bày những kiến thức cơ bản về bảng trong HTML, bao gồm cách tạo bảng trong HTML, cách sử dụng các thẻ bắt buộc và kiểu CSS của bảng trong HTML >> Xem ngay Tài liệu Java Core giúp bạn “Nâng cấp” kỹ năng lập trình Khái niệm cơ bản về bảng trong HTMLTable is a data file has a structure is being sort by the rows and column. Bảng được sử dụng rộng rãi để trình bày dữ liệu và phân tích dữ liệu, và chúng được sử dụng thường xuyên trong sách, tạp chí khoa học và trang web HTML, viết tắt của Ngôn ngữ đánh dấu siêu văn bản, là một ngôn ngữ đánh dấu siêu văn bản được sử dụng để hướng dẫn các trình duyệt web cách chúng hiển thị các trang web. Phiên bản mới nhất của HTML (HTML5) đi kèm với sự hỗ trợ mạnh mẽ để hiển thị dữ liệu bằng cách sử dụng các bảng phức tạp hoặc đơn giản Khi chúng tôi xác định một bảng phần tử, chúng tôi sẽ sử dụng các thẻ sau - . định nghĩa một bảng trong HTML
. định nghĩa từng hàng trong bảng. định nghĩa từng hàng trong bảng. định nghĩa từng tiêu đề trong bảng. định nghĩa từng bảng dữ liệu hoặc ô trong bảng Lưu ý: tất cả các phần tử | được in đậm và căn giữa và các phần tử văn bản | được căn trái theo mặc định.
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Mark</td>
<td>Ruffallo</td>
<td>54</td>
</tr>
<tr>
<td>Reese</td>
<td>Witherspoon</td>
<td>48</td>
</tr>
</table> Code language: HTML, XML (xml) FirstnameLastnameAgeMarkRuffallo54ReeseWitherspoon48Có nhiều phần tử HTML khác có thể được sử dụng để tùy chỉnh hình thức và cấu trúc của bảng. Chúng bao gồm , | , , mà chúng ta sẽ thảo luận sau.Điều quan trọng cần lưu ý là các bảng phải có chức năng. Điều đó có nghĩa là dữ liệu hoặc thông tin được hiển thị trong bảng của bạn phải dễ đọc và dễ hiểu. Nếu bạn không có ý tưởng về cách định dạng bảng của mình, bạn có thể phác thảo trên giấy. Điều này sẽ giúp bạn cấu hình dung và sắp xếp bảng trước khi viết mã Chú thích bảng và tiêu đềHầu hết các bảng cần một số loại văn bản mô tả mục đích của bảng. Chúng ta có thể sử dụng để giải quyết vấn đề này. Điều này sẽ giúp người dùng dễ sử dụng hơn rất nhiều.<caption>Neonates Immunization Table</caption>
Code language: HTML, XML (xml)
Phần tử xác định một tập hợp các hàng đại diện cho đầu các cột của bảng.Thẻ đánh dấu một ô làm tiêu đề bảng và nó thường ở đầu hàng hoặc cột. Thẻ | luôn được sử dụng trong thẻ | và chúng có một số kiểu mặc định để giúp chúng nổi bật.<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Sex</th>
<th scope="col">Weight(kg)</th>
<th scope="col">Immunization Doses</th>
</tr>
</thead> Code language: HTML, XML (xml)
bảng tóm tắtPhần tử là phần tử tùy chọn xác định một tập hợp các hàng tóm tắt các cột của bảng. Nó thường nằm sau thẻ .<tfoot>
<th>Mean Weight (kg)</th>
<td>2.9</td>
</tfoot> Code language: HTML, XML (xml)
Thêm đường bao vào một ô trong bảngTrước đây, các đường viền có thể được thêm vào bảng trong HTML của bạn bằng cách sử dụng đường viền thuộc tính, lấy một số tự động tính bằng pixel <table border='1'>
<tr>
<th >Jerry Holmes</th>
<td>M</td>
<td>5</td>
<td>0</td>
<td>3.5</td>
</tr>
</table> Code language: HTML, XML (xml) Jerry HolmesM503. 5Hành vi này không được chấp nhận trong HTML5 do đường viền CSS thuộc tính. Với sự thay đổi này, bây giờ người ta có thể thêm đường viền trên bảng hoặc cho các phần tử riêng lẻ. Nếu bạn không muốn các ô của mình có các đường viền riêng biệt, bạn nên đặt thuộc tính border-collapse. sự sụp đổ. Nếu không, các ô liền kề sẽ có các đường viền riêng biệt table {
border-collapse: collapse;
}
td, th {
border: 1px solid rgba(0, 0, 0, 0.5);
} Code language: CSS (css) Jerry HolmesM503. 5Trong phần tiếp theo, mình sẽ chỉ cho bạn cách tạo bảng với bố cục phức tạp, trong đó các ô của bảng có thể kéo dài nhiều hàng hoặc một số cột Kéo dài nhiều hàng và cộtTrong bảng chúng ta đang xây dựng, hãy lưu ý rằng ô “Mean Weight” kéo dài nhiều hơn một ô và “Liều lượng Chủng ngừa” có vẻ giống như một “Super Heading” với các tiêu đề phụ (được lấy và sang trái) Hành vi này có thể thực hiện được với các thuộc tính colspan và rowspan. Cả hai thuộc tính đều chấp nhận một giá trị số, là số hàng hoặc cột bạn muốn kéo dài <thead>
<tr>
<th rowspan="2">Name</th>
<th rowspan="2">Sex</th>
<th colspan="2">Immunization Doses</th>
<th rowspan="2">Weight(kg)</th>
<tr>
<th>Taken</th>
<th>Left</th>
</tr>
</tr>
</thead> Code language: HTML, XML (xml)
Thuộc tính rowspan cho phép nội dung của một ô trong bảng trải dài nhiều hàng. Trong đoạn mã ở trên, chúng tôi đã tạo các tiêu đề 'Tên', 'Giới tính' và 'Trọng lượng' kéo dài hai hàng colspan tạo cho một ô duy nhất có chiều rộng lớn hơn một cột hoặc các ô dữ liệu. Sử dụng thuộc tính colspan, chúng ta tạo tiêu đề 'Liều lượng Chủng ngừa' kéo dài hai cột (và một hàng duy nhất). Sau đó, bằng cách thêm các tiêu đề phụ vào hàng tiếp theo, chúng sẽ tự động được thêm vào trong “Liều lượng Chủng ngừa” Create table type with CSSMột số thuộc tính tạo kiểu bảng không được hỗ trợ trong HTML5; . Một số thuộc tính này bao gồm align . sử dụng CSS margin-left , margin-right hoặc <caption>Neonates Immunization Table</caption>
Code language: HTML, XML (xml) 0<caption>Neonates Immunization Table</caption>
Code language: HTML, XML (xml) 1. CSS thuộc tính tương tự <caption>Neonates Immunization Table</caption>
Code language: HTML, XML (xml) 2<caption>Neonates Immunization Table</caption>
Code language: HTML, XML (xml) 3. đường viền thuộc tính CSS tương tự<caption>Neonates Immunization Table</caption>
Code language: HTML, XML (xml) 4. chiều rộng thuộc tính CSS tương tự
Cellspacing và cellpadding có thể đạt được bằng cách sử dụng border-spacing và padding tương ứng. border-spacing không có bất kỳ ảnh hưởng nào nếu border-collapse. sự sụp đổ Màu sắc và các thuộc tính khác của văn bản trong ô có thể được sửa đổi bằng cách chỉ xác định giá trị của các thuộc tính có liên quan, chẳng hạn như màu sắc, cỡ chữ và họ phông chữ Dưới đây là mã của bảng mục trong HTML ngày hôm nay Kết luậnTrên đây là những điều chúng ta cần biết để bắt đầu khai thác các bảng trong HTML. Bạn có thể lấy những gì bạn đã học ở đây và kiến thức HTML và CSS hiện có của bạn, để bắt đầu thiết kế và phát triển khai thác các bảng chức năng và đẹp mắt | |
|