Tạo bảng (table) trong html


Tự học html css javascript 06/11/2015 Cùng chuyên mục

Trình bày thẻ tạo bảng (table) trong html - bảng là dữ liệu có tính cấu trúc: bảng (table) - được tạo bởi các dòng (row) - các dòng được tạo bởi các ô (cell). Tìm hiểu cách hiệu chỉnh bảng: thay đổi border - cellspacing - cellpadding - table bgcolor ...

Làm việc với bảng

Chúng ta có thể sử dụng bảng để hiển thị dữ liệu dưới dạng các hàng và các cột. Bảng giúp cho chúng ta điều khiển, xác định và sắp xếp vị trí của văn bản và hình ảnh trên trang web, thay vì giao tất cả các việc đó cho trình duyệt.

bảng - table - trong html

Hình 1: Mô hình bảng

 Cách tạo bảng

Để tạo bảng chúng ta phải phác hoạ nội dung cho bảng: 

  • Bảng (table) có chức năng nhiệm vụ gì?
  • Có bao nhiêu cột (col) ?
  • Bao nhiêu dòng (row) ?
  • Chiều dài (height), chiều rộng (width), nội dung (content) của mỗi ô (cell) là gì?

Trong bảng, chiều rộng hay chiều dài đều được tính bằng đơn vị pixel. Thẻ <table> được dùng để tạo bảng trong tài liệu HTML. Các thuộc tính của phần tử <table> được áp dụng cho việc định dạng khung nhìn ( dòng kẻ, khoảng cách giữa các ô [cell spacing] - căn lề đổ dữ liệu [cell padding] nhưng không cho dữ liệu hiển thị trên bảng. Đơn vị cơ bản của bảng là một ô (cell) và được định nghĩa bằng thẻ <td>. Một hàng của bảng được định nghĩa bằng thẻ <tr> - một hàng sẽ có 1 hoặc nhiều ô (cell). 

Ví dụ 1: Tạo bảng hiển thị số thự tự - tương ứng với tên thành phố Việt Nam. Bảng này sẽ có phần tiêu đề là STT và Thành Phố, có 2 cột dữ liệu, trong ví dụ chỉ có 2 dòng dữ liệu cho 2 thành phố: TP HCM và Hà Nội

<table>
	<thead> <!-- tạo tiêu đề cho bảng 
		<th>STT</td> <!-- cột dữ liệu thứ 1 -->
		<th>Thành Phố</td> <!-- cột dữ liệu thứ 2 -->
	</thead> <! -- kết thúc tiêu đề bảng
	<!-- dữ liệu -->
	<tbody>
	<tr> <!-- bắt đầu 1 dòng dữ liệu
		<td>1</td> <!-- ô dữ liệu thứ 1 -->
		<td>Hà Nội</td> <!-- ô dữ liệu thứ 2
	</tr> <!-- kết thúc 1 dòng dữ liệu -->
	<tr>
		<td>2</td>
		<td>TP HCM</td>
	</tr>
	</tbody>
	<!-- kết thúc phần dữ liệu -->
</table>

Bảng được trình bày theo cấu trúc: 

  • Tiêu đề (header)
  • Nội dung chính - phần dữ liệu (body)
  • Phần chân của bảng ( footer)

Để tạo tiêu đề - sử dụng thẻ <thead> , mỗi tiêu đề nằm trong thẻ <th>, phần thân của bảng (phần dữ liệu) được đặt trong thẻ <tbody> - cuối cùng phần chân của bảng (footer) - được đặt trong thẻ <tfoot> - các phần tử của thẻ tfoot cũng đặt trong thẻ <th>.

Các ô tạo thành một hàng. Các hàng tạo thành bảng. Điều này được nói đến trong cú pháp của HTML được sử dụng để tạo bảng. Thẻ <td> được lồng trong thẻ <tr>. Thẻ tr được nằm trong thẻ table ( quan hệ phân cấp - cha con).

Hiệu chỉnh bảng

Tạo khung viền (border) cho bảng

Thuộc tính Border trong thẻ TABLE, với Border =n, trong đó n là độ dày đường viền tính bằng pixel sẽ giúp tạo khung viền cho bảng. HTML mặc định n=2 pixel. Thuộc tính Border ảnh hưởng đến toàn bộ khung viền, kể cả các đường phân chia (các ô ) trong bảng.

Thực chất là khung viền luôn luôn tồn tại, thuộc tính Border chỉ quyết định việc hiển thị hay không hiển thị khung viền. Để xoá thuộc tính khung viền, ta đặt giá trị cho thuộc tính border=0.

Ví dụ 2: Đặt khung viền cho table có độ dày 1 pixel
<table border=1>

Thông thường, màu của khung viền của một bảng giống với màu nền, nhưng ta có thể thay đổi màu của khung viền để làm ra sự khác biệt đó.

Cú pháp:
BORDERCOLOR = “#rrggbb”hoặc BORDERCOLOR= “tên màu”

Ví dụ 3: Nếu muốn tô màu đỏ cho khung viền với bảng có Border = 2 ta sẽ viết
như sau:
<TABLE BORDER=2 BORDERCOLOR= "Red">

Đổi màu nền cho bảng

Bên cạnh đó ta còn có thể thiết đặt một màu nền cho toàn bảng. Màu nền sẽ giúp làm nổi bật bảng, tạo cho người duyệt phải chú ý đến nội dung của bảng. Có thể định màu nền cho cả bảng hoặc chỉ một vài ô trong bảng đều được.

Cú pháp:
<table bgcolor="color code ( mã hexa) hoặc color name như: red, ... "

Thay đổi kích thước bảng

Trình duyệt sẽ tự động định dạng chiều rộng bảng bằng cách tính chiều rộng của văn bản chứa bên trong. Tuy nhiên người thiết kế vẫn có thể định dạng kích cỡ để ước lượng được các khoảng trống.

Cú pháp:
<TABLE WIDTH= "x" HEIGHT= "y">

Tương tự như trên ta có thể định dạng kích thước ô. Việc thay đổi kích thước của
ô dẫn đến thay đổi kích thước của cả các ô khác trong hàng.

Cú pháp:
<TH WIDTH= "x" HEIGHT= "y">
<TD WIDTH= "x" HEIGHT= "y">
Ngoài ra ta còn có thể canh bảng trên trang bằng thuộc tính quen thuộc ALIGN

Cú pháp:
<TABLE ALIGN= "">
Các giá trị: left : căn trái - phải: right - giữa: center 

(*)
- căn lề chỉ có tác dụng với HTML 4 ; HTML 5: phải sử dụng css

Gom nhóm các cột, gom nhóm các dòng

Đôi khi chúng ta muốn gom các dòng và các cột vào trong một ô. Như vậy, chúng ta tạo một cột để kéo rộng ra cho hơn một dòng, hay tạo ra một dòng để kéo rộng ra cho hơn một cột. Thuộc tính COLSPANROWSPAN được sử dụng để tạo ra những ô mà chúng có thể kéo rộng ra cho hơn một dòng hay cột. Thuộc tính COLSPAN được sử dụng với thẻ <TH>, trong khi đó thuộc tính ROWSPAN được sử dụng với thẻ <TD>.

Cú pháp:
<TD COLSPAN = n </TD> với n là số cột mà ô đó trải qua
<TD ROWSPAN = n </TD> với n là số hàng mà ô đó trải qua.

Ví dụ 4:

<HTML>
	<HEAD>
	<TITLE> Gom Nhom Cot Va Dong </TITLE>
	</HEAD>
<BODY>
	<TABLE bodercolor = red width = "100%" border = "1" cellspacing = 1
	cellpadding = "0" align = left >
	<TR>
		<TD rowspan = 4 align = center> HỌC KỲ I </TD> <!-- gom nhóm 4 dòng dữ liệu -->
		<TD colspan = 4 align = center> KẾT QUẢ HỌC TẬP </TD> <!-- gom nhóm 4 cột họ tên ... hóa -->
	</TR>
	<TR>
		<TD align = "center" valign = "top"> Họ và tên </TD>
		<TD align = "center" valign = "middle"> Toán </TD>
		<TD align = "center" valign = "middle"> Lý </TD>
		<TD align="center" valign=""middle"> Hoá </TD>
	</TR>
	<TR>
		<TD align = "center" valign = "top"> Nguyễn Vân Anh </TD>
		<TD align = "center" valign = "middle"> 7 </TD>
		<TD align="center" valign="middle"> 8 </TD>
		<TD align="center" valign="middle"> 9 </TD>
	</TR>
	<TR>
		<TD align = "center" valign = "top"> Trần Thuỳ Linh </TD>
		<TD align = "center" valign = "middle">6 </TD>
		<TD align="center" valign="middle"> 8 </TD>
		<TD align="center" valign="middle"> 6 </TD>
	</TR>
	</TABLE>
</BODY>
</HTML>

Sử dụng hình ảnh làm nền cho bảng

Để sử dụng hình ảnh làm nền bạn cần chú ý độ tương phản của hình nền và nội dung bảng.

Cú pháp:
<TABLE Background = "image.gif"> tạo ảnh nền cho toản bảng
<TD Background = "image.gif"> tạo ảnh nền cho một ô

Điều chỉnh kích thước các ô (cell spacing) - khoảng cách dữ liệu và đường viền trong ô (cell padding)

Thay đổi 2 thuộc tính cellspacingcellpadding của thẻ table. Mặc định cell padding = 0, ta nên để một giá trị khác như 2; 4; ... để nhìn đẹp hơn.

Ví dụ 5: Đặt khoảng cách cell spacing = 0; cell padding: 4px
<table cellspacing="0" cellpadding="4px"> 

TỔNG KẾT

Sau bài này - các bạn nắm được các thẻ dùng để trình bày dữ liệu kiểu bảng trong html - cũng như biết cách hiệu chỉnh bảng: đường kẻ, màu nền, gom nhóm cột - dòng, thay đổi kích thước. Bài sau các bạn sẽ tìm hiểu một kiểu trình bày dữ liệu đặc biệt khác của HTML - form, dùng để nhập liệu - đến đây tài liệu html không còn đơn thuần chỉ để hiển thị văn bản, hình ảnh,... nó còn cung cập phương tiện để người dùng tao tác với máy chủ. 




Bình luận:


tự học html