[Series học HTML cơ bản]

Phương thức nhỏ: Để tìm kiếm chuẩn xác các ấn phẩm của GiuseArt.com, hãy search trên Google với cú pháp: “Từ khóa” + “giuseart”. (Chẳng hạn: thiệp tân linh mục giuseart).

Để tìm kiếm chuẩn xác các ấn phẩm của GiuseArt.com, hãy search trên Google với cú pháp: “Từ khóa” + “giuseart”. (Chẳng hạn: thiệp tân linh mục giuseart). Tìm kiếm ngay

Chào mừng các bạn quay trở lại với loạt bài học HTML cơ bản tại Giuseart.com. Trong bài học này, tất cả chúng ta sẽ cùng tìm tòi cấu tạo & cách dùng thẻ tạo bảng trong HTML.

Các bảng trong HTML cho phép lập trình viên sắp đặt các dữ liệu như văn bản, hình ảnh, đường backlinks… vào các ô trong bảng.

Kết cấu thẻ tạo bảng trong HMTL

Bảng HTML được tạo nên bằng cách dùng cặp thẻ <tablevàgt;…</tablevàgt;. Trong số đó:

+ Thẻ tạo hàng: <trvàgt;…</trvàgt;

+ Thẻ tạo ô: <tdvàgt;…</tdvàgt;

+ Thẻ tạo tiêu đề ô: <thvàgt;…</thvàgt;. Đặt tên cho cột, các ô không khác gì với thẻ <tdvàgt; những có nó có sẵn tính chất font chữ đậm & căn giữa (align=center).

+ Thẻ tạo tiêu đề của toàn bảng: <captionvàgt;…</captionvàgt;. Đặt tiêu đề cho một bảng nên thẻ này không nằm trong hàng hay cột. Tính chất mặc định là align=”top” (không cần viết). Bên cạnh đó, bạn có thể đặt tiêu đề ở phía dưới bảng với tính chất align=”bottom”.

Kết cấu tạo một bảng trong HTML như sau:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<bodyvàgt;

<tablevàgt;

<!–Đây là thẻ khai báo bảng–>

<captionvàgt;

Bảng thực hành số 1

</cationvàgt;

<!–Đây là thẻ khai báo tiêu đề của bảng–>

 

<trvàgt;

<!–Đây là dòng số 1–>

 

<tdvàgt;

Ô 1 của dòng 1

</tdvàgt;

 

<tdvàgt;

Ô 2 của dòng 1

</tdvàgt;

 

</trvàgt;

 

<trvàgt;

<!–Đây là dòng số 2–>

 

<tdvàgt;

Ô 1 của dòng 2

</tdvàgt;

 

<tdvàgt;

Ô 2 của dòng 2

</tdvàgt;

 

</trvàgt;

</tablevàgt;

<bodyvàgt;

kết quả hiển thị sẽ là:

Để một bảng có thể hiển thị đúng trên trình duyệt, khi viết .html, tất cả chúng ta buộc cần có sự hiện ra cùng một lúc 3 loại thẻ: <tablevàgt;/<trvàgt;/<tdvàgt;. Nghĩa là, khi tạo bảng, sau khoảng thời gian khai báo thẻ <tablevàgt; cần có đầy đủ thông tin số hàng <trvàgt; & số cột của một hàng <tdvàgt;.

Xem Thêm  Top 11 kết quả tìm kiếm tai ung dung xem bong da mới nhất 2022

Các dạng bảng trong HTML

Dạng 1: Bảng đầy đủ dữ liệu

Đây là loại bảng chứa thông tin dữ liệu đầy đủ ở toàn bộ các ô của bảng, cách tạo bảng đầy đủ dữ liệu là cách dễ dàng & phổ biến nhất để tạo một bảng dữ liệu trong html. chẳng hạn:

Bạn chỉ cần tạo hàng & cột rồi nhập đầy đủ dữ liệu vào các ô với đúng cấu tạo sẽ có một bảng dữ liệu đầy đủ.

Qua bảng trên, ta có bảng được tạo với 2 dòng, mỗi dòng 2 cột.

+ Dòng 1 gồm 2 cột “Họ và tên” & “Ngày tháng năm sinh”.

+ Dòng 2 là dữ liệu “Lê Văn Thiện” & “24.01.1991”.

Dạng 2: Bảng có ô dữ liệu trống

Tạo bảng có ô dữ liệu trống thực chất là việc tạo một bảng dữ liệu đầy đủ, sau đó bạn xóa dữ liệu ở một ô bất kỳ bên trong cặp thẻ <tdvàgt;Nội_dung_cần_xóavàlt;/tdvàgt; chẳng hạn:

Dạng 3: Bảng có nhiều cột gộp thành 1 cột

Đây là loại bảng có 2 cột trở lên được gộp thành 1 cột như sau:

Trong hình trên, bạn đơn giản nhận biết cột “Thông tin khác” được tạo thành nhờ việc gộp 2 cột liền nhau. Để gộp 2 cột thành 1, tất cả chúng ta sử dụng tính chất colspan.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<

table

border

=

“1px”

>

<

tr

>

<

td

>

H

v

à

t

ê

n

<

/

td

>

<

td

colspan

=

“2”

>

Ng

à

y

th

á

ng

n

ă

m

sinh

<

/

td

>

<

/

tr

>

<

tr

>

<

td

>

L

ê

V

ă

n

Thi

n

<

/

td

>

<

td

>

<

/

td

>

<

td

>

<

/

td

>

<

/

tr

>

<

tr

>

<

td

>

L

ê

V

ă

n

Thi

n

<

/

td

>

<

td

>

<

/

td

>

<

td

>

<

Xem Thêm  three origins coopOrigin

/

td

>

<

/

tr

>

<

/

table

>

Nghiên cứu đoạn code trên, ta thấy bảng trên có 3 dòng, mỗi dòng 3 cột. Cột 2 của dòng 1 sử dụng tính chất colspan=”2″, nghĩa là nó sẽ gộp hai cột liên tiếp từ nó trở đi (cột 3). Như thế, tất cả chúng ta phải cột 3 của dòng 1 đi để tính chất colspan có hiệu lực.

Dạng 4: Bảng có nhiều dòng gộp thành 1

Đây là dạng bảng có 2 hoặc nhiều dòng gộp thành 1 như sau:

Như bảng trên, ta thấy 2 dòng ID 1 & 2 đã bị gộp chung thành 1 dòng. Để làm được điều đó, tất cả chúng ta sử dụng tính chất rowspan, chẳng hạn:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<

table

border

=

“1px”

>

<

tr

>

<

td

rowspan

=

“2”

>

H

v

à

t

ê

n

<

/

td

>

<

td

>

Ng

à

y

th

á

ng

n

ă

m

sinh

<

/

td

>

<

td

>

S

đ

i

n

tho

i

<

/

td

>

<

/

tr

>

<

tr

>

<

!

đã

x

ó

a

>

<

td

>

24.01.1991

<

/

td

>

<

td

>

0972939830

<

/

td

>

<

/

tr

>

<

tr

>

<

td

>

L

ê

V

ă

n

Thi

n

<

/

td

>

<

td

>

23.2.2016

<

/

td

>

<

td

>

0972939830

<

/

td

>

<

/

tr

>

<

/

table

>

Nghiên cứu đoạn code trên, ta thấy bảng trên có 3 hàng, mỗi hàng có 3 cột. Cột 1 của hàng 1 sử dụng tính chất rowspan=”2“, nghĩa là nó sẽ gộp một ô của dòng thứ 2 bên dưới tính từ nó. Bên cạnh đó, chúng ta phải xóa cột thứ nhất của dòng 2 để thuộc tính rowspan=”2″ có hiệu lực (Bình luận=đã xóa). & ta có kết quả như sau:

Các tính chất của thẻ <tablevàgt;

Thẻ <tablevàgt; được dùng để tạo bảng trong HTML, các tính chất của phần tử <tablevàgt; vận dụng cho bảng, nhưng không cho dữ liệu hiển thị. Thẻ <tablevàgt; có các tính chất sau:

+ Border: Tạo đường viền khung cho bảng, nhà cung cấp là px.

+ Width: Quy định chiều rộng của bảng, nhà cung cấp là px.

Xem Thêm  for example ""hey

+ Cellpadding: Quy định khoảng cách từ mép ô đến bài viết của ô, nhà cung cấp là px.

+ Cellspacing: Quy định khoảng cách giữa các ô, nhà cung cấp là px.

+ Bordercolor: Quy định màu sắc cho đường viền của bảng, giá trị là tên màu trong tiếng anh hoặc mã màu HEX.

+ Bgcolor: Quy định màu nền cho bảng, giá trị là tên màu trong tiếng anh hoặc mã màu HEX.

+ Background: Quy định ảnh nền cho bảng.

Các tính chất của thẻ <tdvàgt;

Thẻ <tdvàgt; quy định nhà cung cấp cơ bản của bảng là ô. Thẻ <tdvàgt; gồm các tính chất sau:

+ Colspan: Trộn các ô trên một hàng thành một ô (mở rộng qua nhiều cột). Colspan=”x”. Số “x” này lệ thuộc số ô trên hàng.

Rowspan: Trộn các ô trên một cột thành một ô (mở rộng ô qua nhiều hàng). Rowspan=”x”. Số “x” này lệ thuộc số ô trên cột.

+ Align: Tùy chỉnh căn lề cho văn bản trong ô theo chiều ngang. Các giá trị gồm: Left, Right, Center, Justify.

Valign: Tùy chỉnh căn lề cho văn bản trong ô theo chiều dọc. Các giá trị gồm: trên (top), dưới (bottom), giữa.

Bgcolor: Setup màu nền cho ô, giá trị là tên màu trong Tiếng Anh hoặc mã màu HEX.

Background: Setup ảnh nền cho ô.

Nowrap: Bình bình mặc định thì bài viết sẽ được bẻ dòng cho vừa khéo vào khổ rộng của từng ô. Dùng tính chất nowrap trong <tdvàgt; để cấm việc đó.

Lời kết

Như thế, tất cả chúng ta đã chấm dứt bài học thẻ tạo bảng trong html rồi. Kết luận bài học tất cả chúng ta đã biết phương pháp tạo một bảng trong HTML. Không những thế, tinh thông các loại bảng trong HTML cũng như cách sử dụng cách tính chất của bảng & ô trong bảng. Hẹn tái ngộ các bạn trong bài học tiếp theo.

Bài trước: Bài 7: Thẻ danh mục trong HTML

Bài tiếp: Bài 9: Thẻ tạo form trong HTML

 

5

/

5

(

1

bầu chọn

)

Viết một bình luận