Hướng dẫn tạo bảng trong bài viết trên blogspot
Thứ Năm, 18 tháng 4, 2013
1: Cấu trúc bảng.
1 Bảng trong HTML được định nghĩa bằng cặp thẻ <table>...</table> Trong một bảng thì được chia thành nhiều cột và hàng. Mỗi hàng được giới hạn hoặc ngắt hàng bởi cặp thẻ <tr>...</tr>, và trong mỗi hàng lại có nhiều Ô tùy theo trường hợp sử dụng cặp thẻ giới hạn giữa các ô là <td></td>
Ví dụ: 1 bảng gồm 2 hàng, 3 cột và mỗi hàng gồm có 3 ô.
<table border="1" cellpadding="10">
<tr>
<td>Ô 1</td>
<td>Ô 2</td>
<td>Ô 3</td>
</tr>
<tr>
<td>Ô 4</td>
<td>Ô 5</td>
<td>Ô 6</td>
</tr>
</table> 
rowspan="Số hàng muốn gộp lại"
colspan="Số cột muốn gộp"
Chẳng hạn như bạn muốn gộp Ô 1 và Ô 4 cột lại thành 1 cột thì sẽ dùng rowpan="2" để hợp lại.
<table border="1" cellpadding="10">
<tr>
<td rowspan="2">Ô 1</td>
<td>Ô 2</td>
<td>Ô 3</td>
<td>Ô 3-3</td>
</tr>
<tr>
<td>Ô 5</td>
<td>Ô 6</td>
<td>Ô 7</td>
</tr>
</table> 
<table border="1" cellpadding="10">
<tr>
<td colspan="2">Ô 1+</td>
<td>Ô 2</td>
<td>Ô 3</td>
</tr>
<tr>
<td>Ô 4</td>
<td>Ô 5</td>
<td>Ô 6</td>
<td>Ô 7</td>
</tr>
</table> 
Như vậy là việc Hợp các Cột hoặc Hàng lại cơ bản đã xong. Bây giờ bạn muốn đổ màu cho Ô , Cột hoặc là Hàng mà mình thích thì làm sử dụng thuộc tính bgcolor="#ee8018"
#ee8018 Các bạn thay thế Mã màu phù hợp theo trường hợp hoặc sở thích của bạn. Để lấy được mã màu các bạn thử sử dụng sof jcpicker. Ví dụ đổ màu cho các Ô như sau:
#ee8018 Các bạn thay thế Mã màu phù hợp theo trường hợp hoặc sở thích của bạn. Để lấy được mã màu các bạn thử sử dụng sof jcpicker. Ví dụ đổ màu cho các Ô như sau:
<table border="1" cellpadding="10">
<tr>
<td colspan="2" bgcolor="#ee8018">Ô 1+</td>
<td bgcolor="#dddddd">Ô 2</td>
<td bgcolor="#544754">Ô 3</td>
</tr>
<tr>
<td bgcolor="black">Ô 4</td>
<td bgcolor="red">Ô 5</td>
<td bgcolor="blue">Ô 6</td>
<td>Ô 7</td>
</tr>
</table> 
Và Dưới đây là một số thuộc tính dùng để giúp tạo bảng tốt hơn. Các bạn tham khảo và áp dụng nha.
Thẻ dùng cho <Table>:
- border: Xác định độ dày của khung bao quanh bảng
- bordercolor: Màu của khung bao quanh, viết dưới dạng dấu # và 6 chữ số HEX tiếp theo.
- cellspacing: Xác định khoảng cách giữa các ô trong bảng.
- width: Xác định độ rộng của bảng
- background: Xác định hình ảnh sẽ được sử dụng để làm nền cho toàn bảng
- bgcolor: Xác định màu nền của bảng, viết theo kiểu #XXXXXX (số HEX).
Thẻ dùng cho <td>
- width: Độ rộng của ô
- height: Chiều cao của ô
- colspan: Xác định bao nhiêu ô tính từ ô đó sẽ được chập vào làm 1 (trên cùng 1 dòng)
- rowspan: Xác định bao nhiêu ô tính từ ô đó sẽ được chập vào làm 1 (trên cùng 1 cột).
- background: Xác định hình ảnh sẽ được sử dụng để làm nền cho ô
- bgcolor: Xác định màu nền ô, viết theo kiểu #XXXXXX (số HEX).
Về cơ bảng thì Một cấu trúc của bảng đơn giản là thế Nếu các bạn hiểu biết về CSS thì có thể tùy chỉnh cho đẹp hơn nữa.
Thẻ dùng cho <Table>:
- border: Xác định độ dày của khung bao quanh bảng
- bordercolor: Màu của khung bao quanh, viết dưới dạng dấu # và 6 chữ số HEX tiếp theo.
- cellspacing: Xác định khoảng cách giữa các ô trong bảng.
- width: Xác định độ rộng của bảng
- background: Xác định hình ảnh sẽ được sử dụng để làm nền cho toàn bảng
- bgcolor: Xác định màu nền của bảng, viết theo kiểu #XXXXXX (số HEX).
Thẻ dùng cho <td>
- width: Độ rộng của ô
- height: Chiều cao của ô
- colspan: Xác định bao nhiêu ô tính từ ô đó sẽ được chập vào làm 1 (trên cùng 1 dòng)
- rowspan: Xác định bao nhiêu ô tính từ ô đó sẽ được chập vào làm 1 (trên cùng 1 cột).
- background: Xác định hình ảnh sẽ được sử dụng để làm nền cho ô
- bgcolor: Xác định màu nền ô, viết theo kiểu #XXXXXX (số HEX).
Về cơ bảng thì Một cấu trúc của bảng đơn giản là thế Nếu các bạn hiểu biết về CSS thì có thể tùy chỉnh cho đẹp hơn nữa.
Comments[ 0 ]
Đăng nhận xét