Mỗi thuộc tính được sắp xếp làm việc ở vị ttrí khác nhau. Khi tham gia khóa học thiết kế web chúng ta biết cách sử dụng những thẻ html, css và chúng ta sẽ thấy rõ hơn về những thẻ làm việc này. Ở đây tôi chia sẻ cách làm việc của thẻ table trong html
I . LÀM VIỆC VỚI BẢNG (TABLE) TRONG HTML
1 . Làm việc với Bảng dạng đối xứng
Table hay Bảng trong HTML được hiểu là các bảng biểu dùng để biểu diễn dữ liệu và chúng có thể có một (hoặc nhiều hơn một) dòng, tương tự như vậy chúng có thể có một (hoặc nhiều hơn một) cột
Bảng đối xứng là bảng mà mỗi dòng đều có số cột như nhau về số lượng cột, cũng như độ rộng của cột
a) Thẻ <table></table>
Cặp thẻ <table></table> dùng để khai báo một bảng (bắt đầu và kết thúc một bảng), khai báo các thuộc tính quy định cho bảng như đường viền, mầu nền, vị trí hiển thị bảng,…
b) Thẻ <tr></tr>
Cặp thẻ <tr></tr> dùng để khai báo một dòng trong bảng (bắt đầu và kết thúc một dòng).
c) Thẻ <td></td>
Cặp thẻ <td></td> dùng để khai báo một cột trong bảng (bắt đầu và kết thúc một cột).
Chú ý: Để khai báo một bảng thì chúng ta cần phải khai báo đầy đủ 3 cặp thẻ:
- <table></table>: Khai báo bắt đầu làm việc với bảng
- <tr></tr>: Khai báo bắt đầu làm việc với một dòng trong bảng
- <td></td>: Khai báo bắt đầu làm việc với một cột trong một dòng nằm trong một bảng
- Để Bảng hiển thị được đầy đủ các dòng và các cột thì trong mỗi một cột của Bảng phải tồn tại ít nhất 1 ký tự
Khái báo một bảng đơn giản nhất với 1 dòng và 1 cột trong HTML
Khai báo một bảng có nhiều dòng và nhiều cột trong HTML
II. CÁC THUỘC TÍNH KHI LÀM VIỆC VỚI TABLE
1. Các thuộc tính của thẻ <table></table>
a) width: Khai báo độ rộng của Bảng. Giá trị thường được sử dụng là Px hoặc %
b) height: Khai báo chiều cao của Bảng. Giá trị thường được sử dụng là Px hoặc %
c) border: Khai báo độ dầy đường viền của bảng. Đơn vị thường được sử dụng là Px hoặc %
d) bordercolor: Khai báo mầu của đường viền bảng. Giá trị có thể sử dụng là tên mầu hoặc mã mầu
e) align: Khai báo vị trí hiển thị của bảng so với màn hình hiển thị văn bản HTML. Các giá trị có thể sử dụng đó là: Left, Right, Center
f) bgcolor: Khai báo mầu nền cho Bảng. Các giá trị có thể sử dụng là tên mầu hoặc mã mầu
g) background: Quy định ảnh nền cho Bảng. Giá trị chính là đường dẫn của File ảnh muốn sử dụng làm ảnh nền
h) cellpadding: Khai báo khoảng cách từ các đối tượng trong bảng đối với khung bao ngoài của Bảng
i) cellspacing: Độ dầy khung bao ngoài của Bảng
2. Các thuộc tính của thẻ <tr></tr>
a) height: Khai báo độ rộng của một dòng. Giá trị thường được sử dụng là Px hoặc %
b) bgcolor: Khai báo mầu nền cho một dòng. Các giá trị có thể sử dụng là tên mầu hoặc mã mầu
c) align: Khai báo vị trí của tất cả các đối tượng thuộc toàn bộ dòng so với dòng đó theo chiều ngang. Các giá trị có thể sử dụng đó là: Left, Right, Center, Justify
d) valign: Khai báo vị trí của tất cả các đối tượng thuộc toàn bộ dòng so với dòng đó theo chiều dọc. Các giá trị có thể sử dụng đó là: Top, Middle, Bottom
3. Các thuộc tính của thẻ <td></td>
a) width: Khai báo độ rộng của một cột. Giá trị thường được sử dụng là Px hoặc %
b) height: Khai báo độ cao của một cột. Giá trị thường được sử dụng là Px hoặc %
c) bgcolor: Khai báo mầu nền cho một cột. Các giá trị có thể sử dụng là tên mầu hoặc mã mầu
d) align: Khai báo vị trí của các đối tượng trong cột so với chính cột đó theo chiều ngang. Các giá trị có thể sử dụng đó là: Left, Right, Center, Justify
e) valign: Khai báo vị trí của các đối tượng thuộc một cột nào đó trong dòng so với dòng đó theo chiều dọc. Các giá trị có thể sử dụng đó là: Top, Middle, Bottom
4. Tùy biến Bảng hay tạo “Bảng không đối xứng” với các thuộc tính colspan và rowspan của thẻ <td></td>
a) colspan: Thuộc tính này có tác dụng gom các cột trong một bảng
b) rowspan: Thuộc tính này có tác dụng gom các hàng trong một bảng
Hy vọng những chia sẻ nay sẽ giúp các bạn hiểu rõ thêm về các thẻ trong html. và những khóa học html, css sẽ giúp các bạn tư tin về vốn kiến thức lập trình của mình
Không có nhận xét nào:
Đăng nhận xét