Tkw - Table Trong Html

1. Giới thiệu

Bảng (Table) là một cấu trúc gồm nhiều hàng giao với nhiều cột là kỹ thuật trình bày các thành phần trên trang web. Giao giữa hàng và cột chúng ta gọi là ô.

Bảng được ứng dụng nhiều trong nhiều vấn đề trên thực tế:

  • - Thiết kế bảng biểu trong trang web
  • - Thiết kế layout của trang web
  • - ...

2. Một số ứng dụng

Tạo bảng trong trang web.

Tạo bố cục (layout) toàn trang web.

3. Cú pháp
 <table>
  <tr>
   <th>tiêu đề cột 1</th>
   <th>tiêu đề cột 2</th>
   <th>tiêu đề cột n</th>
   </tr>
  <tr>
   <td> ô 1 dòng 1 </td>
   <td> ô 2 dòng 1 </td>
   <td> ô n dòng 1 </td>
  </tr>
  <tr>
   <td> ô 1 dòng n </td>
   <td> ô 2 dòng n </td>
   <td> ô n dòng n </td>
  </tr>
 </table>

Trong đó:

  • - table: thẻ tạo bảng.
  • - th: thẻ tạo tiêu đề cột.
  • - tr: thẻ tạo dòng.
  • - td: thẻ tạo ô trên dòng.

4. Ví dụ

Giả sử chúng ta cần tạo một bảng như hình

Phân tích bảng trên ta có nhận xét:

  • - Số dòng: 8.
  • - Số cột: 5.
  • - Độ rộng bảng: đoán 700px.

5. Thuộc tính trên bảng
5.1. Tạo độ rộng bảng

Cú pháp:

 <table width="giá_trị">
 
    ...
 </table> 

Ví dụ:

  <table width="700px" >
	 
	 ...
  </table> 

5.2. Tạo viền

Cú pháp:

 <table border="giá_trị" 
   bordercolor="trị_màu">
 
    ...
 </table> 

Ví dụ:

  <table border=1
   bordercolor="#FF0000">
	 
	 ...
  </table> 

5.3. Định khoảng cách ô

Cú pháp:

 <table cellspacing="giá_trị">
 
    ...
 </table> 

Ví dụ:

  <table cellspacing="5">
	 
	 ...
  </table> 

5.4. Định lề ô

Cú pháp:

 <table cellpadding="giá_trị">
 
    ...
 </table> 

Ví dụ:

  <table cellpadding="5">
	 
	 ...
  </table> 

5.5. Màu nền, ảnh nền
Thuộc tính Mô tả
<table bgcolor=“trị”> Định màu nền
<table background=“image.gif”> Định ảnh nền
6. Thuộc tính trên dòng
Thuộc tính Mô tả
<tr bgcolor=“trị”> Định màu nền dòng
<tr background=“image.gif”> Định ảnh nền dòng
<tr align="trị"> Canh lề theo chiều ngang
<tr valign="trị"> Canh lề theo chiều dọc
7. Thuộc tính trên ô
Thuộc tính Mô tả
<td bgcolor=“trị”> Định màu nền ô
<td background=“image.gif”> Định ảnh nền ô
<td align="trị"> Canh lề theo chiều ngang
<td valign="trị"> Canh lề theo chiều dọc
8. Một số thao tác
8.1. Gộp ô

- Thuộc tính rowspan="số ô" dùng để gộp các ô liền kề có cùng cột và khác dòng lại với nhau.

- Thuộc tính colspan="số ô" dùng để gộp các ô liền kề có cùng dòng và khác cột lại với nhau.

8.2. Định bảng nằm giữa trang

Trong thực tế khi chúng ta thiết kế một trang web, chúng ta thường có nhu cầu đưa toàn bộ bảng ra nằm giữa trang web để tạo sự cân đối cho trang web chúng ta.

<table 
 style="margin-left:auto;
 margin-right:auto" >
   ...
 </table>

Trong đó:

  • - margin-left: lề trái.
  • - margin-right: lề phải.

Trích dẫn: (http://khonggiankythuat.com)

Học liệu
2015 | Designed by Th.S Trần Vĩnh Xuyên!
0903979218
Facebook
Twitter
Instagram
Youtube
Chat liền