Tài liệu Chèn bảng vào blog doc

Chinh phục Yahoo blog.Topic 3: Level Up ! Topic 3: Level Up ! 1. Chèn bảng vào blog Để trình bày nội dung blog thì đôi lúc bạn cần tới bảng (table). Row 1 col 1 Row 1 col 2-3 Row 2 col 1 Row 2 col 2 Row 2 col 3 Row 3 col 1 Row 3 col 3 Với cái bảng như trong hình minh họa sẽ có đoạn code HTML như sau: <table bgcolor="#aa00bb" border="2" cellpadding="30" cellspacing="3"> <tbody> <tr> <td>Row 1 col 1</td> <td colspan="2" align="center">Row 1 col 2-3</td> </tr> <tr> <td>Row 2 col 1</td> <td rowspan="2" align="top">Row 2 col 2</td> <td>Row 2 col 3</td> </tr> <tr> <td>Row 3 col 1</td> <td>Row 3 col 3</td> </tr> </tbody> </table> Việc chèn bảng cũng hết sức đơn giản, bạn edit một entry, chọn “View HTML Source” như bước chèn hình ảnh, rồi cứ copy đoạn mã HTML trên và paste vào HTML của entry xem sao nhé. Bỏ chọn "View HTML" để xem table sẽ hiển thị như thế nào. Mình sẽ giải thích các thuộc tính của nó ngay sau đây. Thuộc tính border = 2 trong tag <table> chỉ thị cho browser vẽ một đường viền quanh bảng với độ dày là 2 điểm. Mỗi hàng được xác định bởi tag Table Row là <tr>…<tr>, rồi sau đó mỗi phần tử trong hàng được định nghĩa bởi tag Table Data là <td>…</td>. Trong mỗi tag <td> <td> bạn có thể chèn bất kỳ loại tag nào của HTML (văn bản, hình ảnh,…). Trong tag Table Data bạn lưu ý tới một số thuộc tính để điều chỉnh sự canh lề của các thông tin được thêm vào trong đó. Chỉnh lề theo chiều ngang Chỉnh lề theo chiều dọc <td align = left> Sắp xếp tất cả các thành phần về bên trái của ô – cell. (mặc định) <td valign = top> Sắp xếp tất cả các thành phần từ đỉnh ô xuống dưới <td align = right> Sắp xếp tất cả các thành phần về bên phải của ô <td valign = bottom> Sắp xếp tất cả các thành phần từ dưới ô lên trên <td align = center> Sắp xếp tất cả <td valign = middle> Sắp xếp tất các thành phần vào giữa ô. cả các thành phần ở giữa ô (mặc định Bạn có thể kết hợp các thuộc tính này lại với nhau: <td align = left valign=top>, khi đó các thành phần sẽ hiển thị dọc bên trái và từ trên xuống. Các ô trong bảng được bắt đầu từ trái qua phải và từ trên xuống dưới. Bạn để ý chắc sẽ thấy thuộc tính colspan và rowspan giúp chúng dàn ô theo chiều thẳng đứng và chiều ngang so với các ô khác trong bảng. Chẳng hạn ở ô “Row 1 col 2-3”, thì ô ở dòng 1 và chiếm chiều ngang là 2 cột (cột 2 và cột 3) khi đó thuộc tính colspan =2. Tương tự ở ô “Row 2 col 2” thì ô ở dòng 2 cột 2 và chiếm chiều thẳng đứng là 2 hàng (hàng 2 và hàng 3) khi đó rowspan = 2. Thủ thuật bảng là ở đây nè, bạn thấy không, mọi thứ nằm trong bảng và bạn muốn blog của mình đẹp hơn phải không. Hơn nữa bạn nào thường edit theme sẽ thấy được sự hữu ích của bảng, đó là khi bạn cho mọi thứ vào trong bảng rùi thì cứ thoải mái mà chọn màu chữ và tô màu cho chữ mà không sợ nó trở thành một đám loạn sắc khi thay đổi màu nền của blog.Tiếp tục theo dõi các bài viết của mình nhé "Cuộc sống cứ đổi thay, ta mong sao mình lớn lên từng ngày. Mỗi bước ta đi luôn chứa đựng niềm tin yêu của bạn bè, hạnh phúc nhỏ bé, nhưng ta không thể ôm hết vào lòng, bởi xung quanh ta luôn có những người bạn khác cần ta chia sẽ." ITS. Để có được một cái bảng như trên thì bạn edit một entry. Chọn “View HTML Source”, copy đoạn mã HTML bên dưới, rồi paste vào entry của bạn. <table align="center" background="http://i53.photobucket.com/albums/g48/ITSPhoto/blog/ ron.gif" bgcolor="#ffffff" border="0" cellpadding="40" cellspacing="0"><tbody><tr><td><table align="center" bgcolor="#ffffff" border="1" cellpadding="20" cellspacing="5"><tbody><tr><td background="http://i53.photobucket.com/albums/g48/ITSPhoto/blog/ noel.gif" bgcolor="#ffffff"><h3>Welcome to ITS' blog ! Have a good time. Edit this entry in your blog.</h3> <p></p> </td></tr></tbody></table></td></tr></tbody></table> Bỏ chọn “View HTML Source”, thấy gì chưa nào ? Chỉnh sửa lại bảng theo ý của bạn nhé. Chọn lại “View HTML Source”, nếu bạn không muốn tạo hình nền cho bảng thì bỏ thuộc tính background đi nhé. Nhưng chắc là bạn muốn entry của mình đẹp hơn mà, bạn muốn thay đổi background thì chỉ việc kiếm cái hình nào đẹp, up nó lên một hosting image. (Việc up hình lên bạn đọc hướng dẫn ở Topic 2 nhé). Sau đó bạn copy cái URL của hình bạn vừa up lên. Ví dụ ở photobucket thì bạn chọn URL như hình 3.1. Hình 3.1 – Copy URL của hình. Xóa URL củ của hình trong background=" ",sau đó paste URL của hình mới vào. Bạn có thể thay đổi background ở cả tag table và td. Ở trong bảng thì bạn cứ việc edit như trên một entry bình thường (canh lề, chèn hình ….). 2. Tạo nhạc nền Nhắm mắt copy đoạn code HTML sau về nghe tạm đã nghe. Chọn "View HTML Source" paste vào, save thế là xong. Giải thích cụ thể sau. Mà chắc là không có gì để nói nhiều, chỉ nói cái chiện nghe nhạc từ Youtube thui (lúc được lúc không cho nên mới đang xem xét lại, ITS nghĩ là do Bit rate, hi hi). Mà qui ước luôn ha, lần sau nghe nhắc tới copy code HTML thì cứ chọn "View HTML Source" nhé. Cứ 5 entry đặt một nhạc nền (chứ không là nghe tranh tấu đó), và để "sớm nghe được" nhạc nền thì nên copy đoạn code trên paste vào trên cùng của entry mới nhất. Love you and love me.(Lượm trên google .) <embed src="http://video.google.com/googleplayer.swf?docId=- 6149162938955616131&amp;hl=pl" type="application/x-shockwave- flash" wmode="transparent" flashvars="autoplay=1&amp;loop=1" allowscriptaccess="none" height="1" width="1"> Jingle Bell - Boney M. (youtube > live < tested by ITS) <embed src="http://www.youtube.com/v/piw2i48G5fw" type="application/x-shockwave-flash" wmode="transparent" flashvars="autoplay=1&amp;loop=1" allowscriptaccess="none" height="1" width="1"> Thursday November 30, 2006 - 09:58pm (ICT) Permanent Link | 8 Comments Chinh phục Yahoo blog.Topic 2: Nâng cấp blog . . Chinh phục Yahoo blog. Topic 3: Level Up ! Topic 3: Level Up ! 1. Chèn bảng vào blog Để trình bày nội dung blog thì đôi lúc bạn cần tới bảng (table). Row. </tbody> </table> Việc chèn bảng cũng hết sức đơn giản, bạn edit một entry, chọn “View HTML Source” như bước chèn hình ảnh, rồi cứ copy đoạn mã HTML trên và paste vào HTML