Ngôn ngữ HTML - Bảng trong HTML

THIẾT KẾ BẢNG BIỂU

Table trong HTML

Thẻ table trong HTML được sử dụng để hiển thị dữ liệu ở dạng bảng (hàng * cột). Có thể có nhiều cột trong một hàng.

Các thẻ table trong HTML được sử dụng để quản lý việc bố cục trang web. Ví dụ: Phần tiêu đề, thanh điều hướng, nội dung trang, phần chân trang… Nhưng bạn nên sử dụng thẻ div thay vì table để quản lý bố cục của trang.

Các thẻ định nghĩa bảng trong HTML

Thẻ Giải thích
<table> Định nghĩa bảng.
<tr> Định nghĩa một dòng trong một bảng.
<th> Định nghĩa phần header (dòng đầu tiên) của bảng.
<td> Định nghĩa 1 ô của bảng.
<caption> Định nghĩa phụ đề bảng.
<colgroup> Chỉ định một nhóm của một hoặc nhiều cột trong một bảng để định dạng.
<col> Được sử dụng với thẻ <colgroup> để chỉ định thuộc tính cột cho mỗi cột.
<tbody> Được sử dụng để nhóm nội dung body trong một bảng.
<thead> Được sử dụng để nhóm nội dung header trong một bảng.
<tfooter> Được sử dụng để nhóm nội dung footer trong một bảng.

Ví dụ tạo bảng có 5 dòng 3 cột  = 5*3=15 giá trị

<table>  
<tr><th>Họ và tên</th><th>Giới tính</th><th>Lương</th></tr>  
<tr><td>Thích Học Lại</td><td>Nam</td><td>10000000</td></tr>  
<tr><td>Thích Ăn Chơi</td><td>Nữ</td><td>3000000</td></tr>  
<tr><td>Thích Thi Lại</td><td>Nam</td><td>4000000</td></tr>  
<tr><td>Thích Không Thích</td><td>Nữ</td><td>500000</td></tr>  
</table>  

Xem ví dụ


Định Dạng Bảng
a. Tạo đường viền cho bảng.

<TABLE BORDER=n  BORDERCOLOR="Trị màu">
 . . . . . . .
</TABLE>


Sử dùng thuộc tính Border trong thẻ Table, n tính bằng Pixel, mặc định là 2.

Tạo đường viền có bóng.

<TABLE Border=n  BorderColorDark="Trị" BorderColorLight="Trị">
 . . . . . . .
</TABLE>
  • BorderColorDark: Màu đậm
  • BorderColorLight: Màu sáng

Ví dụ :

<table border=2 bordercolordark="#999" bordercolorlight="#333">  
<tr><th>Họ và tên</th><th>Giới tính</th><th>Lương</th></tr>  
<tr><td>Thích Học Lại</td><td>Nam</td><td>10000000</td></tr>  
<tr><td>Thích Ăn Chơi</td><td>Nữ</td><td>3000000</td></tr>  
<tr><td>Thích Thi Lại</td><td>Nam</td><td>4000000</td></tr>  
<tr><td>Thích Không Thích</td><td>Nữ</td><td>500000</td></tr>  
</table>  

Xem ví dụ

b. Thiết lập độ rộng và canh lề bảng

<TABLE Width=n  Align= "Center" / "Left"/ "Right" > 
	. . . . . . .
</TABLE>
  • n: Độ rộng cố định tính bằng pixel Hoặc độ rộng tương đối % kích thước cửa sổ .
  • Center: Canh giữa cửa sổ trình duyệt, Văn bản không cuộn bao quanh.
  • Left: Canh trái cửa sổ trình duyệt, Văn bản sẽ cuộn bao quanh bên phải bảng.
  • Right: Canh phải cửa sổ trình duyệt, văn bản sẽ cuộn quanh bên trái bảng.

c. Xác lập màu, ảnh nền cho bảng, hàng, ô.

Dùng thuộc tính Bgcolor và Background trong các thẻ tương ứng. 
 

Thuộc tính Ý nghĩa
<Table Bgcolor="Trị"> Màu nền cho toàn bảng
<Table Background="Image.gif"> Ảnh nền cho toàn bảng
<TR Bgcolor="Trị"> Màu nền cho toàn hàng
<TR Background="Image.gif"> Ảnh nền cho tòan hàng
<TD Bgcolor="Trị"> Màu nền cho ô
<TD Background="Image.gif">    Ảnh nền cho ô 
<TH Bgcolor="Trị">     Màu nền cho ô tiêu đề
<TH Background="Image.gif">    Ảnh nền cho ô tiêu đề

d. Định dạng ô.

  • Canh lề nội dung trong ô :Dùng thuộc tính Align cho các thẻ tương ứng
Thuộc tính Ý nghĩa
<TD Align="Hướng"> Canh theo chiều ngang ô các hướng: Left, Right, Center
<TD VAlign="Hướng"> Canh theo chiều dọc ô các hướng: Top, Bottom, Middle
<TH Align="Hướng"> Canh hàng tiêu đề theo chiều ngang
<TH VAlign="Hướng"> Canh hàng tiêu đề theo chiều dọc
<TR Align="Hướng"> Canh theo chiều ngang các ô trong hàng
<TR VAlign="Hướng"> Canh theo chiều dọc các ô trong hàng
  • Khỏang cách trong ô và giữa các ô

CellSpacing="n"  Khoảng cách giữa các ô. 
CellPadding="n" Khoảng cách quanh nội dung ô Pixel mặc định là 2 Pixcel.

  • Thiết kế bảng trôn ô: Dùng thuộc tính RowSpan và ColSpan cho thẻ TD. TH  để tạo ô có nhiều hàng/cột.
Thuộc tính Ý nghĩa
<TD RowSpan="n"> Tạo ô có độ cao n hàng
<TD ColSpan="n"> Tạo ô có độ rộng n cột
<TH RowSpan="n"> Tạo ô tiêu đề có độ cao n hàng
<TH ColSpan="n"> Tạo ô tiêu đề có độ rộng n cột

Ví dụ:

<HTML><HEAD> <TITLE> Định dạng Table</TITLE> </HEAD>
<BODY>
<TABLE  Border=1 BorderColor= "Purple" CellSpacing=0  Width=650>
   <Caption><H2> KẾT QUẢ HỌC TẬP</Caption>
   <TR VAlign=Middle Align=Center BgColor="Lime">
       <TH RowSpan=2 Width=150>Họ và Tên<BR>Học Sinh</TH>
       <TH ColSpan=2 Width=150> Năm Sinh</TH>
        <TH RowSpan=2 Width=70>Điểm<BR>TB</TH>
        <TH RowSpan=2 Width=130> Xếp Lọai</TH>
   </TR>
  <TR Align=Center BgColor="Lime">
         <TH  Width=75> Nam </TH>
         <TH  Width=75>Nữ </TH>
   </TR>   
   <TR Align=Center>
         <TD Align="Left"> Lê Thanh Xuân </TD>
         <TD> &nbsp; </TD>
         <TD> 1950 </TD>
         <TD> 8.5 </TD>
         <TD> Giỏi</TD>            
   </TR>
     . . . . .
   <TR Align=Center>
        <TD Align="Left"> Lưu Thế Mạc</TD>
        <TD>1985 </TD>
         <TD> &nbsp; </TD>
        <TD> 4.5 </TD>
        <TD> Kém </TD>            
   </TR>
   <TR Align="Center" BgColor="Lime">
        <TD ColSpan=3> <B>Tổng số học sinh đạt:</B></TD>
        <TD ColSpan=2> <B>4 Học sinh<B></TD>
   </TR>
</TABLE></BODY>
</HTML>

Xem ví dụ