Bảng tiêu đề html

Hiện nay để xây dựng bố cục của một trang web thì có thể CSS là ngôn ngữ được sử dụng phổ biến nhất. Tuy nhiên trước đây khi CSS còn chưa phổ biến thì cách đơn giản nhất để tạo ra các bố cục đang sử dụng thẻ trong HTML. Go to the tagcó cấu trúc như thế nào? . Đi nào

1. Cấu trúc cơ bản của bảng thẻ

Như chúng ta thường thấy một bảng (table) thông thường bao gồm các hàng và các cột khác nhau. Trong HTML cũng vậy. To show an table we used tag

, bên trong bảng đó, bao gồm các hàng được biểu thị bằng thẻ và các cột được biểu thị bằng thẻ. Lưu ý bên trong thẻ thì chỉ có thể có thẻ. Ví dụ

Kết quả

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

Một số trình duyệt tự động sinh ra 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 chọn trang trí bảng tùy chọn bằng các thuộc tính như sau

Thẻ Table Trong HTML                     123456

2. Cách sắp xếp các cột và hàng trong bảng

Để tùy chỉnh số ô của từng cột và từng hàng chúng ta sử dụng thuộc tính colspan và rowspan. Thuộc tính colspan giúp chúng ta khai thác các ô gần nhau của các cột. Ví dụ

Thẻ Table Trong HTML                     Hàng 1 cột 1 + hàng 1 cột 23456

Để sắp 2 ô Cạnh nhau (ô 1 và ô 2 ) trên 2 cột khác nhau ( cột 1 và cột 2) ta đặt thuộc tính colspan tại ô đầu tiên từ bên trái qua ( ô 1 cột 1) sau đó xóa ô liền kề

Kết quả

Khi thiết lập colspan = "2", ô của hàng đầu tiên sẽ mở rộng ra bằng 2 cột. Nếu bạn thiết lập colspan = "3", ô sẽ mở rộng ra thành 3 cột. Tương tự ta có thể vượt qua các ô cạnh nhau của các hàng. Dưới đây chúng ta sẽ mở rộng ô 1 của hàng 1 và ô 4 của hàng 2 thành ô 1

Thẻ Table Trong HTML                     1+42356

Kết quả

3. Cách sử dụng , , trong bảng thẻ

Có ba thẻ giúp phân biệt giữa nội dung chính của bảng với các hàng đầu tiên và cuối cùng (có thể chứa các nội dung khác nhau). Những thẻ này giúp chúng ta tạo ra bố cục phù hợp với nội dung từ đó làm cho người đọc dễ hiểu. Ví dụ

Thẻ Table Trong HTML                                               Cột 1 Cột 2 Cột 3 123456 1+4=5 2+5=7 3+6=9

Kết quả

in which

• Tiêu đề của từng cột nằm bên trong thẻ
• Phần thân sẽ nằm trong thẻ
• Phần kết luận sẽ nằm trong phần tử

Tuy nhiên, hiện tại các nhà thiết kế thường sử dụng CSS để thay đổi giao diện của chúng. Chúng ta sẽ được học ở bài CSS

Vì vậy, trong bài học này, chúng ta đã tìm hiểu cách thêm một bảng vào trong một trang web rồi đúng không nào. Để có thể thiết kế bố cục hoàn toàn bằng bảng trong HTML, bạn có thể xem video hướng dẫn tại đây. Chúc các bạn học tốt

Để tạo bảng trong HTML, chúng ta sử dụng bảng thẻ. Bảng được tạo bởi các dòng (hàng) và các cột (cột). Để tạo hàng chúng ta sử dụng thẻ tr và để tạo bảng chúng ta sử dụng thẻ td

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 HTML Tables Row 1, Column 1 Row 1, Column 2 Row 2, Column 1 Row 2, Column 2

• Nếu như chúng ta không muốn có đường viền trong bảng thì chúng ta thiết lập thuộc tính border = 0

2. bảng tiêu đề

Chúng ta tạo tiêu đề cho bảng bằng cách sử dụng thẻ thứ 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 24 25 26 HTML Table Header Name Salary Ramesh Raman 5000 Shabbir Hussein 7000

3. Khoảng cách dòng và cột

Chúng ta có thể thiết lập khoảng cách giữa các ô trong bảng bằng cách sử dụng 2 thuộc tính cellpadding và cellspacing

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 HTML Table Cellpadding Name Salary Ramesh Raman 5000 Shabbir Hussein 7000

4. Sắp xếp các dòng và cột

Chúng ta có thể hợp nhất các dòng và cột bằng cách sử dụng thuộc tính colspan và rowspan như sau

Thẻ Table Trong HTML                     Hàng 1 cột 1 + hàng 1 cột 23456 0 Thẻ Table Trong HTML                     Hàng 1 cột 1 + hàng 1 cột 23456 1

5. Thiết lập chiều cao và chiều dài cho bảng

Chúng ta sử dụng thuộc tính chiều rộng và chiều cao để xác định chiều cao và chiều rộng cho bảng

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 Thẻ Table Trong HTML                     Hàng 1 cột 1 + hàng 1 cột 23456 3

6. Tiêu đề cho bảng

Chúng ta có thể thêm tiêu đề cho bảng bằng thuộc tính chú thích như sau

HTML Tables Row 1, Column 1 Row 1, Column 2 Row 2, Column 1 Row 2, Column 2 0 HTML Tables Row 1, Column 1 Row 1, Column 2 Row 2, Column 1 Row 2, Column 2 1

Chúng ta sử dụng thead để tạo tiêu đề trong bảng, tbody để chỉ nội dung bên trong bảng và tfoot để tạo chân trang