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

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

Rate this post

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.

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

Chuẩn bị cho 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ó Tag cho các trình duyệt web biết rằng chúng tôi đang sử dụng HTML Table 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:

Tag <!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.

Tag <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>Tag mở và Tag đóng sau khi khai báo <!DOCTYPE html>:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Bất kỳ thứ gì giữa Tag mở <html>và </html>Tag đóng sẽ được hiểu là mã HTML. Nếu không có các Tag này, có Tag trình duyệt có Tag 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ó Tag làm điều này Table 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 Tag head mở và đóng thường xuất hiện dưới dạng mục đầu tiên sau Tag HTML đầu tiên của bạn:

<head>
  
</head>

Title page tag

Phần tử có Tag <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>Tag luôn là bên trong <head>.

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>title page nằm ở đây</title>
</head>

Title page xuất hiện ở đâu?

Làm tốt lắm! Thật không may, Table đ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>Tag bao gồm tất cả mã HTML
  • Các <head>Tag 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 html element mới đi vào bên trong HTML:

Link(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ó Tag thêm liên kết vào trang web Table 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 Tag mở và Tag đóng.

<a href="websitehcm.com" >đây là link liên kết</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ư Tag 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.

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

Khi đọc tài liệu kỹ thuật, bạn có Tag bắt Link. Đừ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 Tag 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 phải cảm ơn thuộc tính <a>của phần tử target.

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

Có Tag 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ó Tag 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ó Tag được thêm trực tiếp vào Tag mở của phần tử anchor text, giống như các href thuộc tính.

<a href="websitehcm.com" target="_blank">link này sẽ mở tab mới</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 web 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.

Link đế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ó Tag 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

Link theo ý muốn

Bạn có Tag đã 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ó Tag 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 Table cách bao bọc phần tử đó Table một phần tử neo. 

Link đế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ó Tag 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 element một id , như sau:

<p id="top">link này đến phần top</p>
<h1 id="bottom">đây là tag bottom</h1>

Sau đó tiến hành sử dụng link để kết nối đến các phần này sử dụng id như sau:

<a href="#top"> quay trở lại top</a>
<a href="#bot"> quay trở lại bottom</a>

Khoảng trắng trong HTML

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ư Tag 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 Tag 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 Table cách sử dụng các thanh space và tab trên bàn phím của bạn.

Comment trong HTML

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 Table <!–và kết thúc Table –>. 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 Tag browser will not display. -->

Bao gồm các comment 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ũ.

Tag 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ố Tag có mục đích rất cụ thể, chẳng hạn như Tag hình ảnh và video, hầu hết các Tag đượ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 Tag để 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 Tag 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ó Tag tìm thấy danh sách đầy đủ các Tag 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ó Tag thêm tiêu đề vào trang web của mình Table 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.
  • Tag 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ó Tag tạo các phần trên một trang web và chuyển đến chúng Table cách sử dụng <a>các Tag 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 Table văn bản trong HTML Table 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!

Table HTML Tag

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

Giới thiệu về table

Có rất nhiều trang web trên Internet hiển thị thông tin như giá cổ phiếu, tỷ số Tag thao, dữ liệu hóa đơn, v.v. Dữ liệu này có bản chất là Table tự nhiên, có nghĩa là Table 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 Table hai chiều cho người dùng.

Hãy xem code 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 table

Trước khi hiển thị dữ liệu, trước tiên chúng ta phải tạo Table sẽ chứa dữ liệu Table 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 Table mà chúng tôi định hiển thị.

Row table

Trong nhiều chương trình sử dụng bảng, Table đã đượ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 Table là thêm hàng Table cách sử dụng dòng của Table yếu tố: <tr>.

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table>
        <tr>

        </tr>
        <tr>

        </tr>
    </table>
</body>

</html>

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

Table 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ó Tag thêm dữ liệu Table cách sử dụng dữ liệu Table yếu tố: <td>.

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table>
        <tr>
            <td>cot 1</td>
            <td>cot 2</td>
            <td>cot 3</td>
            <td>cot 4</td>
        </tr>
        <tr>

        </tr>
    </table>
</body>

</html>

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

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

Heading của table

Dữ liệu Table 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ó Tag sử dụng các tiêu đề Table yếu tố: <th>.

Phần tử tiêu đề Table đượ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 đề Table phải được đặt trong một hàng bảng.

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table>
        <tr>
            <th></th>
            <th scope="col">Saturday</th>
            <th scope="col">Sunday</th>
        </tr>
        <tr>
            <th scope="row">Temperature</th>
            <td>71</td>
            <td>83</td>
        </tr>
    </table>
</body>

</html>

Đ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 ô Table bổ sung cần thiết để căn chỉnh các tiêu đề Table 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 Table 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ó Tag 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 Table có Tag 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(border)

Cho đến nay, các Table 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ó Tag được thêm vào Table Table cách sử dụng border thuộc tính và đặt nó Table một số nguyên. Số nguyên này sẽ đại diện cho độ dày của đường viền.

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table border="1">
        <tr>
            <th></th>
            <th scope="col">Saturday</th>
            <th scope="col">Sunday</th>
        </tr>
        <tr>
            <th scope="row">Temperature</th>
            <td>71</td>
            <td>83</td>
        </tr>
    </table>
</body>

</html>

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ó Tag bắt gặp khi đọc mã của các nhà phát triển khác.

Trình duyệt có Tag 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 style 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ó Tag 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ó Tag đạt được hiệu ứng đường viền Table tương tự Table cách sử dụng CSS.

Gom cột

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

Ví dụ: lịch cá nhân có Tag 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ó Tag kéo dài các cột Table 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 Table 1) để biểu thị số cột mà nó trải qua.

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table border="1">
        <tr>
            <th scope="col">Monday</th>
            <th scope="col">Saturday</th>
            <th scope="col">Sunday</th>
        </tr>
        <tr>
            <td colspan="2">Out of Town</td>
            <td>Back in Town</td>
        </tr>
    </table>
</body>

</html>

Trong ví dụ trên, dữ liệu Out of Town Kéo dài tiêu đề Table 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 đề.

Gom hàng trong table

Dữ liệu cũng có Tag kéo dài nhiều hàng Table 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 Table 1) để biểu thị số hàng mà nó kéo dài qua.

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table border="0">
        <tr>
            <th></th>
            <th scope="col">Saturday</th>
            <th scope="col">Sunday</th>
        </tr>
        <tr>
            <th scope="row">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>
    </table>
</body>

</html>

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.

Body table

Theo thời gian, một Table có Tag 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, Table có Tag được chia nhỏ để dễ quản lý hơn.

Table dài có Tag được section tắt Table cách sử dụng cơ Tag Table 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 Table (sẽ tìm hiểu thêm về điều này trong một bài tập sau).

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <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>
</body>

</html>

Trong ví dụ trên, tất cả dữ liệu Table đượ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 Table – chúng tôi sẽ thay đổi điều này trong bài tập tiếp theo.

Head table

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

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <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>
</body>

</html>

Trong ví dụ trên, phần tử mới duy nhất là <thead>. Các tiêu đề Table được chứa bên trong phần tử này. Lưu ý rằng đầu Table 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ó Tag 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 đề.

Foot của table

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

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <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>


</body>

</html>

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 Table và chia Table 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ó Tag sử dụng <td>phần tử.
  • Tiêu đề Table 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 Table có Tag kéo dài các cột Table cách sử dụng colspan thuộc tính.
  • Dữ liệu Table có Tag kéo dài các hàng Table cách sử dụng rowspan thuộc tính.
  • Các Table có Tag đượ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 Table được tạo Table <thead>phần tử.
  • Phần thân của Table được tạo Table <tbody>phần tử.
  • Chân trang của Table được tạo Table <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ó Tag được áp dụng cho các Table và dữ liệu của chúng.

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

Leave a Reply