BÀI 13 : Định chiều rộng và chiều cao cho bảng
Unknown |
19:41 |
Thủ thuật Blogspot
Thứ Tư, 27 tháng 1, 2010
Thư viện Thủ thuật » (TVTT) - Khi nói đến độ rộng Width= và chiều cao Height= 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ẻ:
đó 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=""
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ẻ
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ẻ
để 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ẻ 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:
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:
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 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.
Bạn có thể thực hành bài học này Ở ĐÂY
Tags:
Thủ thuật Blogspot
|
cung cap standee
Ý kiến bạn đọc [ 0 ]
Ý kiến của bạn