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

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: 10084-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.
  • Ảnh minh họa
    Một trong những form dễ nhất để tạo là một trang phản hồi - một vị trí trong site của ta nơi những khách tham quan có thể gửi cho ta một lời nhận xét góp ý riêng tư. Điều này cung cấp một dịch vụ tiện lợi cho những khách tham quan của ta và có một ưu điểm thư hai – nó cho phép ta bỏ qua địa chỉ email của ta từ site của ta.
  • Ảnh minh họa
    Khi ta sử dụng FrontPage để tạo một Web site, nó sẽ làm việc với nhiều file ở hậu cảnh trong suốt quá trình chuẩn bị một trang. Ví dụ, nếu site của ta sử dụng một theme, sẽ có hơn hai chục file đồ họa và các thư mục con của nó. Những file này không bao giờ được biểu diễn trực tiếp cho những người tham quan site của ta.
  • Ảnh minh họa
    Trong FrontPage, các wizard có thể được xem là các template thông minh. Chúng có thể được sử dụng để tạo các site và các trang Web quá phức tạp đến nỗi không thể xử lý bằng một template.
  • Ảnh minh họa
    Một thư mục con _private của một Web site, thư mục con này ban đầu rỗng, có thể được sử dụng để làm vị trí cho các file mà đã được che giấu các khách tham quan đến Web site của ta. Nếu ta tạo một Web site nơi khách tham quan có thể cung cấp cho ta các địa chỉ thư tín của họ, thư mục này có thể được sử dụng làm một nơi để ngăn ngừa thông tin này khỏi những cặp mắt soi mói
  • Ảnh minh họa
    Khi ta làm việc trên một Web site bằng FrontPage, phần mềm tạo ra một số thư mục và file được sử dụng nhằm bảo trì site (ví dụ: FrontPage theo dõi khi nào từng file của site được xuất cuối cùng từ máy tính của ta lên World Wide Web).
  • Ảnh minh họa
    Các site được quản lý bởi FrontPage được tổ chức với việc sử dụng các file thư mục của máy tính. Một site chiếm một thư mục chính và một số thư mục con, mỗi thư mục con phục vụ một mục đích khác nhau
  • Ảnh minh họa
    Bất kỳ text hoặc đồ họa ở trên một trang Web có thể có một hyperlink được kết hợp với nó. Liên kết này có thể trỏ vào một trang hoặc một file trên cùng một Web site, một site trên Web, hoặc bất kỳ nguồn tài nguyên khác vốn có một địa chỉ internet.
  • Ảnh minh họa
    Trước khi ta bắt đầu làm việc với hình ảnh đồ họa, điều quan trọng là ta phải biết loại nào của các định dạng ta nên sử dụng. Sự minh họa bằng hình ảnh có thể được biểu diễn trên một máy tính theo hàng chục dạng khác nhau nhưng người thiết kế Web cần quen thuộc với ba dạng: GIF, JPEG, và PNG.
  • Ảnh minh họa
    Một trong những điều làm bối rối những nhà thiết kế trang Web lần đầu tiên là trạng thái hay thay đổi của một trang Web. Text, đồ họa và những phần khác hay thay đổi của một trang Web di chuyển phụ thuộc vào cách chúng được trình bày.
  • Ảnh minh họa
    Các tài liệu trên World Wide Web có thể được nối kết lại với nhau bằng các hyperlink – các vùng có thể click của một trang Web nhằm làm cho một trang mới hoặc một loại file khác được mở trong một trình duyệt Web.
  • Ảnh minh họa
    Như trong bài kiểu dữ liệu chúng ta đã làm quen với kiểu dữ liệu mảng, trong phần này chúng ta tiếp tục tìm hiểu các khai báo, truy cập và tương tác với tập tin từ mảng một chiều, hai chiều.
  • Ảnh minh họa
    PHP là kịch bản được xem là tốt nhất cho xử lý chuỗi, bằng cách sử dụng các hàm xử lý chuỗi, bạn có thể thực hiện các ý định của mình khi tương tác cơ sở dữ liệu, tập tin hay dữ liệu khác.
  • Ảnh minh họa
    Khi bạn gọi trang chèn này một mình ví dụ tom.htm, nếu bên trong có mã PHP thì mã đó không được thông dịch. Nếu những trang chèn này có nhu cầu gọi một mình thì bạn có thể chuyển chúng thành trang PHP thay vì htm như đã trình bày.
  • Ảnh minh họa
    Tuỳ thuộc vào ý tưởng thiết kế mỗi phần như trên bao gồm các thuộc tính mà nhà thiết kế cần trình bày sao cho phù hợp. Tuy nhiên, phần body là phần trình bày nội dung chính của mỗi trang web.
  • Ảnh minh họa
    Khi bạn muốn thống nhất nội dung trong những thẻ khác của một trang web thì khai báo một định dạng trong thẻ style. Tuy nhiên, khi đặt tên trùng với thẻ HTML, mọi thẻ đó trong trang sẽ cùng chung một định dạng.
  • Ảnh minh họa
    Trong trường hợp loại bỏ tất các session đang tồn tại thì sử dụng hàm session_unset(). Ví dụ dùng hàm này để lạoi bỏ session và dùng hàm sessin_destroy để huỷ tất cả session đó khai báo trong trang unset.php.
  • Ảnh minh họa
    Trong PHP4.0 đối tượng Session được xem như một đối tượng cho phép bạn truyền giá trị từ trang PHP này sang PHP khác. Để sử dụng Session, bạn khai báo thư mục được lưu trữ dữ liệu do đối tượng nay ghi ra.
  • Ảnh minh họa
    Trong bài học này chúng tôi giới thiệu đến cho các bạn các phép gán, các toán tử, đồng thời giúp cho các bạn hiểu thêm vào các phát biểu có điều kiện như while, for, switch, ….
  • Ảnh minh họa
    Khi bạn lập trình trên PHP là sử dụng cú pháp của ngôn ngữ C, C++. Tương tự như những ngôn ngữ lập trình khác, toán tử giúp cho bạn thực hiện những phép toán như số học hay trên chuỗi.
  • Ảnh minh họa
    Khi sử dụng biến form bạn tránh trường hợp khai báo biến cục bộ hay toàn cục trong tang PHP cùng tên với thẻ nhập liệu của form trước đó submit đến hay tham số trên querystring.
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ả.