1
Bài 13: Tạo biểu bảng trong HTML-Phần 2. Sat Nov 03, 2012 8:22 pm
Admin
Admin
Bài viết : 3191
Xu : 9210
Thanks : 8
Age : 34Đến từ : Thanh Hóa
Tài Sản:
.:
Bài 13: Tạo biểu bảng trong HTML-Phần 2.
Trong phần 1, bạn đã nắm được cách tạo một bảng đơn giản, thêm viền, màu
viền, màu nền, ảnh nền cho bảng. Bạn cũng biết được bố cục một bảng bắt
đầu bằng <b><table> </b>, bên trong
<b><table> </b> là <b><tr></b>, bên
trong <b><tr></b> là <b><td></b>.
Trong phần 1, bạn đã nắm được cách tạo một bảng đơn giản, thêm viền,
màu viền, màu nền, ảnh nền cho bảng. Bạn cũng biết được bố cục một bảng
bắt đầu bằng <table> , bên trong <table> là <tr>, bên trong <tr> là <td>. Để đóng <td> dùng Thẻ </td>, để đóng một hàng chứa <td></td>, dùng Tag đóng </tr>. Và để kết thúc bảng dùng tag đóng </table>.
Giải sử muốn tạo bảng có 2 hay nhiều hàng thì làm sao?
I-Tạo bảng đơn giản với nhiều hàng, nhiều cột:
Cũng như tạo bảng đơn giản với 1 hàng, để tạo nhiều hàng, ngay khi
đóng hàng đầu tiên của bảng, bạn tiếp tục mở một hàng mới bằng Tag <tr>, rồi cũng khai báo dữ liệu bằng các tag mở và đóng <td></td>.
1-Bảng nhiều hàng:
a-Ví dụ 1: Tạo bảng nhiều hàng.
Xem minh họa:
Dưới đây là đọan mã HTML cho minh họa trên. Bạn nên thực hành gõ vào Notepad và lưu bằng tập tin mở rộng .htm hoặc .html hơn là chép rồi dán.
Click vào đây
để xem ví dụ trên trong trình duyệt. Bạn đừng bận tậm tại sao bảng thu
hẹp chiều ngang. Đơn giản là chúng ta chưa khai báo độ rộng cho bảng nên
Trình duyệt tự động mở rộng hay thu hẹp bảng tùy theo nội dung chứa
trong <td></td>.
Trong ví dụ trên, mỗi một hàng mới được khai báo với Thẻ <tr>, và đóng bằng </tr>.
Bạn có thể thêm màu nền vào trong mỗi hàng(<tr bgcolor="tenmau"> bằng cách chèn thuộc tính dùng thuộc tính bgcolor="tên màu" như bạn dùng trong Thẻ </table> hoặc <body>.
Cũng với ví dụ trên, ví dụ dưới đây là thêm màu nền vào <tr>.
b-Ví dụ 2: Thêm màu nền vào Thẻ <tr>
Xem minh họa:
Đoạn mã HTML bên dưới:
Click vào đây để xem ví dụ trên.
Dù bạn đã khai báo màu nền trong Thẻ <tr>, bạn vẫn có thể thay đổi màu nền trong thẻ <td> bằng cách thêm thuộc tính bgcolor="tên màu" trong thẻ đó.
Tóm lại, bạn có thể thay đổi màu nền và ảnh nền cho Thẻ <table>, <tr>, <td> bằng thuộc tính: bgcolor="tên màu" và background="taptinanh". Lưu ý: Chỉ dùng thuộc tính bgcolor cho thẻ <tr>.
2-Tạo bảng nhiều cột:
Như đã nói, trong một hàng gồm một hoặc nhiều cột dữ liệu (<td>). Do vậy chúng ta có thể tạo một bảng với nhiều cột dữ liệu bằng cách chia <tr> với nhiều <td></td>.
Ví dụ 1: Tạo bảng nhiều cột.
Lưu ý: Những ví dụ này không đề cập đến màu nền, màu chữ hay màu viền.
Xem minh họa:
Mã HTML cho ví dụ trên.
Click vào đây để xem ví dụ trên.
Lưu ý: Với cách tạo bảng này số cột trong mỗi hàng đều bằng nhau, trường hơp bạn bỏ sót một <td> </td> trong một hàng, bạn sẽ có kết quả như hình dưới:
Click vào đây để xem ví dụ trên trong trình duyệt và xem Source code.
II-Một số thuộc tính khác trong bảng:
Ví dụ 1: Đặt tiêu đề cho bảng:
Bạn có thể sử dụng Thẻ <thead>, <tbody> đểa đặt tiêu đề cho bảng. Dòng code này phải đặt đầu tiên ngay sau khi thẻ <table>
được mở. Trong ví dụ dưới đây dùng tbody align="center" vừa đặt tiêu đề vừa canh giữa các thành phần trong bảng.
Xem minh họa:
Đọan mã HTML cho minh họa trên. Nhớ là thực hành gõ vào Notepad và lưu bằng tập tin mở rộng .htm hoặc .html để quen.
Ví dụ 2: Che viền trong ngòai của bảng:
Thuộc tính Frame="vị trí" có thể dùng để che viền ngòai của Table: Thuộc tính này được đặt trong Thẻ <Table>.
Các giá trị vị trí của Thuộc tính Frame là:
Xem minh họa:
Ví dụ này sử dụng Frame="void" trong <table border="1" bordercolor="red" frame="void">
Ví dụ 3: Che viền trong của bảng:
Thuộc tính rules="vị trí" có thể dùng để che viền trong của Table: Thuộc tính này được đặt trong Thẻ Table.
Các giá trị vị trí của Thuộc tính rules là:
Xem minh họa:
Ví dụ này sử dụng rules="none" trong <table border="1" bordercolor="red" rules="none">
Ví dụ này sử dụng rules="rows" trong <table border="1" bordercolor="red" rules="rows">
Ví dụ này sử dụng rules="cols" trong <table border="1" bordercolor="red" rules="cols">
Phần kế tiếp sẽ giới thiệu một số thuộc tính của bảng về độ rộng,
chiều cao, canh biên... Kết thúc bài học về bảng, bạn có thể sử dụng
bảng để Layout một trang HTML hòan chỉnh.
Hết bài 13.
Nguồn: Sưu tầm Internet
Trong phần 1, bạn đã nắm được cách tạo một bảng đơn giản, thêm viền, màu
viền, màu nền, ảnh nền cho bảng. Bạn cũng biết được bố cục một bảng bắt
đầu bằng <b><table> </b>, bên trong
<b><table> </b> là <b><tr></b>, bên
trong <b><tr></b> là <b><td></b>.
Trong phần 1, bạn đã nắm được cách tạo một bảng đơn giản, thêm viền,
màu viền, màu nền, ảnh nền cho bảng. Bạn cũng biết được bố cục một bảng
bắt đầu bằng <table> , bên trong <table> là <tr>, bên trong <tr> là <td>. Để đóng <td> dùng Thẻ </td>, để đóng một hàng chứa <td></td>, dùng Tag đóng </tr>. Và để kết thúc bảng dùng tag đóng </table>.
Giải sử muốn tạo bảng có 2 hay nhiều hàng thì làm sao?
I-Tạo bảng đơn giản với nhiều hàng, nhiều cột:
Cũng như tạo bảng đơn giản với 1 hàng, để tạo nhiều hàng, ngay khi
đóng hàng đầu tiên của bảng, bạn tiếp tục mở một hàng mới bằng Tag <tr>, rồi cũng khai báo dữ liệu bằng các tag mở và đóng <td></td>.
1-Bảng nhiều hàng:
a-Ví dụ 1: Tạo bảng nhiều hàng.
Xem minh họa:
Dưới đây là đọan mã HTML cho minh họa trên. Bạn nên thực hành gõ vào Notepad và lưu bằng tập tin mở rộng .htm hoặc .html hơn là chép rồi dán.
<html> <head> <title>Bang nhieu hang</title> </head> <body bgcolor="#FFFFFF" text="#000000"> <table border="2" bordercolor="red" bgcolor="silver"> <tr> <td> <font color="yellow">Đây là hàng 1 chữ màu vàng. </font> </td> </tr> <tr> <td> <font color="red">Đây là hàng 2 chữ màu đỏ.</font></td> </tr> <tr> <td> <font color="blue">Đây là hàng 3 chữ màu xanh.</font></td> </tr> <tr> <td> <font color="lime">Đây là hàng 4 chữ màu lá chanh.</font></td> </tr> </table> </body> </html> |
để xem ví dụ trên trong trình duyệt. Bạn đừng bận tậm tại sao bảng thu
hẹp chiều ngang. Đơn giản là chúng ta chưa khai báo độ rộng cho bảng nên
Trình duyệt tự động mở rộng hay thu hẹp bảng tùy theo nội dung chứa
trong <td></td>.
Trong ví dụ trên, mỗi một hàng mới được khai báo với Thẻ <tr>, và đóng bằng </tr>.
Bạn có thể thêm màu nền vào trong mỗi hàng(<tr bgcolor="tenmau"> bằng cách chèn thuộc tính dùng thuộc tính bgcolor="tên màu" như bạn dùng trong Thẻ </table> hoặc <body>.
Cũng với ví dụ trên, ví dụ dưới đây là thêm màu nền vào <tr>.
b-Ví dụ 2: Thêm màu nền vào Thẻ <tr>
Xem minh họa:
Đoạn mã HTML bên dưới:
<html> <head> <title>Bang nhieu hang</title> </head> <body bgcolor="#FFFFFF" text="#000000"> <table border="2" bordercolor="red" bgcolor="silver"> <tr bgcolor="black"> <td> <font color="yellow">Đây là hàng 1 chữ màu vàng, nền màu đen. </font> </td> </tr> <tr bgcolor="blue"> <td> <font color="red">Đây là hàng 2 chữ màu đỏ, nền màu xanh.</font></td> </tr> <tr bgcolor="lime"> <td> <font color="blue">Đây là hàng 3 chữ màu xanh, nền màu lá chanh.</font></td> </tr> <tr bgcolor="navy"> <td> <font color="lime">Đây là hàng 4 chữ màu lá chanh, nền màu nước biển.</font></td> </tr> </table> </body> </html> |
Dù bạn đã khai báo màu nền trong Thẻ <tr>, bạn vẫn có thể thay đổi màu nền trong thẻ <td> bằng cách thêm thuộc tính bgcolor="tên màu" trong thẻ đó.
Tóm lại, bạn có thể thay đổi màu nền và ảnh nền cho Thẻ <table>, <tr>, <td> bằng thuộc tính: bgcolor="tên màu" và background="taptinanh". Lưu ý: Chỉ dùng thuộc tính bgcolor cho thẻ <tr>.
2-Tạo bảng nhiều cột:
Như đã nói, trong một hàng gồm một hoặc nhiều cột dữ liệu (<td>). Do vậy chúng ta có thể tạo một bảng với nhiều cột dữ liệu bằng cách chia <tr> với nhiều <td></td>.
Ví dụ 1: Tạo bảng nhiều cột.
Lưu ý: Những ví dụ này không đề cập đến màu nền, màu chữ hay màu viền.
Xem minh họa:
Mã HTML cho ví dụ trên.
<html> <head> <title>Bang nhieu hang, nhieu cot. </title> </head> <body bgcolor="#FFFFFF" text="#000000"> <table border="1"> <tr> <td>Qúy I </td><td>Tháng giêng </td><td>Tháng 2 </td><td>Tháng 3 </td> </tr> <tr> <td>Tổng thu </td><td>000000 </td><td>000000 </td><td>000000 </td> </tr> <tr> <td>Chi </td><td>000000 </td><td>000000 </td><td>000000 </td> </tr> <tr> <td>Còn lại </td><td>000000 </td><td>000000 </td><td>000000 </td> </tr> </table> </body> </html> |
Lưu ý: Với cách tạo bảng này số cột trong mỗi hàng đều bằng nhau, trường hơp bạn bỏ sót một <td> </td> trong một hàng, bạn sẽ có kết quả như hình dưới:
Click vào đây để xem ví dụ trên trong trình duyệt và xem Source code.
II-Một số thuộc tính khác trong bảng:
Ví dụ 1: Đặt tiêu đề cho bảng:
Bạn có thể sử dụng Thẻ <thead>, <tbody> đểa đặt tiêu đề cho bảng. Dòng code này phải đặt đầu tiên ngay sau khi thẻ <table>
được mở. Trong ví dụ dưới đây dùng tbody align="center" vừa đặt tiêu đề vừa canh giữa các thành phần trong bảng.
Xem minh họa:
Đọan mã HTML cho minh họa trên. Nhớ là thực hành gõ vào Notepad và lưu bằng tập tin mở rộng .htm hoặc .html để quen.
<html> <head> <title>Bang nhieu hang, nhieu cot. </title> </head> <body bgcolor="#FFFFFF" text="#000000"> <table border="1" bordercolor="red"> <tbody align="center">Doanh Thu Qúy I năm 2005 <tr> <td>Qúy I </td><td>Tháng giêng </td><td>Tháng 2 </td><td>Tháng 3 </td> </tr> <tr> <td>Tổng thu </td><td>000000 </td><td>000000 </td><td>000000 </td> </tr> <tr> <td>Chi </td><td>000000 </td><td>000000 </td><td>000000 </td> </tr> <tr> <td>Còn lại </td><td>000000 </td><td>000000 </td><td>000000 </td> </tr> </table> </tbody> </body> </html> |
Thuộc tính Frame="vị trí" có thể dùng để che viền ngòai của Table: Thuộc tính này được đặt trong Thẻ <Table>.
Các giá trị vị trí của Thuộc tính Frame là:
- void: che dấu viền quanh bảng
- above: Chỉ hiển thị viền trên và trong
- below: Chỉ hiển thị viền dưới và trong
- hsides : Hiển thị viền trên và dưới
- vsides: Hiển thị viền 2 bên trái phải
- rhs: Hiển thị viền bên phải và trong
- lhs: Hiển thị viền bên trái và trong
- box, border: hiển thị viền trong tòan bảng.
Xem minh họa:
Ví dụ này sử dụng Frame="void" trong <table border="1" bordercolor="red" frame="void">
Ví dụ 3: Che viền trong của bảng:
Thuộc tính rules="vị trí" có thể dùng để che viền trong của Table: Thuộc tính này được đặt trong Thẻ Table.
Các giá trị vị trí của Thuộc tính rules là:
- none: che viền trong của bảng.
- rows: Chỉ hiển thị viền ngang
- cols: Chỉ hiển thị viền đứng
Xem minh họa:
Ví dụ này sử dụng rules="none" trong <table border="1" bordercolor="red" rules="none">
Ví dụ này sử dụng rules="rows" trong <table border="1" bordercolor="red" rules="rows">
Ví dụ này sử dụng rules="cols" trong <table border="1" bordercolor="red" rules="cols">
Phần kế tiếp sẽ giới thiệu một số thuộc tính của bảng về độ rộng,
chiều cao, canh biên... Kết thúc bài học về bảng, bạn có thể sử dụng
bảng để Layout một trang HTML hòan chỉnh.
Hết bài 13.
Nguồn: Sưu tầm Internet
