Cách Tạo Bảng Trong HTML

Bài viết / Web / Html Thứ hai, 12/10/2020 | 00:00 GMT+7 Cách tạo bảng trong HTML Bảng là một tập hợp dữ liệu được tổ chức theo hàng và cột. Các bảng hữu ích để hiển thị các kết nối giữa các loại dữ liệu, chẳng hạn như sản phẩm và chi phí, việc làm và ngày được tuyển dụng hoặc chuyến bay và thời gian khởi hành. Trong hướng dẫn này, bạn sẽ tạo một bảng bằng HTML, tùy chỉnh nó bằng cách thêm số lượng hàng và cột mong muốn, đồng thời thêm tiêu đề hàng và cột để làm cho bảng của bạn dễ đọc hơn.

Yêu cầu

• Làm quen với HTML. Nếu bạn chưa quen với HTML hoặc cần học lại, bạn có thể xem lại ba hướng dẫn đầu tiên của loạt bài hướng dẫn Cách xây dựng trang web bằng HTML của ta .
• Tệp index.html để thực hành tạo bảng HTML. Nếu bạn không biết cách tạo index.html , vui lòng làm theo các hướng dẫn trong hướng dẫn ngắn gọn Cách Cài đặt Dự án HTML của bạn .

Các nguyên tắc cơ bản về bảng HTML

Bảng HTML được tạo bằng <table> mở <table> và thẻ đóng </table> . Bên trong các thẻ này, dữ liệu được tổ chức thành các hàng và cột bằng cách sử dụng thẻ mở và đóng hàng <tr> bảng và mở và đóng <td> dữ liệu bảng.

Các <tr> hàng trong bảng được sử dụng để tạo một hàng dữ liệu. Bên trong thẻ mở và đóng bảng <tr> , thẻ <td> mở và đóng dữ liệu bảng được sử dụng để tổ chức dữ liệu trong các cột.

Ví dụ, đây là một bảng có hai hàng và ba cột:

<table> <tr> <td>Column 1</td> <td>Column 2</td> <td>Column 3</td> </tr> <tr> <td>Column 1</td> <td>Column 2</td> <td>Column 3</td> </tr> </table>

Để khám phá cách hoạt động của bảng HTML trong thực tế, hãy dán đoạn mã ở trên vào index.html hoặc file html khác mà bạn đang sử dụng cho hướng dẫn này.

Lưu và reload file trong trình duyệt để kiểm tra kết quả của bạn. (Để biết hướng dẫn về cách tải file trong trình duyệt của bạn, vui lòng truy cập bước này trong hướng dẫn của ta về Phần tử HTML.)

Trang web bây giờ sẽ có một bảng với ba cột và hai hàng:

Để thêm một hàng bổ sung, hãy thêm phần tử <tr> đánh dấu vào cuối bảng của bạn:

<table> <tr> <td>Column 1</td> <td>Column 2</td> <td>Column 3</td> </tr> <tr> <td>Column 1</td> <td>Column 2</td> <td>Column 3</td> </tr> <tr> <td>Column 1</td> <td>Column 2</td> <td>Column 3</td> </tr> </table>

Lưu kết quả của bạn và kiểm tra chúng trong trình duyệt của bạn. Bạn sẽ nhận được thông tin như thế này:

Để thêm một cột khác, hãy thử thêm một phần tử <td> dữ liệu bảng bổ sung bên trong mỗi phần tử <tr> hàng của bảng:

<table> <tr> <td>Column 1</td> <td>Column 2</td> <td>Column 3</td> <td>Column 4</td> </tr> <tr> <td>Column 1</td> <td>Column 2</td> <td>Column 3</td> <td>Column 4 </td> </tr> <tr> <td>Column 1</td> <td>Column 2</td> <td>Column 3</td> <td>Column 4</td> </tr> </table>

Lưu kết quả của bạn và kiểm tra chúng trong trình duyệt của bạn. Trang web sẽ hiển thị một bảng có ba hàng và bốn cột:

Thêm đường viền vào bảng

Nói chung, các bảng nên được tạo kiểu bằng CSS . Nếu bạn không biết CSS, bạn có thể thêm một số kiểu nhẹ bằng HTML bằng cách thêm các thuộc tính vào phần tử <table> . Ví dụ: bạn có thể thêm đường viền vào bảng với thuộc tính border :

<table border="1"> <tr> <td>Row 1</td> <td>Row 2</td> <td>Row 3</td> </tr> <tr> <td>Row 1</td> <td>Row 2</td> <td>Row 3</td> </tr> </table>

Thêm thuộc tính đường viền được đánh dấu vào bảng của bạn và kiểm tra kết quả của bạn trong trình duyệt. (Bạn có thể xóa index.html của bạn và paste vào đoạn mã HTML ở trên.) Lưu file của bạn và tải trong trình duyệt. Bảng của bạn bây giờ sẽ có một đường viền bao quanh mỗi hàng và cột của bạn như sau:

Thêm tiêu đề vào hàng và cột

Các tiêu đề có thể được thêm vào các hàng và cột để làm cho các bảng dễ đọc hơn. Tiêu đề bảng được tự động tạo kiểu với văn bản in đậm và căn giữa để phân biệt chúng với dữ liệu bảng một cách trực quan. Tiêu đề cũng làm cho bảng dễ truy cập hơn vì chúng giúp các cá nhân sử dụng trình đọc màn hình chuyển dữ liệu bảng.

Các tiêu đề được thêm vào bằng cách sử dụng thẻ mở và đóng <th> . Để thêm tiêu đề cột , bạn phải chèn một phần tử <tr> mới ở đầu bảng, nơi bạn có thể thêm tên cột bằng cách sử dụng <th> .

Xóa index.html và thêm một hàng tiêu đề cột với đoạn mã sau:

<table border="1"> <tr> <th></th> <th>Column Header 1</th> <th>Column Header 2</th> <th>Column Header 3</th> </tr> </table>

Lưu index.html và reload trong trình duyệt của bạn. Bạn sẽ nhận được thông tin như thế này:

Trang web sẽ hiển thị một hàng tiêu đề cột. Lưu ý tiêu đề cột đầu tiên trống. Bạn có thể thêm tiêu đề cột ở đây nếu bạn muốn.

Để thêm tiêu đề hàng, bạn phải thêm thẻ mở và đóng <th> làm mục đầu tiên trong mỗi phần tử <tr> hàng trong bảng. Thêm tiêu đề hàng và dữ liệu bằng cách thêm đoạn mã được đánh dấu bên dưới giữa thẻ đóng </tr> và thẻ đóng <table> của bảng trong index.html của bạn:

<table border="1"> <tr> <th></th> <th>Column Header 1</th> <th>Column Header 2</th> <th>Column Header 3</th> </tr> <tr> <th>Row Header 1</th> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <th>Row Header 2</th> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <th>Row Header 3</th> <td>Data</td> <td>Data</td> <td>Data</td> </tr> </table>

Lưu index.html và reload trong trình duyệt của bạn. Bạn sẽ nhận được thông tin như thế này:

Đến đây bạn sẽ có một bảng với ba tiêu đề cột và ba tiêu đề hàng.

Kết luận

Trong hướng dẫn này, bạn đã tạo một bảng HTML, thêm các hàng và cột bổ sung, đồng thời tạo các tiêu đề cho các hàng và cột.

Nếu bạn muốn tìm hiểu thêm về HTML, bạn có thể xem loạt bài hướng dẫn của ta về Cách Xây dựng Trang web Với HTML . Để tìm hiểu về cách sử dụng CSS để tạo kiểu cho các phần tử HTML (bao gồm cả bảng), vui lòng truy cập loạt bài hướng dẫn Cách xây dựng trang web bằng CSS .

Tags:

Các tin liên quan

Tổng quan về Trang web HTML và CSS Trình diễn của Chúng tôi 2020-10-12 Cách tạo kiểu cho HTML phần tử div với CSS 2020-10-12 Cách điều chỉnh nội dung, phần đệm, đường viền và lề của một phần tử HTML bằng CSS 2020-10-12 Cách sử dụng thuộc tính Rel cho thẻ neo trong HTML 2020-10-12 Cách thêm các thực thể HTML trong Thuộc tính nội dung CSS 2020-10-12 Tham chiếu cú pháp thẻ liên kết HTML cho tệp CSS bên ngoài 2020-10-12 Cách tạo nhận xét HTML 2020-10-12 Cách điều chỉnh nội dung, phần đệm, đường viền và lề của một phần tử HTML bằng CSS 2020-10-12 Cách điều chỉnh nội dung, phần đệm, đường viền và lề của một phần tử HTML bằng CSS 2020-10-12 Cách điều chỉnh nội dung, phần đệm, đường viền và lề của một phần tử HTML bằng CSS 2020-10-12