Tự học html: Tài liệu HTML

Tự học html: Tài liệu HTML

Chuẩn bị cho HTML

Bây giờ chúng ta đã tìm hiểu về một số phần tử HTML phổ biến nhất, đã đến lúc tìm hiểu cách thiết lập một tệp HTML.

Tệp HTML yêu cầu các yếu tố nhất định để thiết lập tài liệu đúng cách. Chúng tôi có thể cho các trình duyệt web biết rằng chúng tôi đang sử dụng HTML bằng cách bắt đầu tài liệu của chúng tôi với một khai báo loại tài liệu .

Khai báo có dạng như sau:

<!DOCTYPE html>

Khai báo này là một hướng dẫn và nó phải là dòng mã đầu tiên trong tài liệu HTML của bạn. Nó cho trình duyệt biết loại tài liệu mong đợi, cùng với phiên bản HTML nào đang được sử dụng trong tài liệu. Còn bây giờ, trình duyệt sẽ giả định một cách chính xác rằng html tại <!DOCTYPE html>là đề cập đến HTML5, vì nó là tiêu chuẩn hiện hành.

Tuy nhiên, trong tương lai, một tiêu chuẩn mới sẽ ghi đè HTML5. Để đảm bảo rằng tài liệu của bạn mãi mãi được diễn giải chính xác, hãy luôn đưa <!DOCTYPE html>vào phần đầu của tài liệu HTML của bạn.

Cuối cùng, mã HTML luôn được lưu trong tệp có đuôi .html .

Thẻ <html>

Các <!DOCTYPE html>tuyên bố cung cấp trình duyệt với hai mẩu thông tin (các loại tài liệu và phiên bản HTML để mong đợi), nhưng nó không thực sự thêm bất kỳ cấu trúc HTML hoặc nội dung.

Để tạo cấu trúc và nội dung HTML, chúng ta phải thêm <html>thẻ mở và thẻ đóng sau khi khai báo <!DOCTYPE html>:

<!DOCTYPE html>

<html>

</html>

Bất kỳ thứ gì giữa thẻ mở <html>và </html>thẻ đóng sẽ được hiểu là mã HTML. Nếu không có các thẻ này, có thể trình duyệt có thể diễn giải sai mã HTML của bạn.

Cho đến nay, bạn đã thực hiện hai điều để thiết lập tệp đúng cách:

Đã khai báo với trình duyệt rằng mã của bạn là HTML với <!DOCTYPE html>

Đã thêm phần tử HTML ( <html>) sẽ chứa phần còn lại của mã của bạn.

Các bài viết liên quan:

Head

Chúng tôi đã thêm các yếu tố này vào trang Brown Bears mà bạn đã tạo trước đó. Bây giờ, hãy cung cấp cho trình duyệt một số thông tin về chính trang đó. Chúng ta có thể làm điều này bằng cách thêm một <head>phần tử.

Nhớ <body>thẻ? Phần <head>tử là một phần của phép ẩn dụ HTML này. Nó vượt lên trên <body>yếu tố của chúng tôi .

Phần <head>tử chứa siêu dữ liệu cho một trang web. Siêu dữ liệu là thông tin về trang không được hiển thị trực tiếp trên trang web. Không giống như thông tin bên trong <body>thẻ, siêu dữ liệu trong phần đầu là thông tin về chính trang đó. Bạn sẽ thấy một ví dụ về điều này trong bài tập tiếp theo.

Các thẻ head mở và đóng thường xuất hiện dưới dạng mục đầu tiên sau thẻ HTML đầu tiên của bạn:

<head>

</head>

Tiêu đề trang

Phần tử có thể <head>chứa loại siêu dữ liệu nào về trang web ?

Nếu bạn điều hướng đến danh mục websitehcm và nhìn vào đầu trình duyệt, bạn sẽ nhận thấy các từ Full Catalog Courses & Tutorials | Codecademy, đó là tiêu đề của trang web.

Tab của trình duyệt hiển thị tiêu đề được chỉ định trong <title>thẻ. Các <title>thẻ luôn là bên trong <head>.

Tiêu đề xuất hiện ở đâu?

Làm tốt lắm! Thật không may, bảng điều khiển trình duyệt được sử dụng bởi môi trường websitehcm không có thanh tiêu đề, vì vậy tiêu đề “Gấu nâu” bạn đã viết trong bài tập trước sẽ không được hiển thị. Tuy nhiên, bên ngoài môi trường Codecademy, tiêu đề của bạn sẽ xuất hiện như được mô tả trong sơ đồ bên phải.

Cho đến nay, chúng tôi đã tìm hiểu về:

<!DOCTYPE html>, khai báo chỉ định phiên bản HTML cho trình duyệt

Các <html>thẻ bao gồm tất cả mã HTML của bạn

Các <head>thẻ có chứa siêu dữ liệu của một trang web, chẳng hạn như của nó<title>

Tiếp theo, bạn sẽ tìm hiểu về các loại nguyên tố mới đi vào bên trong cơ thể.

Liên kết với các trang web khác

Một trong những khía cạnh mạnh mẽ của HTML (và Internet), là khả năng liên kết đến các trang web khác.

Bạn có thể thêm liên kết vào trang web bằng cách thêm phần tử neo<a> và bao gồm văn bản của liên kết ở giữa thẻ mở và thẻ đóng.

<a>This Is A Link To Wikipedia</a>

Đợi tí! Về mặt kỹ thuật, liên kết trong ví dụ trên là không đầy đủ. Chính xác thì liên kết ở trên sẽ hoạt động như thế nào nếu không có URL dẫn người dùng đến trang Wikipedia thực sự?

Phần tử neo trong ví dụ trên không hoàn chỉnh nếu không có href thuộc tính. Thuộc tính này là viết tắt của tham chiếu siêu kết nối và được sử dụng để liên kết đến một đường dẫn hoặc địa chỉ đến nơi chứa tệp (cho dù tệp đó nằm trên máy tính của bạn hay một vị trí khác). Các đường dẫn được cung cấp cho href thuộc tính thường là URL.

<a href=”https://www.wikipedia.org/”>This Is A Link To Wikipedia</a>

Trong ví dụ trên, href thuộc tính đã được đặt thành giá trị của URL 

https://www.wikipedia.org/.

Ví dụ bây giờ cho thấy việc sử dụng đúng một phần tử neo.

Khi đọc tài liệu kỹ thuật, bạn có thể bắt gặp thuật ngữ siêu liên kết . Đừng lo lắng, đây chỉ đơn giản là thuật ngữ kỹ thuật cho liên kết. Các thuật ngữ này thường được sử dụng thay thế cho nhau.

Mở các liên kết trong một cửa sổ mới

Bạn đã bao giờ nhấp vào một liên kết và quan sát thấy trang web kết quả mở ra trong một cửa sổ trình duyệt mới chưa? Nếu vậy, bạn có thể cảm ơn thuộc tính <a>của phần tử target.

Các target thuộc tính quy định cụ thể như thế nào một liên kết sẽ mở ra.

Có thể một hoặc nhiều liên kết trên trang web của bạn liên kết đến một trang web hoàn toàn khác. Trong trường hợp đó, bạn có thể muốn người dùng đọc trang web được liên kết, nhưng hy vọng rằng họ quay lại trang web của bạn. Đây chính xác là lúc target thuộc tính hữu ích!

Để liên kết mở trong cửa sổ mới, target thuộc tính yêu cầu giá trị là _blank. Các target thuộc tính có thể được thêm trực tiếp vào thẻ mở của phần tử anchor text, giống như các href thuộc tính.

<a href=”https://en.wikipedia.org/wiki/Brown_bear” target=”_blank”>The Brown Bear</a>

Trong ví dụ trên, thiết lập targetthuộc tính để “_blank”hướng dẫn trình duyệt mở trang Wikipedia có liên quan trong một cửa sổ mới.

Trong bài tập này, chúng tôi đã sử dụng thuật ngữ “mở trong một cửa sổ mới”. Có khả năng là bạn đang sử dụng một trình duyệt hiện đại để mở các trang web trong các tab mới , thay vì các cửa sổ mới. Trước khi trình duyệt có tab ra đời, các cửa sổ trình duyệt bổ sung phải được mở để xem nhiều trang web hơn. Các target=”_blank”thuộc tính, khi được sử dụng trong các trình duyệt hiện đại, sẽ mở ra trang web mới trong một tab mới.

Liên kết đến Trang tương đối

Cho đến nay, bạn đã học cách liên kết đến các trang web bên ngoài. Nhiều trang web cũng liên kết đến các trang web nội bộ như Trang chủ, Giới thiệu và Liên hệ.

Trước khi chúng ta tìm hiểu cách liên kết giữa các trang nội bộ, hãy thiết lập nơi lưu trữ các tệp của chúng ta. Khi tạo các trang web tĩnh nhiều trang, các nhà phát triển web thường lưu trữ các tệp HTML trong thư mục gốc , hoặc một thư mục chính nơi lưu trữ tất cả các tệp cho dự án. Khi quy mô của các dự án bạn tạo tăng lên, bạn có thể sử dụng các thư mục bổ sung trong thư mục dự án chính để tổ chức mã của mình.

  • project-folder/
  • |—— about.html
  • |—— contact.html
  • |—— index.html

Liên kết theo ý muốn

Bạn có thể đã truy cập các trang web không phải tất cả các liên kết đều được tạo thành từ văn bản. Có thể các liên kết bạn nhấp vào là hình ảnh hoặc một số dạng nội dung khác.

Rất may, HTML cho phép bạn biến gần như bất kỳ phần tử nào thành một liên kết bằng cách bao bọc phần tử đó bằng một phần tử neo. 

Liên kết đến cùng một trang

Tại thời điểm này, chúng tôi có tất cả nội dung chúng tôi muốn trên trang của mình. Vì chúng ta có quá nhiều nội dung, nên tất cả nội dung đó không phù hợp trên màn hình. Làm cách nào để giúp người dùng chuyển đến các phần khác nhau trên trang của chúng tôi dễ dàng hơn?

Khi người dùng truy cập trang web của chúng tôi, chúng tôi muốn họ có thể nhấp vào một liên kết và để trang tự động cuộn đến một phần cụ thể.

Để liên kết đến một mục tiêu trên cùng một trang, chúng tôi phải cung cấp cho mục tiêu một id , như sau:

<p id=”top”>This is the top of the page!</p>

<h1 id=”bottom”>This is the bottom! </h1>

Khoảng trắng

Phần còn lại của bài học này sẽ tập trung vào một số công cụ mà các nhà phát triển sử dụng để làm cho mã dễ hiểu hơn.

Khi mã trong tệp HTML phát triển, việc theo dõi các phần tử có liên quan với nhau như thế nào ngày càng trở nên khó khăn. Các lập trình viên sử dụng hai công cụ để hình dung mối quan hệ giữa các phần tử: khoảng trắng và thụt đầu dòng .

Cả hai công cụ đều tận dụng lợi thế của thực tế là vị trí của các phần tử trong trình duyệt độc lập với lượng khoảng trắng hoặc thụt lề trong tệp index.html .

Thụt lề

Công cụ thứ hai mà các nhà phát triển web sử dụng để làm cho cấu trúc của mã dễ đọc hơn là thụt lề . Các khoảng trắng được chèn bằng cách sử dụng các thanh space và tab trên bàn phím của bạn.

Bình luận

Các tệp HTML cũng cho phép bạn thêm nhận xét vào mã của mình.

Nhận xét bắt đầu bằng <!–và kết thúc bằng –>. Bất kỳ ký tự nào ở giữa sẽ bị trình duyệt của bạn bỏ qua.

<!– This is a comment that the browser will not display. –>

Bao gồm các nhận xét trong mã của bạn sẽ hữu ích vì nhiều lý do:

Chúng giúp bạn (và những người khác) hiểu mã của bạn nếu bạn quyết định quay lại và xem lại nó vào một ngày sau đó.

Chúng cho phép bạn thử nghiệm với mã mới mà không cần phải xóa mã cũ.

Thẻ HTML

Bây giờ bạn đã biết tất cả các yếu tố cơ bản và cách thiết lập bạn cần để cấu trúc một trang HTML và thêm các loại nội dung khác nhau. Với sự trợ giúp của CSS, bạn sẽ sớm tạo ra những trang web đẹp!

Trong khi một số thẻ có mục đích rất cụ thể, chẳng hạn như thẻ hình ảnh và video, hầu hết các thẻ được sử dụng để mô tả nội dung mà chúng bao quanh, giúp chúng tôi sửa đổi và tạo kiểu cho nội dung của mình sau này. Có vẻ như vô hạn các thẻ để sử dụng (nhiều hơn những gì chúng tôi đã dạy). Việc biết khi nào nên sử dụng từng cái dựa trên cách bạn muốn mô tả nội dung HTML của mình. Các thẻ mô tả, được lựa chọn tốt là một chìa khóa để phát triển web chất lượng cao. Bạn có thể tìm thấy danh sách đầy đủ các thẻ HTML có sẵn trong tài liệu của Mozilla .

Hãy xem lại những gì bạn đã học được trong bài học này:

  • Các <!DOCTYPE html>tuyên bố nên luôn luôn có dòng đầu tiên của mã trong file HTML của bạn. Điều này cho phép trình duyệt biết phiên bản HTML mong đợi.
  • Phần <html>tử sẽ chứa tất cả mã HTML của bạn.
  • Thông tin về trang web, như tiêu đề, thuộc <head>về trang.
  • Bạn có thể thêm tiêu đề vào trang web của mình bằng cách sử dụng <title>phần tử bên trong phần đầu.
  • Tiêu đề của trang web xuất hiện trong tab của trình duyệt.
  • Thẻ neo ( <a>) được sử dụng để liên kết đến các trang nội bộ, trang bên ngoài hoặc nội dung trên cùng một trang.
  • Bạn có thể tạo các phần trên một trang web và chuyển đến chúng bằng cách sử dụng <a>các thẻ và thêm ids vào các phần tử mà bạn muốn chuyển đến.
  • Khoảng trắng giữa các phần tử HTML giúp làm cho mã dễ đọc hơn trong khi không thay đổi cách các phần tử xuất hiện trong trình duyệt.
  • Thụt lề cũng giúp làm cho mã dễ đọc hơn. Nó làm cho mối quan hệ cha mẹ-con cái hiển thị
  • Những ý kiến bằng văn bản trong HTML bằng cách sử dụng cú pháp sau: <!– comment –>.

Hãy dành chút thời gian để chỉnh sửa không gian làm việc bạn đã tạo và quan sát cách nó thay đổi!

BẢNG HTML

Phần tử hàng trong bảng <tr>, được sử dụng để thêm hàng vào bảng trước khi thêm dữ liệu bảng và tiêu đề bảng.

Giới thiệu về bảng

Có rất nhiều trang web trên Internet hiển thị thông tin như giá cổ phiếu, tỷ số thể thao, dữ liệu hóa đơn, v.v. Dữ liệu này có bản chất là bảng tự nhiên, có nghĩa là bảng thường là cách tốt nhất để trình bày dữ liệu.

Trong phần này của khóa học, chúng ta sẽ học cách sử dụng <table>phần tử HTML để trình bày thông tin trong bảng hai chiều cho người dùng.

Hãy xem mã trong phần thân của index.html . Bạn thấy mã mới nào?

Khám phá với mã trong tệp này và thử sửa đổi một cái gì đó một cách ngẫu nhiên. Chuyện gì đã xảy ra?

Tạo bảng

Trước khi hiển thị dữ liệu, trước tiên chúng ta phải tạo bảng sẽ chứa dữ liệu bằng cách sử dụng <table>phần tử.

<table>

</table>

Phần <table>tử sẽ chứa tất cả dữ liệu dạng bảng mà chúng tôi định hiển thị.

Hàng bảng

Trong nhiều chương trình sử dụng bảng, bảng đã được xác định trước cho bạn, nghĩa là nó chứa các hàng, cột và ô sẽ chứa dữ liệu . Trong HTML, tất cả các thành phần này phải được tạo.

Bước đầu tiên trong việc nhập dữ liệu vào bảng là thêm hàng bằng cách sử dụng dòng của bảng yếu tố: <tr>.

<table>

  <tr>

  </tr>

  <tr>

  </tr>

</table>

Trong ví dụ trên, hai hàng đã được thêm vào bảng.

Bảng dữ liệu

Hàng không đủ để thêm dữ liệu vào bảng. Mỗi phần tử ô cũng phải được xác định. Trong HTML, bạn có thể thêm dữ liệu bằng cách sử dụng dữ liệu bảng yếu tố: <td>.

<table>

  <tr>

    <td>73</td>

    <td>81</td>

  </tr>

</table>

Trong ví dụ trên, hai điểm dữ liệu ( 73 và 81) được nhập vào một hàng tồn tại. Bằng cách thêm hai điểm dữ liệu, chúng tôi đã tạo ra hai ô dữ liệu.

Nếu bảng được hiển thị trong trình duyệt, nó sẽ hiển thị một bảng có một hàng và hai cột.

Tiêu đề bảng

Dữ liệu bảng không có nhiều ý nghĩa nếu không có tiêu đề để mô tả những gì dữ liệu đại diện.

Để thêm tiêu đề cho hàng và cột, bạn có thể sử dụng các tiêu đề bảng yếu tố: <th>.

Phần tử tiêu đề bảng được sử dụng giống như phần tử dữ liệu bảng, ngoại trừ tiêu đề có liên quan. Cũng giống như dữ liệu bảng, tiêu đề bảng phải được đặt trong một hàng bảng.

<table>

  <tr>

    <th></th>

    <th scope=”col”>Saturday</th>

    <th scope=”col”>Sunday</th>

  </tr>

  <tr>

    <th scope=”row”>Temperature</th>

    <td>73</td>

    <td>81</td>

  </tr>

</table>

Điều gì đã xảy ra trong đoạn mã trên?

Đầu tiên, một hàng mới đã được thêm vào để chứa ba tiêu đề: một tiêu đề trống, một Saturday tiêu đề và một Sunday tiêu đề. Tiêu đề trống tạo ô bảng bổ sung cần thiết để căn chỉnh các tiêu đề bảng một cách chính xác trên dữ liệu mà chúng tương ứng.

Trong hàng thứ hai, một bảng tiêu đề được thêm vào như một tiêu đề hàng: Temperature.

Khi được hiển thị, mã này sẽ xuất hiện tương tự như hình ảnh bên dưới:Ví dụ về bảng

Ngoài ra, hãy lưu ý việc sử dụng scope thuộc tính, có thể nhận một trong hai giá trị:

  • row – giá trị này làm rõ rằng tiêu đề dành cho một hàng.
  • col – giá trị này làm rõ rằng tiêu đề dành cho một cột.

Ban đầu, mã HTML cho bảng có thể hơi lạ, nhưng việc phân tích từng phần một sẽ giúp làm cho mã dễ hiểu hơn.

Đường viền bảng

Cho đến nay, các bảng bạn đã tạo hơi khó đọc vì chúng không có đường viền.

Trong các phiên bản HTML cũ hơn, một đường viền có thể được thêm vào bảng bằng cách sử dụng border thuộc tính và đặt nó bằng một số nguyên. Số nguyên này sẽ đại diện cho độ dày của đường viền.

<table border=”1″>

  <tr>

    <td>73</td>

    <td>81</td>

  </tr>

</table>

Mã trong ví dụ trên không được dùng nữa , vì vậy vui lòng không sử dụng nó. Nó nhằm minh họa các quy ước cũ hơn mà bạn có thể bắt gặp khi đọc mã của các nhà phát triển khác.

Trình duyệt có thể sẽ vẫn diễn giải mã của bạn một cách chính xác nếu bạn sử dụng border thuộc tính, nhưng điều đó không có nghĩa là nên sử dụng thuộc tính.

Chúng tôi sử dụng CSS để thêm phong cách cho tài liệu HTML, vì nó giúp chúng tôi tách cấu trúc của một trang khỏi giao diện của nó. Bạn có thể tìm hiểu thêm về CSS trong các khóa học CSS của chúng tôi.

Bạn có thể đạt được hiệu ứng đường viền bảng tương tự bằng cách sử dụng CSS.

Cột kéo dài

Điều gì sẽ xảy ra nếu bảng chứa dữ liệu kéo dài nhiều cột?

Ví dụ: lịch cá nhân có thể có các sự kiện kéo dài trong nhiều giờ hoặc thậm chí nhiều ngày.

Dữ liệu có thể kéo dài các cột bằng cách sử dụng colspan thuộc tính. Các thuộc tính chấp nhận một số nguyên (lớn hơn hoặc bằng 1) để biểu thị số cột mà nó trải qua.

<table>

  <tr>

    <th>Monday</th>

    <th>Tuesday</th>

    <th>Wednesday</th>

  </tr>

  <tr>

    <td colspan=”2″>Out of Town</td>

    <td>Back in Town</td>

  </tr>

</table>

Trong ví dụ trên, dữ liệu Out of Town Kéo dài tiêu đề bảng Monday And Tuesday Sử dụng giá trị 2(hai cột). Dữ liệu Back in Town Chỉ xuất hiện dưới Wednesday Tiêu đề.

Kéo dài hàng

Dữ liệu cũng có thể kéo dài nhiều hàng bằng cách sử dụng rowspan thuộc tính.

Các rowspan thuộc tính được sử dụng cho dữ liệu mà nhịp nhiều hàng (có lẽ một sự kiện diễn ra trong nhiều giờ vào một ngày nhất định). Nó chấp nhận một số nguyên (lớn hơn hoặc bằng 1) để biểu thị số hàng mà nó kéo dài qua.

<table>

  <tr> <!– Row 1 –>

    <th></th>

    <th>Saturday</th>

    <th>Sunday</th>

  </tr>

  <tr> <!– Row 2 –>

    <th>Morning</th>

    <td rowspan=”2″>Work</td>

    <td rowspan=”3″>Relax</td>

  </tr>

  <tr> <!– Row 3 –>

    <th>Afternoon</th>

  </tr>

  <tr> <!– Row 4 –>

    <th>Evening</th>

    <td>Dinner</td>

  </tr>

</table>

Trong ví dụ trên, có bốn hàng:

Hàng đầu tiên chứa một ô trống và hai tiêu đề cột.

Hàng thứ hai chứa Morning Tiêu đề hàng, cùng với Work, kéo dài hai hàng dưới Saturday Cột. Mục nhập “Thư giãn” kéo dài ba hàng dưới Sunday Cột.

Hàng thứ ba chỉ chứa Afternoon Tiêu đề hàng.

Hàng thứ tư chỉ chứa Dinner Mục nhập, vì “Thư giãn” kéo dài sang ô bên cạnh.

Nếu bạn muốn xem cách trình duyệt diễn giải mã ở trên, vui lòng sao chép và dán nó vào trình chỉnh sửa mã để hiểu rõ hơn một chút.

Nội dung bảng

Theo thời gian, một bảng có thể phát triển để chứa nhiều dữ liệu và trở nên rất dài. Khi điều này xảy ra, bảng có thể được chia nhỏ để dễ quản lý hơn.

Bảng dài có thể được section tắt bằng cách sử dụng cơ thể bảng yếu tố: <tbody>.

Phần <tbody>tử phải chứa tất cả dữ liệu của bảng, ngoại trừ các tiêu đề của bảng (sẽ tìm hiểu thêm về điều này trong một bài tập sau).

<table>

  <tbody>

    <tr>

      <th></th>

      <th>Saturday</th>

      <th>Sunday</th>

    </tr>

    <tr>

      <th>Morning</th>

      <td rowspan=”2″>Work</td>

      <td rowspan=”3″>Relax</td>

    </tr>

    <tr>

     <th>Afternoon</th>

    </tr>

    <tr>

      <th>Evening</th>

      <td>Dinner</td>

    </tr>

  </tbody>

</table>

Trong ví dụ trên, tất cả dữ liệu bảng được chứa trong một phần tử nội dung bảng. Tuy nhiên, lưu ý rằng các tiêu đề cũng được giữ trong phần nội dung của bảng – chúng tôi sẽ thay đổi điều này trong bài tập tiếp theo.

Đầu bảng

Trong bài tập cuối cùng, các tiêu đề của bảng được giữ bên trong thân của bảng. Tuy nhiên, khi phần thân của một bảng được tách ra, việc cắt phần tiêu đề cột của bảng bằng cách sử dụng <thead>phần tử cũng có ý nghĩa .

<table>

  <thead>

    <tr>

      <th></th>

      <th scope=”col”>Saturday</th>

      <th scope=”col”>Sunday</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <th scope=”row”>Morning</th>

      <td rowspan=”2″>Work</td>

      <td rowspan=”3″>Relax</td>

    </tr>

    <tr>

     <th scope=”row”>Afternoon</th>

    </tr>

    <tr>

      <th scope=”row”>Evening</th>

      <td>Dinner</td>

    </tr>

  </tbody>

</table>

Trong ví dụ trên, phần tử mới duy nhất là <thead>. Các tiêu đề bảng được chứa bên trong phần tử này. Lưu ý rằng đầu bảng vẫn yêu cầu một hàng để chứa các tiêu đề bảng.

Ngoài ra, chỉ có tiêu đề cột nằm dưới <thead>phần tử. Chúng ta có thể sử dụng scope thuộc tính trên <th>các phần tử để cho biết liệu một <th>phần tử đang được sử dụng làm “row”đề mục hay “col”tiêu đề.

Chân trang bảng

Phần dưới cùng của một bảng dài cũng có thể được cắt nhỏ bằng cách sử dụng <tfoot>phần tử.

<table>

  <thead>

    <tr>

      <th>Quarter</th>

      <th>Revenue</th>

      <th>Costs</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <th>Q1</th>

      <td>$10M</td>

      <td>$7.5M</td>

    </tr>

    <tr>

      <th>Q2</th>

      <td>$12M</td>

      <td>$5M</td>

    </tr>

  </tbody>

  <tfoot>

    <tr>

      <th>Total</th>

      <td>$22M</td>

      <td>$12.5M</td>

    </tr>

  </tfoot>

</table>

Trong ví dụ trên, phần chân trang chứa tổng dữ liệu trong bảng. Chân trang thường được sử dụng để chứa tổng, chênh lệch và các kết quả dữ liệu khác.

Ôn tập

Bạn đã làm rất tốt! Trong bài học này, chúng ta đã học cách tạo bảng, thêm dữ liệu vào bảng và chia bảng thành các phần nhỏ hơn để dễ đọc hơn.

Hãy xem lại những gì chúng ta đã học được cho đến nay:

  • Phần <table>tử tạo một bảng.
  • Phần <tr>tử thêm hàng vào bảng.
  • Để thêm dữ liệu vào một hàng, bạn có thể sử dụng <td>phần tử.
  • Tiêu đề bảng làm rõ ý nghĩa của dữ liệu. Các tiêu đề được thêm vào với <th>phần tử.
  • Dữ liệu bảng có thể kéo dài các cột bằng cách sử dụng colspan thuộc tính.
  • Dữ liệu bảng có thể kéo dài các hàng bằng cách sử dụng rowspan thuộc tính.
  • Các bảng có thể được chia thành ba phần chính: phần đầu, phần thân và phần chân trang.
  • Phần đầu của bảng được tạo bằng <thead>phần tử.
  • Phần thân của bảng được tạo bằng <tbody>phần tử.
  • Chân trang của bảng được tạo bằng <tfoot>phần tử.

Tất cả các thuộc tính CSS bạn đã học trong khóa học này có thể được áp dụng cho các bảng và dữ liệu của chúng.

Chúc mừng bạn đã hoàn thành Bảng HTML!

Leave a Reply