• Trang chủ
  • Hướng dẫn
  • Module
  • Đại lý
  • FAQ
  • Blog
    • Tin tức
    • Thông báo phát hành
  • Đăng nhập
  • Đăng ký miễn phí
  • Trang chủ
  • Hướng dẫn
  • Module
  • Đại lý
  • FAQ
  • Blog
    • Tin tức
    • Thông báo phát hành
  • Đăng nhập
  • Đăng ký miễn phí
Trang chủ/Hướng dẫn/Tuỳ chỉnh và Nâng cao/Sử dụng HTML trong ứng dụng/Hướng dẫn 10: Tìm hiểu thêm về bảng – table

Hướng dẫn 10: Tìm hiểu thêm về bảng – table

9 lượt truy cập 0

Ở hướng dẫn trước, bạn đã biết đôi chút về table, có thể nó gây cho bạn một chút chán nản. Nhưng thật sự, nếu bạn nắm vững các hiểu biết về table, chắc chắn bạn sẽ làm chủ cách sử dụng Module Mã nguồn trong các tuỳ biến ứng dụng di động của bạn.

Những gì bạn chưa biết?

Đó là 2 thuộc tính colspan và rowspan nếu bạn muốn tạo rabảng có những tính chất đặc biệt hơn.

Colspan là từ viết tắt của “column span” – mở rộng cột. Colspan được sử dụng trong thẻ <td> để xác định một ô sẽ mở rộng ra thêm bao nhiêu cột:

Ví dụ 1:

  1. <table border=“1”>
  2. <tbody>
  3. <tr>
  4. <td colspan=“3”>Ô1</td>
  5. </tr>
  6. <tr>
  7. <td>Ô 2</td>
  8. <td>Ô 3</td>
  9. <td>Ô 4</td>
  10. </tr>
  11. </tbody>
  12. </table>

Đây là kết quả bạn nhìn thấy trong ứng dụng di động của bạn:

Khi thiết lập colspan bằng “3”, Ô của hàng đầu tiên sẽ mở rộng ra bằng 3 cột. Nếu bạn thiết lập colspan bằng  “2”, ô sẽ mở rộng ra thành 2 cột , do đó bạn cần thêm 1 ô nữa để đủ 3 cột trong hàng đầu tiên, như thế nó mới có thể cân bằng với số cột ở hàng thứ hai.

Ví dụ 2:

  1. <table border=“1”>
  2. <tbody>
  3. <tr>
  4. <td colspan=“2”>Ô 1</td>
  5. <td>Ô 2</td>
  6. </tr>
  7. <tr>
  8. <td>Ô 3</td>
  9. <td>Ô 4</td>
  10. <td>Ô 5</td>
  11. </tr>
  12. </tbody>
  13. </table>

 

Đây là kết quả bạn nhìn thấy trong ứng dụng di động của bạn:

 

rowspan sẽ như thế nào?

Chắc bạn cũng đoán ra, nó sẽ cũng tương tự, rowspan xác định một ô sẽ mở rộng ra bao nhiêu hàng:

Ví dụ 3:

  1. <table border=“1”>
  2. <tbody>
  3. <tr>
  4. <td rowspan=“3”>Ô1</td>
  5. <td>Ô 2</td>
  6. </tr>
  7. <tr>
  8. <td>Ô 3</td>
  9. </tr>
  10. <tr>
  11. <td>Ô 4</td>
  12. </tr>
  13. </tbody>
  14. </table>

Đây là kết quả bạn nhìn thấy trong ứng dụng di động của bạn:

 

Trong ví dụ trên rowspan được thiết lập bằng “3” trong ô 1. Điều này có nghĩa ô này sẽ mở rộng ra 3 hàng (1 ô của nó và chiếm thêm 2 ô kế tiếp). Ô 1 và Ô 2 được xem là 1 hàng, trong khi đó Ô 3 và Ô 4 được xem như hai hàng độc lập.

Nó có một chút phức tạp, nếu bạn khó hình dung, hãy vẽ bảng mà bạn muốn tạo lên giấy, sau đó hãy viết code.

Hãy thực hành thật nhiều với colspan và rowspan bạn sẽ nắm vững kỹ thuật tạo bảng.

Bài viết này có giúp ích gì cho bạn không ?

Có  Không
Cùng chuyên mục
  • Hướng dẫn 1: Bắt đầu với HTML trong Module Mã nguồn
  • Hướng dẫn 2: HTML là gì?
  • Hướng dẫn 3: Phần tử và thẻ (elements, tags)
  • Hướng dẫn 4: Module Mã nguồn – lần đầu làm chuyện “ấy”
  • Hướng dẫn 5: Một số phần tử cần biết
  • Hướng dẫn 6: Thuộc tính (Attributes)
Có thể bạn quan tâm
  • Hướng dẫn các bước Xuất bản ứng dụng Android
  • Tạo Chứng chỉ Phân phối iOS (iOS Distribution Certificate)
  • Module Thương mại điện tử
  • Làm thế nào để thay đổi icon hình ảnh của Module
  • Quảng cáo AdMob sẽ xuất hiện trong ứng dụng của tôi như thế nào ?
Danh mục hướng dẫn
  • Bắt đầu 7
  • Các bước tạo ứng dụng di động 6
  • Giao diện ứng dụng 12
    • Tuỳ chỉnh giao diện với CSS 22
  • Các Module ứng dụng 60
  • Xuất bản ứng dụng Android 4
  • Xuất bản ứng dụng iOS 13
  • Tuỳ chỉnh và Nâng cao 26
    • Sử dụng HTML trong ứng dụng 13
  • Kiếm tiền với AdMob 5
  • Ứng dụng Android và các vấn đề đã biết 1
  • Ứng dụng iOS và các vấn đề đã biết 1
  • Gỡ lỗi 2
  • Dành cho Nhà phát triển 4
    • Tài liệu API 1
  • Các vấn đề khác 4
  • Chính sách bảo mật
  • Điều khoản sử dụng
  • © 2017 - 2020 AppTeng - phát triển và Vận hành.