Báo Mới Hàng Ngày
VI TÍNH AN BÌNH - 0919.185.184
DỊCH VỤ CHO THUÊ XE MÁY VŨNG TÀU 0908.191.134
Hướng dẫn thẻ Table trong HTML - Lập trình web cơ bản
Trang 1 trong tổng số 1 trang
Hướng dẫn thẻ Table trong HTML - Lập trình web cơ bản
Ví dụ về bảng:
Cách tạo bảng: Để tạo một cái bảng, ta thực hiện theo các bước sau:
Bước 1: Dùng cặp thẻ <table></table> để tạo một cái bảng.
Bước 2: Dùng cặp thẻ <tr></tr> để tạo hàng cho bảng (một cặp thẻ <tr></tr> tương ứng với một hàng)
Bước 3: Đặt cặp thẻ <td></td> vào bên trong cặp thẻ <tr></tr> để tạo ô cho hàng (một cặp thẻ <td></td> tương ứng với một ô). Cuối cùng, thêm thuộc tính border với giá trị 1px vào bên trong thẻ <table> để tạo đường viền cho bảng.
Chú ý: Nếu bạn muốn dùng hàng đầu tiên làm hàng tiêu đề (chữ được tô đậm và đặt ở giữa), thì thay vì dùng cặp thẻ <td></td> đổi lại bạn dùng cặp thẻ <th></th>
Về phần định dạng cho bảng, chúng ta có bốn thuộc tính cơ bản như sau:
border: Thiết lập độ dày của đường viền bao xung quanh bảng
cellpadding: Thiết lập khoảng cách giữa nội dung của ô và đường viền của ô
cellspacing: Thiết lập khoảng cách giữa hai ô
bgcolor: Thiết lập màu nền
Nếu đặt bên trong thẻ <table> thì sẽ thiết lập màu nền cho bảng
Nếu đặt bên trong thẻ <tr> thì sẽ thiết lập màu nền cho hàng
Nếu đặt bên trong thẻ <td> hoặc <th> thì sẽ thiết lập màu nền cho ô
Thiết lập kích thước cho bảng: Về phần thiết lập kích thước cho bảng, chúng ta có thể thiết lập:
Chiều rộng cho bảng (Bằng cách đặt thuộc tính width vào bên trong thẻ <table>)
Chiều rộng cho ô (Bằng cách đặt thuộc tính width vào bên trong thẻ <td> hoặc <th>)
Chiều cao cho bảng (Bằng cách đặt thuộc tính height vào bên trong thẻ <table>)
Chiều cao cho hàng (Bằng cách đặt thuộc tính height vào bên trong thẻ <tr>)
Kích thước có thể được xác định theo đơn vị: px (Pixel) hoặc % (Phần trăm kích thước của phần tử chứa nó. Ví dụ: phần tử chứa bảng table có chiều rộng là 800px, ta thiết lập chiều rộng cho bảng là 50% thì khi hiển thị ra màn hình bảng sẽ có chiều rộng là 400px)
Canh lề nội dung của ô: Để canh lề nội dung cho ô, ta thêm thuộc tính align vào trong thẻ <td> hoặc <th> với các giá trị như sau:
left (Canh nội dung nằm bên trái ô)
center (Canh nội dung nằm ở giữa ô)
right (Canh nội dung nằm bên phải ô)
Lưu ý: Nếu ta đặt thuộc tính align vào bên trong thẻ <tr> thì tất cả các ô của hàng đó sẽ có cùng một kiểu canh lề.
Gộp các ô trong bảng
Để gộp các cột lại với nhau ta đặt thuộc tính colspan="số lượng cột muốn gộp" vào trong thẻ <th> hoặc <td>
Để gộp các hàng lại với nhau ta đặt thuộc tính rowspan="số lượng hàng muốn gộp" vào trong thẻ <th> hoặc <td>
STT | Họ và tên | Ngày sinh | Nơi sinh | Điện thoại |
1 | Lê A | 01/01/1999 | Đồng Nai | 098989898 |
Cách tạo bảng: Để tạo một cái bảng, ta thực hiện theo các bước sau:
Bước 1: Dùng cặp thẻ <table></table> để tạo một cái bảng.
Bước 2: Dùng cặp thẻ <tr></tr> để tạo hàng cho bảng (một cặp thẻ <tr></tr> tương ứng với một hàng)
Bước 3: Đặt cặp thẻ <td></td> vào bên trong cặp thẻ <tr></tr> để tạo ô cho hàng (một cặp thẻ <td></td> tương ứng với một ô). Cuối cùng, thêm thuộc tính border với giá trị 1px vào bên trong thẻ <table> để tạo đường viền cho bảng.
Chú ý: Nếu bạn muốn dùng hàng đầu tiên làm hàng tiêu đề (chữ được tô đậm và đặt ở giữa), thì thay vì dùng cặp thẻ <td></td> đổi lại bạn dùng cặp thẻ <th></th>
Về phần định dạng cho bảng, chúng ta có bốn thuộc tính cơ bản như sau:
border: Thiết lập độ dày của đường viền bao xung quanh bảng
cellpadding: Thiết lập khoảng cách giữa nội dung của ô và đường viền của ô
cellspacing: Thiết lập khoảng cách giữa hai ô
bgcolor: Thiết lập màu nền
Nếu đặt bên trong thẻ <table> thì sẽ thiết lập màu nền cho bảng
Nếu đặt bên trong thẻ <tr> thì sẽ thiết lập màu nền cho hàng
Nếu đặt bên trong thẻ <td> hoặc <th> thì sẽ thiết lập màu nền cho ô
Thiết lập kích thước cho bảng: Về phần thiết lập kích thước cho bảng, chúng ta có thể thiết lập:
Chiều rộng cho bảng (Bằng cách đặt thuộc tính width vào bên trong thẻ <table>)
Chiều rộng cho ô (Bằng cách đặt thuộc tính width vào bên trong thẻ <td> hoặc <th>)
Chiều cao cho bảng (Bằng cách đặt thuộc tính height vào bên trong thẻ <table>)
Chiều cao cho hàng (Bằng cách đặt thuộc tính height vào bên trong thẻ <tr>)
Kích thước có thể được xác định theo đơn vị: px (Pixel) hoặc % (Phần trăm kích thước của phần tử chứa nó. Ví dụ: phần tử chứa bảng table có chiều rộng là 800px, ta thiết lập chiều rộng cho bảng là 50% thì khi hiển thị ra màn hình bảng sẽ có chiều rộng là 400px)
Canh lề nội dung của ô: Để canh lề nội dung cho ô, ta thêm thuộc tính align vào trong thẻ <td> hoặc <th> với các giá trị như sau:
left (Canh nội dung nằm bên trái ô)
center (Canh nội dung nằm ở giữa ô)
right (Canh nội dung nằm bên phải ô)
Lưu ý: Nếu ta đặt thuộc tính align vào bên trong thẻ <tr> thì tất cả các ô của hàng đó sẽ có cùng một kiểu canh lề.
Gộp các ô trong bảng
Để gộp các cột lại với nhau ta đặt thuộc tính colspan="số lượng cột muốn gộp" vào trong thẻ <th> hoặc <td>
Để gộp các hàng lại với nhau ta đặt thuộc tính rowspan="số lượng hàng muốn gộp" vào trong thẻ <th> hoặc <td>
Similar topics
» Tạo liên kết trong HTML
» Hướng dẫn khắc phục lỗi đảo đề bị mất câu hỏi và đáp án trong phần mềm MCMIX
» Hướng dẫn bỏ khung đường viền trong Microsoft Word
» Hướng dẫn tải phần mềm Free Pascal hỗ trợ lập trình Pascal
» Lập trình Pascal: Chương trình đầu tiên "Hello World"
» Hướng dẫn khắc phục lỗi đảo đề bị mất câu hỏi và đáp án trong phần mềm MCMIX
» Hướng dẫn bỏ khung đường viền trong Microsoft Word
» Hướng dẫn tải phần mềm Free Pascal hỗ trợ lập trình Pascal
» Lập trình Pascal: Chương trình đầu tiên "Hello World"
Trang 1 trong tổng số 1 trang
Permissions in this forum:
Bạn không có quyền trả lời bài viết