Kẻ khung cho bài viết (phần 03)
Posted by Tung Thanh Ly Vietnam on Monday, October 13, 2014 with No comments
Lưu ý
1/ Bảng trong HTML được định nghĩa bằng cặp thẻ <table>...</table>
2/ Hàng được giới hạn hoặc ngắt bằng cặp thẻ <tr>...</tr>
3/ Ô là <td>...</td>
4/ Rowspan= "số cột dọc muốn gộp"
5/ Colspan= "số cột ngang muốn gộp"
- 1. Hướng dẫn cách tạo bảng trong bài viết trên blogspot: 1: Cấu trúc bảng- cách tạo bảng trong bài viết trên blogspot 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> Cách tạo bảng trong bài viết trên blogspot Ví dụ 1.: Cách tạo bảng trong bài viết trên blogspot 1 bảng gồm 2 hàng, 3 cột ,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> Ví dụ 2. Cách tạo bảng trong bài viết trên blogspot 1 bảng gồm 3 hàng 4 cột <table border="1" cellpadding="10"> <tr> <td>Ô 1</td> <td>Ô 2</td>
- 2. <td>Ô 3</td> </tr> <tr> <td>Ô 4</td> <td>Ô 5</td> <td>Ô 6</td> </tr> <tr> <td>Ô 4</td> <td>Ô 5</td> <td>Ô 6</td> </tr> </table> Cứ như vậy, với cách tạo bảng trong bài viết trên blogspot bạn có thể làm 1 bảng gồm nhiều cột và nhiều hàng hơn theo ý muốn bài đăng của mình... Với cách tạo bảng trong bài viết trên blogspot có thể hơn thô, những bạn muốn có cách tạo bảng trong bài viết trên blogspot nhiều hơn bạn có thể xem có code cách tạo bảng trong bài viết trên blogspot sau: 1. Cách tạo bảng trong bài viết trên blogspot: Gộp Hàng hoặc Cột lại thì Bạn sẽ thêm các thuộc tính như rowspan="Số hàng muốn gộp 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>
- 3. </tr> <tr> <td>Ô 5</td> <td>Ô 6</td> <td>Ô 7</td> </tr> </table> 2. Cách tạo bảng trong bài viết trên blogspot: Hợp 2 hàng thành 1 cột như thế thì mình hợp 2 Ô trên cùng một hàng lại <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>
- 4. 3. Cách tạo bảng trong bài viết trên blogspot: 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: <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> Chú ý khi sử dụng những cách tạo bảng trong bài viết trên blogspot: 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>
- 5. - 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).
| O 1 | O 2 | O 3 | O 4 |
| O 5 | O 6 | O 7 |
0 comments:
Post a Comment