logo

AnonyHome

Loading...

Register

Chưa phân loại - 2017-12-02

[Series Html] Bài 4: Tạo bảng trong Html

Chào các bạn! Tiếp tục series học Html cơ bản cùng AnonyHome. Chúng ta sẽ đến với bài 4. Trong bài này chúng ta cùng tìm hiểu về cách tạo bảng trong Html.

[Series Html] Bài 4: Tạo bảng trong Html - AnonyHome
1. Thẻ <table>

– Cặp thẻ <table></table> dùng để khai báo 1 bảng
– Các thuộc tính:
+ width: Độ rộng của bảng, thường sử dụng giá trị kích thước có đơn vị % hoặc px
+ height: Chiều cao bảng
+ bgcolor: Định màu nền của bảng
+ background: Định ảnh nền của bảng
+ border: Độ lớn đường viền của bảng
+ bordercolor: Màu của đường viền
+ align: Căn vị trí của bảng so với toàn website. Giá trị: left, right, center
+ cellspacing: Định độ dày của khung
+ cellpadding: Định khoảng cách từ nội dung đến đường bao của bảng.
Ví dụ: 
[Series Html] Bài 4: Tạo bảng trong Html
  

2. Thẻ <tr></tr>: table row

– Xác định dòng trong bảng, nằm bên trong cặp thẻ
<table></table>

Ví dụ:          
<table>               
                    <tr></tr>              
                    <tr></tr>        
</table>

Bao nhiêu cặp thẻ <tr> ứng với từng đó dòng trong 1 bảng
– Một số thuộc tính trong thẻ <tr>  :
+ height: Khai báo chiều cao của dòng( độ lớn dòng)  
+ align: Định vị trí nội dung trong dòng( theo chiều ngang): left( trái), right( phải),center( giữa)  
+valign: Định vị trí nội dung theo chiều dọc: top( trên), middle( giữa), bottom( dưới).

3. Thẻ <td></td>: table da
ta


– Thẻ định nghĩa cột trong bảng, chứa dữ liệu của bảng ( table data).

– Cặp thẻ <td></td> nằm bên trong cặp thẻ <tr></tr>.
– Một số thuộc tính:
  + width: Độ rộng của cột.
  + height: Chiều cao của cột.

  + align: Định vị trí nội dung trong cột( theo chiều ngang): left( trái), right( phải), center( giữa).

  + valign: Định vị trí nội dung theo chiều dọc: top( trên), middle( giữa), bottom( dưới)

Ví dụ:

[Series Html] Bài 4: Tạo bảng trong Html - AnonyHome

4. Một số thẻ khác.

– <th> </th>( table heading) Tương tự cặp thẻ <td></td> tuy nhiên <th> dùng trong trường hợp nếu ô đó chứa tiêu đề của cột. Nội dung trong cặp thẻ này được in đậm và căn giữa tự động.
 Ví dụ:

[Series Html] Bài 4: Tạo bảng trong Html - AnonyHome



Một số lưu ý:
– Số cặp thẻ <td> ( số cột) trong các dòng phải bằng nhau để tránh vỡ khung của bảng.
– Đối với ô trống( không có nội dung) nên sử dụng thẻ <br> hoặc ‘&nbsp;’ thay cho khoảng trống.

5. Gộp cột, dòng trong bảng.


– Là việc tùy biến bảng bằng việc gộp các cột hay dòng lại với nhau.
– colspan=“x”: Gộp x cột tính từ cột đang đặt thuộc tính colspan.
– rowspan=“y”: Gộp y hàng tính từ hàng đang xét.
Lưu ý: Sau khi gộp phải loại bỏ số dòng( hoặc cột) để cân đối bảng.
Ví dụ:   

[Series Html] Bài 4: Tạo bảng trong Html - AnonyHome


Kết thúc bài 4 tại đây. Trong bài mình đã giới thiệu cho các bạn cách tạo bảng trong Html. Trong bài học tiếp theo chúng ta sẽ nghiên cứu về danh sách( list) trong Html.
Chúc các bạn học tập tốt! Mọi ý kiến các bạn vui lòng để lại trong mục bình luận bên dưới.

Nhận bài viết mới qua email

Chuyên mục HOT

Chuyên mục tìm hiểu ioT

Xem thêm

Popular

Newest

Related

AnonyHome ra mắt nền tảng học lập trình trực tuyến

2020-09-04

Chia sẻ tài liệu lập trình Android Full – FPT Software

2020-06-21

Chia sẻ Khóa học xây dựng ứng dụng triệu người xài Android Realtime với Firebase qua 5 dự án

2020-06-27

Khóa học lập trình Android Kotlin toàn tập 2020

2020-07-01

Tài liệu Java Spring MVC – Đại học FPT

2020-06-23

Full source code+Database: Quản lý thư viện+Báo cáo chi tiết

2020-02-26

Chia sẻ tài liệu học Lập trình ARM STM32, STM8, vv

2020-03-05

Chia sẻ bộ video Tự Học Angular Tiếng Việt

2020-06-29

AnonyHome ra mắt nền tảng học lập trình trực tuyến

2020-09-04

Chia sẻ code quản lý khoá học và học viên PHP MYSQL

2021-02-25

Bài giảng Java – Chương 3 phần 1

2021-02-24

Bài giảng Java – Chương 2 phần 2

2021-02-04

Bài giảng Java – Chương 2 phần 1

2021-01-22

Sự khác biệt giữa next() và nextLine() trong Java

2021-01-22

Chương 1: Giới thiệu về Java

2021-01-13

Hướng dẫn cài đặt môi trường Java và Eclipse

2021-01-12

AnonyHome ra mắt nền tảng học lập trình trực tuyến

2020-09-04

Chia sẻ code quản lý khoá học và học viên PHP MYSQL

2021-02-25

Bài giảng Java – Chương 3 phần 1

2021-02-24

Bài giảng Java – Chương 2 phần 2

2021-02-04

Bài giảng Java – Chương 2 phần 1

2021-01-22

Sự khác biệt giữa next() và nextLine() trong Java

2021-01-22

Chương 1: Giới thiệu về Java

2021-01-13

Hướng dẫn cài đặt môi trường Java và Eclipse

2021-01-12