1
Bài 12: Tạo biểu bảng trong HTML-Phần 1 Sat Nov 03, 2012 8:21 pm
Admin
Admin
Bài viết : 3191
Xu : 9210
Thanks : 8
Age : 34Đến từ : Thanh Hóa
Tài Sản:
.:
Nếu bạn đã dùng chương trình bảng tính (Excel) hoặc sử dụng bảng (table)
trong MS Word thì bạn dễ dàng hiểu khái niệm về bảng và hình thức của
chúng. <b>Bảng là tập hợp của hàng và cột.... </b>
Giao tiếp giữa hàng và cột tạo ra các ô (cell). Dữ liệu chứa trong ô
gọi là dữ liệu của bảng (table data). Bảng được phát triển và đưa vào
sử dụng trong HTML để hiển thị các thông tin theo cấu trúc. Cho đến nay
bảng đã được sử dụng rộng rãi trong thiết kế Web. Bảng dùng để định
dạng bố cục của một trang, chia các phần của trang ra thành từng khu vực
nhỏ. Bạn thử truy cập một trang bất kỳ nào, rồi dùng lệnh View/Source
của trình duyệt để xem Source code của trang .Rõ ràng, bạn thấy trong
trang này sử dụng nhiều thành phần bắt đầu bằng <table> và trong thành phần này có nhiều thuộc tính và giá trị của thuộc tính dùng để định dạng cho Thẻ <table> đó .
Mỗi một bảng (table) gồm một hoặc nhiều hàng (tr= table row), trong
một hàng gồm một hoặc nhiều ô (td =table data). Một bảng chỉ có một hàng
và một ô thường được dùng làm bảng chính bao quanh nội dung của trang
Web. Khi thiết kế bảng phức tạp, trong một ô có thể thêm vào các bảng
nhỏ và các ô trong bảng nhỏ này có thể thêm vào bảng nữa... Hoặc có thể
hàng trên trong bảng chỉ 1 ô và hàng dưới là 2 ô, hàng dưới nữa là 3
ô...Hoặc hàng bên trái gồm 4 hàng và hàng bên phải là một hàng... Việc
sử dụng tag mở và đóng phải theo đúng trình tự nếu không ô trong bảng sẽ
không hiển thị như mong muốn.
I-Các thành phần để tạo một bảng:
Trước hết, trong HTML, để tạo một bảng, cần các cặp Thẻ thành phần sau đây:
Nhớ rằng giữa các thuộc tính trong bảng phải cách nhau bằng một khỏang cách( nhấn phím cách) và theo sau chúng là dấu "="
1-Các thuộc tính của bảng (<table>) gồm:
2-Các thuộc tính của hàng (<tr>) gồm:
3-Các thuộc tính của ô (<td>) gồm:
Chúng ta sẽ lần lượt tìm hiểu cách dùng các thuộc tính và giá trị đi
kèm chúng cho mỗi thành phần trong bảng trong bài này và các bài kế tiếp
về bảng.
II-Bắt đầu tạo một bảng đơn giản:
Trước tiên, để làm quen với bảng chúng ta thực hành tạo một số bảng
đơn giản. Sau đó, chúng ta sẽ lồng các thuộc tính cho từng thành phần
như đã nêu trên.
1-Bảng đơn giản:
Một bảng đơn giản gồm các bước:
-Bắt đầu bảng gõ vào Thẻ <table>
-Bắt đầu một hàng đầu tiên trong bảng gõ vào: <tr>
-Bắt đầu một ô dữ liệu đầu tiên trong bảng gõ vào: <td>
-Nhập vào nội dụng của ô dữ liệu.
-Đóng ô dữ liệu này bằng Thẻ </td>
-Đóng hàng đầu tiên bằng Thẻ: </tr>
-Đóng bảng này bằng Thẻ: </table>
Lưu ý: Thẻ </table> là bắt buộc nếu bạn muốn trang Web hiển thị bảng trong Netscape Navigator.
a-Ví dụ 1:
Tìm hiểu cách viết của bảng trên:
1-<table>
2-<tr>
3-<td>Đây là bảng đầu tiên, bảng này chỉ có một hàng và một cột.
4-</td>
5-</tr>
6-</table>
Cú pháp trên đây giúp bạn dễ theo dõi việc tạo một bảng. Khi đã quen
với viết codes, các tag có thể nằm trên cùng một hàng mà không cần phải
xuống hàng như cách viết trên. Đọan codes trên đây có thể viết lại như
sau:
Click Vào đây để xem ví dụ trên.
Khi bạn xem ví dụ trên, bạn không thấy gì ngòai dòng: Đây là bảng đầu tiên, bảng này chỉ có một hàng và một cột.. Vậy, bảng nằm ở đâu?. Nguyên nhân là với HTML, khi bạn không khai báo border= cho bảng thì trình duyệt hiểu rằng, bảng đó sử dụng border=0. Vậy cũng với đọan code trên chúng ta hãy thêm border="5" vào bảng xem sao. (5 pixels)
Ví dụ 2: Tạo viền cho bảng với thuộc tính border="số pixel"
Click vào đây
để xem ví dụ trên. Rõ ràng, bây giờ bao quanh bảng là 1 khung màu xám.
Bạn có thể cho khung này một chút màu được không? Câu trả lời là bạn
chỉ cần thêm bordercolor="màu" vào trong thành phần <table>
Cũng với ví dụ trên bạn viết lại như sau:
Ví dụ 3: Thêm màu cho viền với thuộc tính bordercolor="màu"
Click vào đây
để xem ví dụ trên. Bạn đã tạo được một bảng có độ rộng của viền bằng
5px và màu của viền là vàng. Bạn có thể thực hành với các giá trị màu và
pixel khác nhau để quen dần.
Đến đây chắc bạn nghĩ rằng, có thể thêm màu cho viền thì cũng có thể thêm màu cho nền. Được mà, chỉ cần bạn thêm thuộc tính bgcolor="màu" vào thành phần bảng (thuộc tính này bạn đã quen trong bài 9). Dùng ví dụ trên, hãy thêm thuộc tính bgcolor="red" vào bảng. Như đọan codes bên dưới:
Ví dụ 4: Thêm màu màu nền cho bảng với thuộc tính bgcolor="màu"
Click vào đây để xem ví dụ trên.
Nếu thêm màu nền, hẳn cũng có thể sử dụng ảnh nền cho bảng. Không sai, bạn có thể thay thế thuộc tính bgcolor="màu" bằng thuộc tính background="taptinanh.gif". (Xem bài 9- Ảnh nền cho thành phần body). Khi đó bạn phải có tập tin ảnh nền có phần mở rộng là .jpg hoặc gif).
Đến đây, bạn thấy rằng thuộc tính background= "", bgcolor="" ngòai xác định màu nền và ảnh nền cho thành phần body của trang, nó còn được dùng cho cả bảng, hàng(chỉ dùng bgcolor),
và cột...Đây là mối quan hệ của thuộc tính với thành phần, không chỉ
trong HTML mà cả Javascript, CSS và nhiều ngôn ngữ khác có dùng ngôn ngữ
HTML. Và bạn càng ngạc nhiên khi thấy được sự giống nhau trong quan
hệ của Thành phần-Thuộc tính hay Đối tượng-Thuộc tính hay Đối
tượng-Phương pháp trong nhiều ngôn ngữ lập trình. Cái cơ bản là chúng
ta nhớ, hình dung và sắp xếp chúng theo trật tự hợp lý.
Phần 1 đã giới thiệu những cơ bản nhất về bảng. Để khám phá tiếp cách
dùng các thuộc tính còn lại và tạo những bảng phức tạp, chúng ta sẽ
tiếp tục với phần 13, 14, 15, 16.
Hết bài 12.
Nguồn: Sưu tầm Internet
trong MS Word thì bạn dễ dàng hiểu khái niệm về bảng và hình thức của
chúng. <b>Bảng là tập hợp của hàng và cột.... </b>
Giao tiếp giữa hàng và cột tạo ra các ô (cell). Dữ liệu chứa trong ô
gọi là dữ liệu của bảng (table data). Bảng được phát triển và đưa vào
sử dụng trong HTML để hiển thị các thông tin theo cấu trúc. Cho đến nay
bảng đã được sử dụng rộng rãi trong thiết kế Web. Bảng dùng để định
dạng bố cục của một trang, chia các phần của trang ra thành từng khu vực
nhỏ. Bạn thử truy cập một trang bất kỳ nào, rồi dùng lệnh View/Source
của trình duyệt để xem Source code của trang .Rõ ràng, bạn thấy trong
trang này sử dụng nhiều thành phần bắt đầu bằng <table> và trong thành phần này có nhiều thuộc tính và giá trị của thuộc tính dùng để định dạng cho Thẻ <table> đó .
Mỗi một bảng (table) gồm một hoặc nhiều hàng (tr= table row), trong
một hàng gồm một hoặc nhiều ô (td =table data). Một bảng chỉ có một hàng
và một ô thường được dùng làm bảng chính bao quanh nội dung của trang
Web. Khi thiết kế bảng phức tạp, trong một ô có thể thêm vào các bảng
nhỏ và các ô trong bảng nhỏ này có thể thêm vào bảng nữa... Hoặc có thể
hàng trên trong bảng chỉ 1 ô và hàng dưới là 2 ô, hàng dưới nữa là 3
ô...Hoặc hàng bên trái gồm 4 hàng và hàng bên phải là một hàng... Việc
sử dụng tag mở và đóng phải theo đúng trình tự nếu không ô trong bảng sẽ
không hiển thị như mong muốn.
I-Các thành phần để tạo một bảng:
Trước hết, trong HTML, để tạo một bảng, cần các cặp Thẻ thành phần sau đây:
- <table thuộc tính="giá trị" thuộc tính="giá trị"...></table>: Mở và đóng một bảng.
- <tr thuộc tính="giá trị" thuộc tính="giá trị" ...></tr>: Mở và đóng một hàng.
- <td thuộc tính="giá trị" thuộc tính="giá trị" ...></td>: Mở và đóng một ô.
Nhớ rằng giữa các thuộc tính trong bảng phải cách nhau bằng một khỏang cách( nhấn phím cách) và theo sau chúng là dấu "="
1-Các thuộc tính của bảng (<table>) gồm:
- align=
- background=
- bgcolor=
- width=
- height=
- border=
- bordercolor =
- bordercolordark=
- bordercolorlight=
- cellpadding=
- cellspacing=
- frame=
- rules=
2-Các thuộc tính của hàng (<tr>) gồm:
- align=
- valign
- bgcolor=
- background=
3-Các thuộc tính của ô (<td>) gồm:
- align=
- valign=
- bgcolor=
- background=
- char=
- colspan=
- rowspan=
- nowrap=
- height =
- width=
Chúng ta sẽ lần lượt tìm hiểu cách dùng các thuộc tính và giá trị đi
kèm chúng cho mỗi thành phần trong bảng trong bài này và các bài kế tiếp
về bảng.
II-Bắt đầu tạo một bảng đơn giản:
Trước tiên, để làm quen với bảng chúng ta thực hành tạo một số bảng
đơn giản. Sau đó, chúng ta sẽ lồng các thuộc tính cho từng thành phần
như đã nêu trên.
1-Bảng đơn giản:
Một bảng đơn giản gồm các bước:
-Bắt đầu bảng gõ vào Thẻ <table>
-Bắt đầu một hàng đầu tiên trong bảng gõ vào: <tr>
-Bắt đầu một ô dữ liệu đầu tiên trong bảng gõ vào: <td>
-Nhập vào nội dụng của ô dữ liệu.
-Đóng ô dữ liệu này bằng Thẻ </td>
-Đóng hàng đầu tiên bằng Thẻ: </tr>
-Đóng bảng này bằng Thẻ: </table>
Lưu ý: Thẻ </table> là bắt buộc nếu bạn muốn trang Web hiển thị bảng trong Netscape Navigator.
a-Ví dụ 1:
<html> <head> <title>Bang dau tien</title> </head> <body bgcolor="#FFFFFF" text="#000000"> <table> <tr> <td>Đây là bảng đầu tiên, bảng này chỉ có một hàng và một cột. </td> </tr> </table> </body> </html> |
Tìm hiểu cách viết của bảng trên:
1-<table>
2-<tr>
3-<td>Đây là bảng đầu tiên, bảng này chỉ có một hàng và một cột.
4-</td>
5-</tr>
6-</table>
- Dòng 1: Bắt đầu một bảng
- Dòng 2: Bắt đầu 1 hàng.
- Dòng 3: Bắt đầu một ô, và trong ô phải chứa một nội dung nào
đó. Nội dung có thể là Text, hoặc hình ảnh. (trong ví dụ này là Text : Đây là bảng đầu tiên, bảng này chỉ có một hàng và một cột - Dòng 4: Đóng ô dữ liệu
- Dòng 5: Đóng hàng trong bảng
- Dòng 6: Đóng bảng.
Cú pháp trên đây giúp bạn dễ theo dõi việc tạo một bảng. Khi đã quen
với viết codes, các tag có thể nằm trên cùng một hàng mà không cần phải
xuống hàng như cách viết trên. Đọan codes trên đây có thể viết lại như
sau:
<html> <head> <title>Bang dau tien</title> </head> <body bgcolor="#FFFFFF" text="#000000"> <table> <tr> <td>Đây là bảng đầu tiên, bảng này chỉ có một hàng và một cột. </td> </tr> </table> </body> </html> |
Khi bạn xem ví dụ trên, bạn không thấy gì ngòai dòng: Đây là bảng đầu tiên, bảng này chỉ có một hàng và một cột.. Vậy, bảng nằm ở đâu?. Nguyên nhân là với HTML, khi bạn không khai báo border= cho bảng thì trình duyệt hiểu rằng, bảng đó sử dụng border=0. Vậy cũng với đọan code trên chúng ta hãy thêm border="5" vào bảng xem sao. (5 pixels)
Ví dụ 2: Tạo viền cho bảng với thuộc tính border="số pixel"
<html> <head> <title>Bang dau tien</title> </head> <body bgcolor="#FFFFFF" text="#000000"> <table border="5"> <tr> <td>Bảng này có viền lớn bằng 5 pixel. </td> </tr> </table> </body> </html> |
để xem ví dụ trên. Rõ ràng, bây giờ bao quanh bảng là 1 khung màu xám.
Bạn có thể cho khung này một chút màu được không? Câu trả lời là bạn
chỉ cần thêm bordercolor="màu" vào trong thành phần <table>
Cũng với ví dụ trên bạn viết lại như sau:
Ví dụ 3: Thêm màu cho viền với thuộc tính bordercolor="màu"
<html> <head> <title>Bang dau tien</title> </head> <body bgcolor="#FFFFFF" text="#000000"> <table border="5" bordercolor="yellow"> <tr> <td>Bảng này có viền = 5px và màu viền là vàng. </td> </tr> </table> </body> </html> |
để xem ví dụ trên. Bạn đã tạo được một bảng có độ rộng của viền bằng
5px và màu của viền là vàng. Bạn có thể thực hành với các giá trị màu và
pixel khác nhau để quen dần.
Đến đây chắc bạn nghĩ rằng, có thể thêm màu cho viền thì cũng có thể thêm màu cho nền. Được mà, chỉ cần bạn thêm thuộc tính bgcolor="màu" vào thành phần bảng (thuộc tính này bạn đã quen trong bài 9). Dùng ví dụ trên, hãy thêm thuộc tính bgcolor="red" vào bảng. Như đọan codes bên dưới:
Ví dụ 4: Thêm màu màu nền cho bảng với thuộc tính bgcolor="màu"
<html> <head> <title>Bang dau tien</title> </head> <body bgcolor="#FFFFFF" text="#000000"> <table border="5" bordercolor="yellow" bgcolor="red"> <tr> <td>Bảng này có viền = 5px và màu viền là vàng, màu nền đỏ. </td> </tr> </table> </body> </html> |
Nếu thêm màu nền, hẳn cũng có thể sử dụng ảnh nền cho bảng. Không sai, bạn có thể thay thế thuộc tính bgcolor="màu" bằng thuộc tính background="taptinanh.gif". (Xem bài 9- Ảnh nền cho thành phần body). Khi đó bạn phải có tập tin ảnh nền có phần mở rộng là .jpg hoặc gif).
Đến đây, bạn thấy rằng thuộc tính background= "", bgcolor="" ngòai xác định màu nền và ảnh nền cho thành phần body của trang, nó còn được dùng cho cả bảng, hàng(chỉ dùng bgcolor),
và cột...Đây là mối quan hệ của thuộc tính với thành phần, không chỉ
trong HTML mà cả Javascript, CSS và nhiều ngôn ngữ khác có dùng ngôn ngữ
HTML. Và bạn càng ngạc nhiên khi thấy được sự giống nhau trong quan
hệ của Thành phần-Thuộc tính hay Đối tượng-Thuộc tính hay Đối
tượng-Phương pháp trong nhiều ngôn ngữ lập trình. Cái cơ bản là chúng
ta nhớ, hình dung và sắp xếp chúng theo trật tự hợp lý.
Phần 1 đã giới thiệu những cơ bản nhất về bảng. Để khám phá tiếp cách
dùng các thuộc tính còn lại và tạo những bảng phức tạp, chúng ta sẽ
tiếp tục với phần 13, 14, 15, 16.
Hết bài 12.
Nguồn: Sưu tầm Internet
