Tạo khung - kẻ bảng trong HTML

Vấn đề tạo khung kẻ bảng trong HTML đã được rất nhiều Web - forum đề cập đến. Tuy nhiên itviet360 có nhận được yêu cầu của 1 bạn đọc muốn được hiểu rõ hơn về cách tạo khung trong HTML. Ở đây tôi sẽ trình bày theo cách đơn giản nhất để các bạn mới làm quen với HTML có cái nhìn dễ hiểu.
- Mục đích của tạo khung bảng HTML
Bảng tạo cho bạn cảm giác thoải mái khi tìm kiếm. Ngoài ra, dùng bảng trình bày cũng rất tiện lợi. Bạn có thể đưa văn bản, hình ảnh, danh sách và thậm chí bạn có thể chèn thêm vào đó một bảng mới. Bảng HTML cũng có các chức năng trình bày, định dạng, đường biên như bảng trong MS-Word, MS-Excel.
- Các thẻ định dạng
<TR>  Tạo dòng
<TD>  Tạo cột
Mô tả bằng hình ảnh. Ví dụ tạo 1 bảng có 3 dòng và 2 cột

Dòng = TR ( Màu đỏ) - Cột = TD (Màu xanh)

- Các tham số trong thẻ:

Tham số	Ý nghĩa
BORDER=n	Định dạng đường viền với đường viền n
WIDTH=n%	Định dạng chiều rộng của bảng n%
CELLPADDING=n	Khoảng cách giữa văn bản và ô
CELLSPACING=n	Khoảng cách giữa các biên trong và ngoài của ô
COLSPAN=n	Chia cột thành n cột
ROWSPAN=n	Chia dòng thành n dòng
ALIGN=(left, right, center)	Định dạng lề theo chiều ngang của văn bản
VALIGN=(top, bottom, midle)	Định dạng lề theo chiều dọc của văn bản
CLEAR=(left, right, all)	Chia dòng thành n dòng

Ở phần trình bày các tham số trong thẻ mình đã sử dụng kẻ bảng. Dưới đây là Code kẻ bảng cho khung đó:

<table width="600" border="1">
<tr>
<td width="196"><div align="center"><strong>Tham số</strong></div></td>
<td width="388"><strong>
Ý nghĩa </strong>
<div align="center"></div></td>
</tr>
<tr>
<td>BORDER=n </td>
<td><p>Định dạng đường viền với đường viền n</p></td>
</tr>
<tr>
<td>WIDTH=n% </td>
<td> Định dạng chiều rộng của bảng n% </td>
</tr>
<tr>
<td>CELLPADDING=n </td>
<td>Khoảng cách giữa văn bản và ô </td>
</tr>
<tr>
<td>CELLSPACING=n </td>
<td><p>Khoảng cách giữa các biên trong và ngoài của ô</p></td>
</tr>
<tr>
<td>COLSPAN=n </td>
<td>Chia cột thành n cột</td>
</tr>
<tr>
<td>ROWSPAN=n </td>
<td>Chia dòng thành n dòng</td>
</tr>
<tr>
<td> ALIGN=(left, right, center) </td>
<td>Định dạng lề theo chiều ngang của văn bản</td>
</tr>
<tr>
<td>VALIGN=(top, bottom,
midle) </td>
<td>Định dạng lề theo chiều dọc của văn bản</td>
</tr>
<tr>
<td>CLEAR=(left, right, all) </td>
<td>Chia dòng thành n dòng</td>
</tr>
</table>

Như đã nói ở trên, các bạn hoàn toàn có thể chèn hình ảnh, văn bản,... và chèn cả bảng mới vào trong 1 cột. Tùy theo yêu cầu của các bạn.
- Hướng dẫn chèn trên công cụ thiết kế Web Adobe Dreamweaver.
Trên tất cả các phần mềm hỗ trợ viết Web như Dreamweaver chúng ta đều được hỗ trợ rất nhiều tính năng, việc này giúp các bạn giảm được rất nhiều thời gian. Ở đây tôi trình bày về tính năng kẻ bảng, tạo khung:
Lựa chọn: Insert -> Table (Ctrl + Alt + T)

Kẻ khung - tạo bảng trong HTML

--------------------------------------
Chúc các bạn thành công !
Những vấn đề các bạn thắc mắc xin để lại comments để itviet360 hỗ trợ các bạn tốt nhất !

Chuyên mục: html-css, Source code