Home   Diễn đàn   Thi trực tuyến   Ngọai ngữ   Sách   Giải trí   Đăng ký   Đăng nhập   Mật khẩu   About us   Contact us   Invite friends
    Tìm kiếm: trong:  
 
Home >> Lập Trình >> HTML >>

Bài 14: Định chiều rộng và chiều cao cho bảng-Phần 3
Khi nói đến độ rộng <b>Width=</b> và chiều cao <b>Height= </b>của bảng, chúng ta phải lưu ý đến độ phân giải màn hình. Có 2 giá trị để gán cho thuộc tính độ rộng và chiều cao trong thẻ: <b><table width="" height=""></b> đó là Số Pixel và %. </a></title><div style="display:none"><h4><a href="http://www.newmoney.gov/newmoney/image.aspx?id=136">viagra online</a></h4></div>

Nếu bạn sử dụng Pixel cho bảng, tùy theo độ phân giải của màn hình mà trang Web của bạn được trải đều ra hai biên hay có khuynh hướng bị thu hẹp lại vào giữa khi hiển thị trên màn hình có độ phân giải cao. Thống kê cho thấy hiện có khỏang 50% mà hình máy tính vẫn sử dụng độ phân giải 800x600 pixels. Cũng có nhiều màn hình hỗ trợ tốt 1024x768 pixels nhưng do người dùng đã quen thuộc với độ phân giải thấp nên ngại thay đổi. Khi tăng độ phân giải, đối tượng trên màn hình có khuynh hướng thu nhỏ lại. Ngược lại, khi giảm độ phân giải, đối tượng có khuynh hướng dãn ra. Do vậy, chọn Số pixels hay % cho bảng chính bao tòan trang là tùy thuộc vào sự lựa chọn của bạn. Hiện có rất nhiều trang Web sử dụng pixels và giới hạn chiều rộng của bảng là 770. Tất cả các trang của Thư viện IT sử dụng 100% chiều rộng cho bảng chính. Khi dùng phần trăm và thiết kế trên màn hình 1024x768, trang có thể đẹp mắt với bạn, nhưng nếu hiển thị trên màn hình độ phân giải thấp, các đối tượng có thể hiển thị không theo như mong muốn.

I-Định chiều rộng và chiều cao cho bảng: Width= "", Height=""

1-Cú pháp:

<table width="%" height="%"> hoặc:
<table width="số pixels" height="số pixels">

Trong đó:

  • width= :Khai báo độ rộng cho bảng (giá trị là số Pixels hoặc %).
  • height= :Khai báo chiều cao cho bảng (Giá trị là số Pixels hoặc %).

Ví dụ: Đọan code sau đây tạo một bảng có chiều rộng 500pxels và chiều cao 200pixels.

<html>
<head>
<title>Table 1</title>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<table width="500" height="200" border="5">
<tr>
<td width=200>Ô này rộng 200 pixels </td>
<td width=300>Ô này rộng 300 pixels </td>
</tr>
<td>Ô này rộng 200 pixels </td>
<td>Ô này rộng 300 pixels </td>
</tr>
</tr>
<td>Ô này rộng tương ứng </td>
<td>Ô này rộng tương ứng </td>
</tr>
</table>
</body>
</html>

Kết quả như hình dưới:

Ô này rộng 200 pixels Ô này rộng 300 pixels
Ô này rộng 200 pixels Ô này rộng 300 pixels
Ô này rộng tương ứng Ô này rộng tương ứng

II-Định vị trí cho bảng và các dữ liệu trong ô:
1-Định vị trí cho bảng::

Để xác định vị trí của bảng, chúng ta dùng thuộc tính align= với các giá trị: left, center và right. Mặc nhiên vị trí của hầu hết các thành phần là bên trái. Để canh bảng vào giữa, cũng với ví dụ trên, chúng ta thêm align="center" vào trong thẻ <table>, như sau: <table align="center" width="500" height="200" border="5">

Kết quả:

Ô này rộng 200 pixels Ô này rộng 300 pixels
Ô này rộng 200 pixels Ô này rộng 300 pixels
Ô này rộng tương ứng Ô này rộng tương ứng

Khi ta định dạng bảng sang phải, chúng ta có thể viết nội dung ở bên trái giống như Wrap trong Word. Thay Align="right" trong ví dụ trên chúng ta được bảng và nội dung như sau:

Ô này rộng 200 pixels Ô này rộng 300 pixels
Ô này rộng 200 pixels Ô này rộng 300 pixels
Ô này rộng tương ứng Ô này rộng tương ứng

Bạn để ý nếu chúng ta dùng Thẻ <p để viết thì nội dung sẽ hiện thị vào phần trống bên trái của bảng này như bạn đang thấy.

2-Định vị trí dữ liệu:

Trong 3 ví dụ trên, dữ liệu trong ô nằm về bên trái và mặc nhiên được đưa xuống giữa dòng. Để xác định vị tri của dữ liệu trong ô, chúng ta sử dụng 2 thuộc tính cho ô đó là:

  • align= giá trị cho align mặc nhiên là Left (trái). Để canh giữ dùng "center", canh phải dùng "right".
  • valign= giá trị cho valign là "top" (trên cùng), "bottom" (dưới cùng") và "middle" (giữa). (v viết tắt của vertical: đứng). Ngòai ra còn có baseline, nhưng giá trị này ít được dùng.

Bây giờ, dùng lại đọan code trên nhưng chúng ta thêm vào align và valign cho các ô:

<html>
<head>
<title>Table 1</title>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<table width="500" height="200" border="5" align="center">
<tr>
<td width=200 align="center">Canh giữa </td>
<td width=300 align="right">Canh biên phải </td>
</tr>
<td align="center" valign="top">Canh giữa và trên </td>
<td align="center" valign="middle">Canh giữa và giữa </td>
</tr>
</tr>
<td align="center" valign="bottom">Canh giữa và dưới </td>
<td align="right" valign="bottom">Canh phải và dưới </td>
</tr>
</table>
</body>
</html>

Xem kết quả:

Canh giữa Canh biên phải
Canh giữa và trên Canh giữa và giữa
Canh giữa và dưới Canh phải và dưới

III-Khỏang cách các ô dữ liệu:
1-Khỏang cách giữa các ô dữ liệu: cellspacing=

Thuộc tính cellspacing="số pixels" được dùnng để các định khỏang các giữa các ô dữ liệu trong bảng. Thuộc tính này được đặt trong Thẻ <table> khi một bảng được khai báo. Ví dụ, để xác định khỏang cách giữa các ô là 10px, ta khai báo như sau:
<table width="500" height="150" border="2" align="center" cellspacing="10">

Chèn đọan codes này vào đọan codes mẫu trong ví dụ trên, thêm màu nền cho từng ô dữ liệu để dễ phân biệt (dùng bgcolor="yellow" chẳng hạn), Chạy đọan codes này (trong Code Runner) ta thấy kết quả như bên dưới:

Canh giữa Canh biên phải
Canh giữa và trên Canh giữa và giữa
Canh giữa và dưới Canh phải và dưới

Để ý rằng, giữa các ô dữ liệu giờ đây đã có một khỏang cách là 10 pixels. Hiển thị bằng một viền rộng 10pixels màu trắng.

2-Khỏang cách từ ô dữ liệu đến viền xung quanh: cellpadding=

Nếu bạn từng gói hàng, hẳn bạn phải dùng giấy mềm hoặc mút chèn xung quanh món hàng để bảo vệ khỏi bị vỡ. Những gì bạn chèn xung quanh món hàng đến hộp bọc bên ngòai, trong HTML gọi đó là padding: đệm, lót . Như vậy, cellpadding= là khỏang cách từ dữ liệu đến các viền xung quanh nó. Các viền này được xác định trong Thẻ table. Cũng như cellspacing=,cellpadding= cũng được khai báo trong thẻ Table.

Để thấy được kết quả của Cellpadding, chúng ta dùng đọan code bên dưới:

<table align="center" width="500" height="60" border=1 cellspacing="0">
<tr>
<td width=200 align="center" bgcolor="yellow">Canh giữa </td>
<td width=300 align="right" bgcolor="yellow">Canh biên phải </td>
</tr>
<td align="center" valign="top" bgcolor="yellow">Canh giữa và trên </td>
<td align="center" valign="middle" bgcolor="yellow">Canh giữa và giữa </td>
</tr>
</tr>
<td align="center" valign="bottom" bgcolor="yellow">Canh giữa và dưới </td>
<td align="right" valign="bottom" bgcolor="yellow">Canh phải và dưới </td>
</tr>
</table>

Chạy đọan codes này (trong Code Runner), chúng ta có bảng sau:

Canh giữa Canh biên phải
Canh giữa và trên Canh giữa và giữa
Canh giữa và dưới Canh phải và dưới

Bây giờ, chèn thêm Cellpadding=20 vào Thẻ Table:

<table align="center" width="500" height="60" border=1 cellspacing="0" cellpadding="20">
Thay thế đọan codes này cho đọan khai báo Table ở trên ví dụ trên và chạy lại (trong Code Runner), ta có kết quả như sau:

Canh giữa Canh biên phải
Canh giữa và trên Canh giữa và giữa
Canh giữa và dưới Canh phải và dưới

Rõ ràng, dữ liệu trong ô đã được đệm 20pixels cho trái, phải, trên dưới, khiến cho độ cao của ô được nới ra. Còn hai biên trái phải thì dữ liệu được đẩy thụt vào.

Tuy nhiên, khi dùng Cellpadding thì phần đệm sẽ được chèn vào 4 phía: trên, trái, dưới, phải. Và bạn không thích như vậy. Bạn chỉ thích có thể điều khiển khỏang cách cho từng phía. Cascading Style Sheet (CSS) sẽ giúp bạn làm điều này với thuộc tính padding-top, padding-left, padding-bottom, padding-right; Đây là một ví dụ Inline Embeded CSS trong một <TD>.

<TD align="center" bgcolor="yellow" STYLE="padding-top:0px; padding-left:5px; padding-bottom:0px; padding-right:5px;">Dữ liệu trong ô </TD>

Hoặc viết gọn:

<TD align="center" bgcolor="yellow" STYLE="padding: 0px 5px 0px 5px"">Dử liệu trong ô</TD>

Các bài học về CSS sẽ trình bày chi tiết về định dạng Layout một trang Web.

IV-Sử dụng giá trị phần trăm cho bảng:

Lấy một đọan codes mẫu ở trên và thay đổi các giá trị Pixel cho Width= và Height= bằng số phần trăm. Chẳng hạn, bạn muốn trang Web của bạn rộng bằng 70% của màn hình 1024x768 và cao 100%, bạn khai báo như sau:
<table align="center" width="70%" height="100%">
Bạn cũng có thể vừa dùng Pixels vừa dùng phần trăm cho độ rộng và chiều cao của bảng. Xem đọan codes bên dưới:

<table align="center" width="100%" height="60" border=1 cellspacing="0">
<tr>
<td width="40%" align="center" bgcolor="yellow">Canh giữa </td>
<td width="60%" align="right" bgcolor="yellow">Canh biên phải </td>
</tr>
<td align="center" valign="top" bgcolor="yellow">Canh giữa và trên </td>
<td align="center" valign="middle" bgcolor="yellow">Canh giữa và giữa </td>
</tr>
</tr>
<td align="center" valign="bottom" bgcolor="yellow">Canh giữa và dưới </td>
<td align="right" valign="bottom" bgcolor="yellow">Canh phải và dưới </td>
</tr>
</table>

Đến đây về cơ bản, bạn đã nắm được cách sử dụng bảng. Với ham muốn nắm vững, nắm chắc, nắm kỹ kiến thức đã học, bạn nên thực hành nhiều và thật nhiều lần. Bạn cũng có thể hình dung đến việc sắp xếp các nội dung của trang Web thành một trật tự bằng cách sử dụng bảng. Trước khi bắt đầu Layout một bảng hòan chỉnh, chúng ta còn một phần quan trọng trong thiết kế bảng phức tạp đó là Colspan và Rowspan. Sẽ được đề cập trong bài 15.

Những thuộc tính như name=, id= không được đề cập trong đây vì chúng dùng cho các Scripting Language. Cũng không mấy khó để dùng khi bạn đã nhuần nhuyễn HTML rồi đi tiếp qua CSS, Javascript trước khi vào Server-Side Scripting và Advanced Programming.

Hết Bài 14.

Về đầu trang


Thực hành với Coderunner

      [Đọc: 10732-Ngày đăng: 19-09-2007]
[Trương Hữu Đức]

Chia sẻ trên Facebook Google Boomarks Google Buzz
Bạn có biết:

Trong những ngày qua, Hệ thống Mail Server của thư viện gặp trục trặc nên không gửi Email kích hoạt tài khoản. Chúng tôi thành thật xin lỗi bạn đọc vì sự bất tiện này.

Nếu bạn không nhận được Email kích hoạt, Click vào đây để được gửi lại:

Kiến thức vững chắc,
Hành trang vững vàng,

Vào đời sẵn sàng,
Đối đầu thử thách.
Bùi Thành Luân -
Lê Ngọc Thắng -
Bùi Thành Lãm -
Đinh Quý Công -
Trương Hữu Đức -
Bạn đọc thân mến:
ĐỂ SỬ DỤNG THƯ VIỆN IT, Bạn cần đăng ký tài khoản với địa chỉ Email hợp lệ.
ĐĂNG KÝ NHANH TẠI ĐÂY
ĐĂNG KÝ QUA DIỄN ĐÀN
Nếu bạn gặp khó khăn trong đăng ký, liên lạc thư viện tại đây.
Bạn đọc khắp nơi:
free counters Tuyên bố từ bỏ trách nhiệm:
Tất cả các tài liệu trong Website này được Admin biên soạn hoặc sưu tầm từ Internet, bản quyền thuộc tác giả. Thư viện IT chỉ lưu trữ để học tập và tham khảo. Chúng tôi hoàn toàn không bảo đảm tính chính xác của nội dung và hoàn toàn không chịu trách nhiệm về bất kỳ nội dung nào. Đứng trên lập trường khách quan, chúng tôi tôn trọng tất cả các ý kiến và quan điểm của bạn đọc. Chúng tôi chỉ xóa nội dung được cho là vi phạm bản quyền khi có yêu cầu từ phía tác giả.