Làm Việc Với Thẻ Table Trong HTML

Hiện tại để dựng layout của một trang web thì có vẻ CSS là từ ngữ được sử dụng thông dụng nhất. Không những thế trước đó khi CSS còn chưa thông dụng thì cách dễ dàng nhất để tạo thành các layout là sử dụng thẻ <tablevàgt; trong HTML. Vậy thẻ <tablevàgt; có cấu tạo như vậy nào? sử dụng nó ra sao tất cả chúng ta sẽ cùng với nhau tìm tòi ở bài học này nhé. Nào let’s go!

1. Cấu tạo căn bản của thẻ table

Như tất cả chúng ta thường thấy một bảng (table) thông thường gồm các hàng & các cột khác nhau. Trong HTML cũng như vậy. Để trổ tài một bảng tất cả chúng ta dùng thẻ <tablevàgt; </tablevàgt;, bên trong table đó thì gồm các hàng được trình diễn bởi thẻ <trvàgt; </trvàgt; & các cột được trình diễn bằng thẻ <tdvàgt; </tdvàgt;. Cảnh báo bên trong thẻ <trvàgt; thì chỉ có thể có thẻ <tdvàgt;. Chẳng hạn:

<

html

>

<

head

>

<

title

>

Thẻ Table Trong HTML

</

title

>

<

meta

charset

=

"utf-8"

>

</

head

>

<

body

>

<

table

>

 

<

tr

>

 

<

td

>

1

</

td

>

 

<

td

>

2

</

td

>

 

<

td

>

3

</

td

>

 

</

tr

>

 

<

tr

>

 

<

td

>

4

</

td

>

 

<

td

>

5

</

td

>

 

<

td

>

6

</

td

>

 

</

tr

>

</

table

>

</

body

>

</

html

>

Kết quả:

Một bảng được tạo thành với 2 hàng 3 cột

Một số trình duyệt auto ra đời các đường viền bao quanh các hàng, cột, bảng. Bạn cũng có thể thêm tùy biến bài trí bảng bằng các tính chất như sau:

<

html

>

<

head

>

<

title

>

Thẻ Table Trong HTML

</

title

>

<

meta

charset

=

"utf-8"

>

</

head

>

<

body

>

<

table

width

=

"600px"

border

=

"1"

cellspacing

=

"0"

cellpadding

=

"0"

>

 

<

tr

>

 

<

td

>

1

</

td

>

 

<

td

>

2

</

td

>

 

<

td

>

3

</

td

>

 

</

tr

>

 

<

tr

>

 

<

td

>

4

</

td

>

 

<

td

>

5

</

td

>

 

<

td

>

6

</

td

>

 

</

tr

>

</

table

>

</

body

>

</

html

>

2. Cách gộp các cột & hàng trong table

Để tùy chỉnh số ô của từng cột & từng hàng tất cả chúng ta sử dụng tính chất colspan & rowspan. Tính chất colspan giúp tất cả chúng ta gộp các ô gần nhau của các cột. Chẳng hạn:

<

html

>

<

head

>

<

title

>

Thẻ Table Trong HTML

</

title

>

<

meta

charset

=

"utf-8"

>

</

head

>

<

body

>

<

table

width

=

"600px"

border

=

"1"

cellspacing

=

"0"

cellpadding

=

"0"

>

 

<

tr

>

 

<

td

colspan

=

"2"

>

Hàng 1 cột 1 + hàng 1 cột 2

</

td

>

   

<

td

>

3

</

td

>

 

</

tr

>

 

<

tr

>

 

<

td

>

4

</

td

>

 

<

td

>

5

</

td

>

 

<

td

>

6

</

td

>

 

</

tr

>

</

table

>

</

body

>

</

html

>

Để gộp 2 ô cạnh nhau (ô 1 & ô 2 ) trên 2 cột khác nhau ( cột 1 & cột 2) ta đặt tính chất colspan tại ô trước hết từ bên trái qua ( ô 1 cột 1) sau đó xóa ô liền kề với nó trên cùng 1 hàng ( <tdvàgt;2vàlt;/tdvàgt; )

Xem Thêm  this method does nothing."">CanvasRenderingContext2D/restore

Support in all current engines.

Firefox

1.5+

Safari

2+

Chrome

1+

Opera

12.1+

Edge

79+

Edge (Legacy)

12+

Internet Explorer

9+

Firefox Android

4+

Safari iOS

1+

Chrome Android

18+

WebView Android

1+

Samsung Internet

1.0+

Opera Android

12.1+

Pops the top state on the stack

Kết quả:

Khi seting colspan =”2″, ô của vị trí đầu tiên tiên sẽ mở rộng ra bằng 2 cột. Nếu bạn seting colspan =”3″, ô sẽ mở rộng ra thành 3 cột. Tương đương ta có thể gộp các ô cạnh nhau của các hàng. Dưới đây tất cả chúng ta sẽ gộp ô 1 của hàng 1 & ô 4 của hàng 2 thành 1 ô.

<

html

>

<

head

>

<

title

>

Thẻ Table Trong HTML

</

title

>

<

meta

charset

=

"utf-8"

>

</

head

>

<

body

>

<

table

width

=

"600px"

border

=

"1"

cellspacing

=

"0"

cellpadding

=

"0"

>

 

<

tr

>

 

<

td

rowspan

=

"2"

>

1+4

</

td

>

 

<

td

>

2

</

td

>

 

<

td

>

3

</

td

>

 

</

tr

>

 

<

tr

>

   

<

td

>

5

</

td

>

 

<

td

>

6

</

td

>

 

</

tr

>

</

table

>

</

body

>

</

html

>

Kết quả:

3. Cách dùng <theadvàgt;, <tbodyvàgt;, <tfootvàgt; trong thẻ table

Có ba thẻ giúp phân biệt giữa bài viết chính của bảng với các vị trí đầu tiên tiên & cuối cùng (có thể chứa các bài viết khác nhau). Những thẻ này giúp tất cả chúng ta tạo thành bố cục phù phù hợp với bài viết từ đó khiến cho người xem đơn giản hiểu. Chẳng hạn

<

html

>

<

head

>

<

title

>

Thẻ Table Trong HTML

</

title

>

<

meta

charset

=

"utf-8"

>

</

head

>

<

body

>

<

table

width

=

"600px"

>

   

<

thead

>

<

tr

>

<

th

>

Cột 1

</

th

>

<

th

>

Cột 2

</

th

>

<

th

>

Cột 3

</

th

>

</

tr

>

   

</

thead

>

     

<

tbody

>

<

tr

>

 

<

td

>

1

</

td

>

 

<

td

>

2

</

td

>

 

<

td

>

3

</

td

>

 

</

tr

>

 

<

tr

>

 

<

td

>

4

</

td

>

 

<

td

>

5

</

td

>

 

<

td

>

6

</

td

>

 

</

tr

>

   

</

tbody

>

     

<

tfoot

>

<

tr

>

<

th

>

1+4=5

</

th

>

<

th

>

2+5=7

</

th

>

<

th

>

3+6=9

</

th

>

</

tr

>

   

</

tfoot

>

</

table

>

</

body

>

</

html

>

Kết quả :

Xem Thêm  Khảo sát xã hội châu Âu (ESS) - bài luận

Trong đó:

  • Các tiêu đề của từng cột nằm bên trong thẻ <theadvàgt;
  • Phần thân sẽ nằm bên trong thẻ <tbodyvàgt;
  • Phần tổng kết sẽ nằm bên trong phần tử <tfootvàgt;

Không những thế hiện tại các nhà kiến trúc thường sử dụng CSS để biến đổi giao diện của chúng. Tất cả chúng ta sẽ được học ở bài CSS.

Vậy là trong bài học này tất cả chúng ta đã tìm tòi được cách thêm một bảng vào trong một trang web rồi đúng không nào. Để có thể kiến trúc layout hoàn toàn bằng table trong HTML bạn có thể xem video chỉ dẫn tại đây. Chúc các bạn học tốt!

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