Học HTML Cách Chèn định Dạng Kiểu Bảng Trong HTML [bài 6]
Có thể bạn quan tâm
Học HTML
![Học HTML Cách chèn định dạng kiểu bảng trong HTML [bài 6]](https://s3.tech12h.com/sites/default/files/styles/inbody400/public/field/image/table.png)
Table gồm có dòng và cột:
- Học HTML Giới thiệu về HTML [bài 1]
- Học HTML – Viết chương trình HTML đầu tiên [bài 2]
- Học HTML- Các thẻ HTML định đạng văn bản [bài 3]
- Học HTML Cách chèn hình ảnh trong html [bài 4]
- Học HTML Cách chèn media: nhạc, video trong html [bài 5]
- Học HTML Cách chèn định dạng kiểu bảng trong HTML [bài 6]
- Trang chủ
- Học làm web
- Học HTML
Trong bài viết ngày hôm nay mình xin giới thiệu với các bạn cách tạo bảng biểu - table trong html. Với cách tạo bảng biểu bạn có thể bố trí dữ liệu trên các dòng và các cột khác nhau – điều này cũng tạo lên sự sinh động cho website của bạn. Đã làm web thì nhất định bạn sẽ đụng chạm tới vấn đề: tạo cấu trúc dạng bảng - table
1. Cách tạo bảng biểu
Để chèn bảng biểu - table trong HTML bạn dùng thẻ| . Một số table còn có tiêu đề. Lúc đó, bạn có thể dùng thẻ | thay thẻ | ở dòng đầu tiên. Mục đích là để đặt tiêu đề cho cột. Ví dụ:
2. Thêm border (đường viền) cho bảngNếu bạn không thêm border cho bảng thì bảng sẽ được hiển thị mà không có border. Để tạo border cho bảng, bạn có thể sử dụng css hoặc thuộc tính border của thẻ
3. Collapsed BordersQua ví dụ tạo border cho bảng bằng thuộc tính css bạn có thể nhận thấy rằng giữa mỗi border của các cột có một khoảng cách nhỏ, và để bỏ đi khoảng cách này bạn sử dụng thuộc tính css: border-collapse. Ví dụ: table, th, td { border: 1px solid black; border-collapse: collapse; } Xem demo4. Tạo khoảng cách giữa cách cộtĐể tạo khoảng cách giữa dữ liệu và border của các cột trong bảng bạn sử dụng thuộc tính css padding. Mặc định khi tạo bảng, dữ liệu trong các cột sẽ nằm sát với border của các cột. Và điểm đặc biệt của các cột, dòng trong bảng là chúng không nhận thuộc tính margin của css bạn nhé. Ví dụ: th, td { padding: 15px; } Xem demo5. Trộn các cộtĐể trộn các cột (merge cell) trong bảng bạn sử dụng thuộc tính colspan. Ví dụ:
6. Trộn các dòngĐể trộn các dòng (merge row) trong bảng bạn sử dụng thuộc tính rowspan. Ví dụ:
7. Tạo tiêu đề (caption) cho bảngĐể tạo tiêu đề cho bảng bạn sử dụng thẻ và thẻ này phải nằm ngay sau thẻ
8. Một số lưu ýCó một số điểm đặc biệt của table đó là:
| ||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|