Bài 14: Định chiều rộng và chiều cao cho bảng-Phần 3

Admin

Admin

Admin

Họ tên : Nguyễn Ích Hoàn

Bài viết : 3191

Xu : 9210

Thanks : 8
Age

Age : 34
Đến từ : Thanh Hóa

Tài Sản:
.:

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à %.

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:

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:

Đế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.

Nguồn: Sưu tầm Internet

1 Bài 14: Định chiều rộng và chiều cao cho bảng-Phần 3 Sat Nov 03, 2012 8:22 pm

Admin