loading

Trung tâm Kiến thức AppTeng

Tạo và xuất bản ứng dụng di động iOS Apple Store và Android CH Play - Các nền tảng phần mềm ứng dụng cho Giáo dục, Y tế, Kinh doanh, Nhà hàng, Quản trị, Kết nối...

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

Ở 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.

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)

Hướng dẫn 7: Liên kết - Link

Hướng dẫn 8: Hình ảnh – Image

Hướng dẫn 9: Bảng – Table:

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

Hướng dẫn 11: Dàn trang – Layout (CSS):

Hướng dẫn 12: Chèn liên kết tới các Module khác cho hình ảnh.

Hướng dẫn 13: Tổng kết

 

Bạn cần AppTeng hỗ trợ điều gì ?

AppTeng - nền tảng Tạo và Quản trị ứng dụng di động - Không cần kỹ năng lập trình.

Các bước Tạo ứng dụng

Hướng dẫn chi tiết từng bước Tạo ứng dụng di động Android CH-Play và iOS Apple Store.
Xem chi tiết

Thiết lập Module

Hướng dẫn chi tiết cách thiết lập, tuỳ chỉnh các Module trong ứng dụng di động của bạn.
Xem chi tiết

Diễn đàn

Diễn đàn hỗ trợ, chia sẻ kiến thức và kinh nghiệm trên nền tảng AppTeng.
Xem chi tiết

Xuất bản ứng dụng

Hướng dẫn chi tiết cách xuất bản ứng dụng di động trên nền tảng AppTeng.
Xem chi tiết

Liên kết AppTeng

AppTeng - nền tảng tạo ứng dụng di động phổ biến nhất Việt Nam.

Nhận tin tức