Bài 5: Tạo bảng biểu cho trang web

Thứ ba, 25/11/2014 3:40 PM
 

Cú pháp:

<TABLE>
<tr>
 <td>Noi dung 1</td>
            <td>Noi dung 2</td>
</tr>
<tr>
 <td>Noi dung 1.1</td>
            <td>Noi dung 2.1</td>
</tr>
</TABLE>

Định dạng:
<TABLE 
ALIGN     = LEFT / CENTER / RIGHT: 
BORDER    = n 
BORDERCOLOR    = color
BORDERCOLORDARK   = color
BORDERCOLORLIGHT   = color
BACKGROUND    = url
BGCOLOR     = color
CELLSPACING   = spacing 
CELLPADDING   = pading
>
<TD 
ALIGN    = LEFT / CENTER / RIGHT 
VALIGN    = TOP / MIDDLE / BOTTOM
BORDERCOLOR  = color
BORDERCOLORDARK = color
BORDERCOLORLIGHT = color
BACKBROUND  = url
BGCOLOR   = color
COLSPAN    = n
ROWSPAN   = n
>
ALIGN / VALIGN: Canh lề cho bảng và nội dung trong ô.
BORDER: Kích thước đường kẻ chia ô trong bảng.
BORDERCOLOR: Màu đường kẻ
BORDERCOLORDARK/BORDERCOLORLIGHT: Màu tối và sáng của đường kẻ
BACKGROUND: Ảnh nền cho cho bảng.
BGCOLOR: Màu nền cho bảng.
CELLSPACING: Khoảng cách giữa các ô trong bảng
CELLPADDING: Khoảng cách giữa nội dung và đường kẻ.
COLSPAN: Trộn cột
ROWSPAN: Trộn dòng.

Để được rõ hơn mình sẽ thiết kế trang Tên miền của công ty Thiết kế web Vạn An Thành. Bạn copy đoạn mã sau vào notepad.

<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<TITLE>Hướng dẫn thiết kế website bằng html - Đăng ký tên miền</TITLE>
</HEAD>
<BODY bgcolor="#006633" text="#00000">
<h1>Đăng ký tên miền</h1>
<p><STRONG>Tên miền</STRONG> giống như mặt tiền của doanh nghiệp trên xa lộ   thông tin. <STRONG>Tên miền</STRONG> vốn đã được coi là một tài sản giá trị hàng   đầu của mỗi doanh nghiệp. Một <STRONG>tên miền</STRONG> tốt, ngắn gọn, dễ nhớ và   gắn với thương hiệu, sản phẩm, dịch vụ chiếm 70% hiệu quả hoạt động của   website.</p>
<p><STRONG><A title="Kiểm tra tên miền" href="http://aweb.vn/seotool/checkdomain/Kiem-tra-ten-mien.html" name="Kiểm tra tên miền">Kiểm tra tên miền</A></STRONG></p>
<table cellspacing="0" cellpadding="0">
  <TR>
    <TD bgColor="#ffffff" height="20" width="180" align="middle"><STRONG>Tên miền</STRONG></TD>
    <TD bgColor="#ffffff" width="200" align="middle"><STRONG>Phí cài đặt</STRONG></TD>
    <TD bgColor="#ffffff" width="200" align="middle"><STRONG>Chi phí</STRONG></TD>
  </TR>
  <TR>
    <TD bgColor="#f9f9f9" height="16"><STRONG>.com</STRONG></TD>
    <TD bgColor="#f9f9f9"><STRONG>miễn phí</STRONG></TD>
    <TD bgColor="#f9f9f9"><STRONG>$10/năm</STRONG></TD>
  </TR>
  <TR>
    <TD bgColor="#f9f9f9" height="16"><STRONG>.net</STRONG></TD>
    <TD bgColor="#f9f9f9"><STRONG>miễn phí</STRONG></TD>
    <TD bgColor="#f9f9f9"><STRONG>$10/năm</STRONG></TD>
  </TR>
  <TR>
    <TD bgColor="#f9f9f9" height="16"><STRONG>.org</STRONG></TD>
    <TD bgColor="#f9f9f9" height="16"><STRONG>miễn phí</STRONG></TD>
    <TD bgColor="#f9f9f9" height="16"><STRONG>$10/năm</STRONG></TD>
  </TR>
  <TR>
    <TD bgColor="#f9f9f9" height="16"><STRONG>.us</STRONG></TD>
    <TD bgColor="#f9f9f9"><STRONG>miễn phí</STRONG></TD>
    <TD bgColor="#f9f9f9"><STRONG>$10/năm</STRONG></TD>
  </TR>
  <TR>
    <TD bgColor="#f9f9f9" height="16"><STRONG>.info</STRONG></TD>
    <TD bgColor="#f9f9f9"><STRONG>miễn phí</STRONG></TD>
    <TD bgColor="#f9f9f9"><STRONG>$10/năm</STRONG></TD>
  </TR>
  <TR>
    <TD bgColor="#f9f9f9" height="16"><STRONG>.co.uk</STRONG></TD>
    <TD bgColor="#f9f9f9"><STRONG>miễn phí</STRONG></TD>
    <TD bgColor="#f9f9f9"><STRONG>$10/năm</STRONG></TD>
  </TR>
  <TR>
    <TD bgColor="#f9f9f9" height="16"><STRONG>.cc</STRONG></TD>
    <TD bgColor="#f9f9f9"><STRONG>miễn phí</STRONG></TD>
    <TD bgColor="#f9f9f9"><STRONG>$29.99/năm</STRONG></TD>
  </TR>
  <TR>
    <TD bgColor="#f9f9f9" height="16"><STRONG>.bz</STRONG></TD>
    <TD bgColor="#f9f9f9"><STRONG>miễn phí</STRONG></TD>
    <TD bgColor="#f9f9f9"><STRONG>$29.99/năm</STRONG></TD>
  </TR>
  <TR>
    <TD bgColor="#f9f9f9" height="16"><STRONG>.nu</STRONG></TD>
    <TD bgColor="#f9f9f9"><STRONG>miễn phí</STRONG></TD>
    <TD bgColor="#f9f9f9"><STRONG>$29.99/năm</STRONG></TD>
  </TR>
</table>
<br>
  <br>
    <b><i>Xin Chân thành cảm ơn Quý Khách Hàng đã quan tâm!</i></b></p>
</BODY>
</HTML>

 

Bài viết cùng chuyên mục: "Thiết kế html"

Liên hệ