Cách Tạo Bảng - Thẻ Table Trong HTML - Web Cơ Bản

Thẻ <table> trong HTML

1) Giới thiệu "các thành phần cơ bản của một cái bảng"

- Thông thường, bảng là một phần tử gồm có các hàng và các ô.

(một bảng sẽ có nhiều hàng và một hàng thì sẽ có nhiều ô)

- Ví dụ: Bảng bên dưới có bốn hàng, mỗi hàng có bốn ô.

- Để tạo một bảng thì chúng ta phải sử dụng kết hợp các thẻ: <table>, <tr>, <td>, <th>

- Trong đó:

• Thẻ <table> xác định phần tử là một cái bảng.
• Thẻ <tr> xác định phần tử là một hàng trong bảng.
• Thẻ <td> xác định phần tử là một ô trong hàng.
• Thẻ <th> xác định phần tử là một ô tiêu đề trong hàng.
(ô tiêu đề là ô chữ được tô đậm nổi bật giống như: Họ và tên, ngày sinh, giới tính, quê quán)

Ví dụ:

- Đoạn mã phía dưới dùng để tạo một cái bảng giống như ví dụ phía trên

<table border="1"> <tr> <th>Họ và tên</th> <th>Năm sinh</th> <th>Giới tính</th> <th>Quê quán</th> </tr> <tr> <td>Nguyễn Thành A</td> <td>1993</td> <td>Nam</td> <td>Cần Thơ</td> </tr> <tr> <td>Trần Văn B</td> <td>1985</td> <td>Nam</td> <td>Vĩnh Long</td> </tr> <tr> <td>Lê Thị C</td> <td>1990</td> <td>Nữ</td> <td>Sóc Trăng</td> </tr> </table> Xem ví dụ

2) Các thuộc tính được sử dụng trong thẻ <table>

- Thẻ <table> có tám thuộc tính thường hay được sử dụng nhất.

- Dưới đây là bảng mô tả sơ lượt về tám thuộc tính của thẻ <table> :

align	Xác định vị trí của bảng so với các văn bản xung quanh
bgcolor	Thiết lập màu nền cho bảng
border	Thiết lập đường viền cho bảng cũng như các ô trong bảng
cellpadding	Xác định khoảng cách từ nội dung của ô đến đường viền của ô
cellspacing	Xác định khoảng cách từ đường viền của ô cho đến các ô xung quanh
frame	Xác định những phần đường viền nào của bảng sẽ được hiển thị
rules	Xác định những phần đường kẻ nào nằm bên trong bảng sẽ được hiển thị
width	Xác định chiều rộng của bảng

2.1) Thuộc tính align

- Thuộc tính align dùng để xác định vị trí của bảng so với các văn bản xung quanh.

- Thuộc tính align có ba giá trị:

left	Bảng sẽ được đẩy sang trái	Xem ví dụ
right	Bảng sẽ được đẩy sang phải	Xem ví dụ
center	Bảng sẽ được đẩy ra giữa	Xem ví dụ

- Ngoài việc sử dụng thuộc tính align thì ta cũng có thể dùng thuộc tính float trong CSS để thay thế.

Ví dụ: <table border="1" style="float:right"> ... </table> Xem ví dụ

2.2) Thuộc tính bgcolor

- Thuộc tính bgcolor dùng để thiết lập màu nền cho bảng.

Ví dụ:

- Nền của bảng bên dưới có màu vàng

<table border="1" bgcolor="yellow"> ... </table> Xem ví dụ

2.3) Thuộc tính border

- Thuộc tính border dùng để thiết lập đường viền cho bảng cũng như các ô trong bảng.

- Thuộc tính border có hai giá trị:

0 (đây là giá trị mặc định)	Bảng và các ô trong bảng không có đường viền
1	Bảng và các ô trong bảng có đường viền

Ví dụ: <table border="1"> ... </table> Xem ví dụ

2.4) Thuộc tính cellpadding

- Thuộc tính cellpadding xác định khoảng cách từ nội dung của ô đến đường viền của ô.

(mặc định thì giá trị của thuộc tính cellpadding được tính theo đơn vị pixel)

Ví dụ:

- Nội dung bên trong ô cho đến đường viền của ô sẽ có khoảng cách là 30px

<table border="1" cellpadding="30"> ... </table> Xem ví dụ

2.5) Thuộc tính cellspacing

- Thuộc tính cellspacing xác định khoảng cách từ đường viền của ô cho đến các ô xung quanh.

(mặc định thì giá trị của thuộc tính cellspacing được tính theo đơn vị pixel)

Ví dụ:

- Đường viền của ô cho đến các ô xung quanh sẽ có khoảng cách là 30px

<table border="1" cellspacing="30"> ... </table> Xem ví dụ

2.6) Thuộc tính frame

- Thuộc tính frame xác định những phần đường viền nào của bảng sẽ được hiển thị.

- Thuộc tính frame sẽ có các giá trị sau:

void	Cả bốn đường viền của bảng đều KHÔNG được hiển thị
above	Đường viền phía trên của bảng sẽ được hiển thị
below	Đường viền phía dưới của bảng sẽ được hiển thị
lhs	Đường viền bên trái của bảng sẽ được hiển thị
rhs	Đường viền bên phải của bảng sẽ được hiển thị
vsides	Đường viền bên trái và bên phải của bảng sẽ được hiển thị
hsides	Đường viền phía trên và phía dưới của bảng sẽ được hiển thị
box	Cả bốn đường viền của bảng đều được hiển thị
border	Cả bốn đường viền của bảng đều được hiển thị

Xem ví dụ

2.7) Thuộc tính rules

- Thuộc tính rules xác định những phần đường kẻ nào nằm bên trong bảng sẽ được hiển thị.

- Thuộc tính rules sẽ có các giá trị sau:

none	Không có đường kẻ nào được hiển thị
rows	Chỉ những đường kẻ ngang được hiển thị
cols	Chỉ những đường kẻ dọc được hiển thị
all	Tất cả các đường kẻ ngang và dọc đều được hiển thị

Xem ví dụ

2.8) Thuộc tính width

- Thuộc tính width dùng để xác định chiều rộng của bảng.

- Giá trị của thuộc tính width có thể xác định theo một trong hai loại đơn vị:

• px (pixel)
• % (tỷ lệ phần trăm chiều rộng phần nội dung của phần tử cha của nó)

Ví dụ: <table border="1" width="100%"> ... </table> Xem ví dụ

3) Định dạng CSS mặc định

- Hầu hết các trình duyệt sẽ hiển thị phần tử <table> với định dạng CSS như sau:

table { display: table; border-collapse: separate; border-spacing: 2px; border-color: gray; }