• Trang chủ
  • Sản phẩm – Dịch vụ
    • Tạo ứng dụng di động
      • AppTeng Go
    • Smart ERP Go
      • Lite Smart ERP Go
      • Medium Smart ERP Go
    • Tạo QR Code
      • QR Code Go Free
  • Bảng giá
  • Bảng điều khiển
    • Đăng nhập
      • Tạo ứng dụng di động
      • Smart ERP Go
        • Lite ERP Go
        • Medium ERP Go
      • Tạo QR Code
        • QR Code Go Free
        • QR Code Pos – Res
        • QR Pos – Pro
      • Smart CRM / ERP
        • Smart CRM / ERP Go
      • Giáo dục
        • Edu Go Free
      • Giám sát
        • Monitor
    • Đăng ký
      • Tạo ứng dụng di động
      • Smart ERP Go
        • Lite Smart ERP Go
        • Medium ERP Go
      • Tạo QR Code
        • QR Code Go Free
        • QR Pos – Res
        • QR Pos – Pro
      • Smart CRM / ERP Go
        • Lite CRM / ERP Go
      • Giáo dục
        • Edo Go Free
      • Giám sát
        • Monitor
  • Kiến thức chung
  • Trang chủ
  • Sản phẩm – Dịch vụ
    • Tạo ứng dụng di động
      • AppTeng Go
    • Smart ERP Go
      • Lite Smart ERP Go
      • Medium Smart ERP Go
    • Tạo QR Code
      • QR Code Go Free
  • Bảng giá
  • Bảng điều khiển
    • Đăng nhập
      • Tạo ứng dụng di động
      • Smart ERP Go
        • Lite ERP Go
        • Medium ERP Go
      • Tạo QR Code
        • QR Code Go Free
        • QR Code Pos – Res
        • QR Pos – Pro
      • Smart CRM / ERP
        • Smart CRM / ERP Go
      • Giáo dục
        • Edu Go Free
      • Giám sát
        • Monitor
    • Đăng ký
      • Tạo ứng dụng di động
      • Smart ERP Go
        • Lite Smart ERP Go
        • Medium ERP Go
      • Tạo QR Code
        • QR Code Go Free
        • QR Pos – Res
        • QR Pos – Pro
      • Smart CRM / ERP Go
        • Lite CRM / ERP Go
      • Giáo dục
        • Edo Go Free
      • Giám sát
        • Monitor
  • Kiến thức chung
Trang chủ/Hướng dẫn/Nền tảng Tạo ứng dụng di động/Tuỳ chỉnh và Nâng cao/Sử dụng HTML trong ứng dụng/Hướng dẫn 9: Bảng – Table

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

11 lượt truy cập 0

Table (Bảng) được sử dụng khi bạn cần trình bày bảng dữ liệu, loại thông tin được sắp xếp theo các cột dọc và hàng ngang.

Tạo bảng có khó không?

Tạo các bảng HTML trong Module Mã nguồn thoạt đầu trong có vẻ phức tạp nhưng nếu bạn tiếp tục bình tĩnh và xem từng bước tiếp theo, nó thật sự rất logic cũng giống như mọi code HTML khác trong Module Mã nguồn.

Ví dụ 1:

  1. <table>
  2. <tbody>
  3. <tr>
  4. <td>Cell 1</td>
  5. <td>Cell 2</td>
  6. </tr>
  7. <tr>
  8. <td>Cell 3</td>
  9. <td>Cell 4</td>
  10. </tr>
  11. </tbody>
  12. </table>

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

Sự khác nhau giữa <tr> và<td>?

Như bạn đã xem ở trên, đây có lẽ là ví dụ phức tạp nhất trong các hướng dẫn về HTML trong Module Mã nguồn vừa qua, chúng ta hãy cùng xem xét từng thẻ khác nhau trong ví dụ trên.

Có 3 phần tử trong cấu trúc bảng:

– <tr> là viết tắt của “table row” là bắt đầu và kết thúc tạo ra 1 hàng ngang. rất logic.

– <td> là viết tắt của “table data”. Thẻ này bắt đầu và kết thúc để ra một ô (cell) trong hàng. Tất cả đều đơn giản và hợp lý.

Đây là cách giải thích ở ví dụ 1: Một bảng sẽ bắt đầu bằng thẻ mở <table>, sau đó là thẻ mở <tr>, để xác định một hàng được thêm vào. Có 2 ô trong hàng này, vì vậy ta có: <td>Ô 1</td> and <td>Ô 2</td>. Tiếp theo là thẻ đóng hàng thứ nhất </tr> và một hàng mới được thêm vào bằng thẻ mở <tr> và tiếp theo sẽ tương tự như hàng thứ nhất, hàng thứ hai cũng có 2 ô. Sau cùng bảng sẽ được đóng bằng thẻ </table>.

Bạn phải phân biệt rõ ở đây: hàng (rows) là các đường ngang của các ô (cellls) và cột là đường dọc của các ô.

Ô 1 Ô 2
Ô 3 Ô 4

Ô 1 và Ô 2 được xem là hàng. Ô 1 và Ô 3 được xem là cột.

Ở ví dụ trên, ta có hai hàng và hai cột, trên thực tế bạn có thể tạo ra các bảng có không giới hạn số cột và số hàng.

Ví dụ 2:

  1. <table>
  2. <tbody>
  3. <tr>
  4. <td>Ô 1</td>
  5. <td>Ô 2</td>
  6. <td>Ô 3</td>
  7. <td>Ô 4</td>
  8. </tr>
  9. <tr>
  10. <td>Ô 5</td>
  11. <td>Ô 6</td>
  12. <td>Ô 7</td>
  13. <td>Ô 8</td>
  14. </tr>
  15. <tr>
  16. <td>Ô 9</td>
  17. <td>Ô 10</td>
  18. <td>Ô 11</td>
  19. <td>Ô 12</td>
  20. </tr>
  21. </tbody>
  22. </table>

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

Có thuộc tính nào cho bảng không?

Dĩ nhiên có một số thuộc tính dành cho bảng, ví dụ như border – dùng để tạo độ dày các đường biên xung quanh bảng.

Ví dụ 3:

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

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

Độ dày của đường viền bảng được xác định bởi thuộc tính border

Cũng như các hình ảnh, bạn cũng có thể xác định chiều ngang của table bằn pixels hoặc phần trăm

Ví dụ 4:

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

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

 

Như ví dụ trên table sẽ có chiều ngang bằng 70% chiều ngang màn hình ứng dụng di động của bạn.

Các thuộc tính khác?

Có rất nhiều thuộc tính khác, đây là hai thuộc tính kể thêm:

– align: dùng để xác định lề so hàng theo chiều ngang của nội dung bên trong ô. Ví dụ như trái – left, giữa – center hay phải – right.

– valign: dùng để xác định lề so hàng theo chiều đứng của nội dung bên trong ô. Ví dụ như, trên – top, giữa  -middle hay đáy – bottom.

Ví dụ 5:

  1. <table border=“1” width=“70%”>
  2. <td align=“right” valign=“top”>Ô 1</td>
  3. </table>

 

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

Có thể chèn những gì vào table?

Theo lý thuyết, bạn có thể chèn bất cứ thứ gì vào trong bảng như chữ, liên kết và hình ảnh … nhưng vì table có công dụng để trình bày bảng dữ liệu (dữ liệu trình bày theo hàng và cột), vì vậy hãy đặt tất cả mọi thứ vào trong bảng khi bạn muốn sắp xếp chúng theo thứ tự ngang và dọc.

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
  • Nền tảng Edu Go (Miễn phí cho Trường học – Cơ sở giáo dục 5
    • Thiết lập hệ thống Trường học 2
    • Câu hỏi thường gặp 1
    • Bắt đầu 1
    • Các vấn đề khác 1
  • Nền tảng Tạo ứng dụng di động 5
    • Bắt đầu 7
    • Các bước tạo ứng dụng di động 6
    • Giao diện ứng dụng 13
      • 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 14
    • 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 2
    • 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 7
  • Chương trình Đại lý AppTeng 18
    • Bắt đầu 14
    • Hướng dẫn thực hiện 3
    • Câu hỏi thường gặp của Chương trình đại lý 10
  • Kiến thức chung 3
  • Nền tảng Email Go (Email Marketing 23
    • Khái Niệm, Thuật Ngữ 10
    • Thiết lập Hệ thống Email Marketing trên nền tảng Email Go của bạn 5
    • Tạo tài nguyên Hệ thống 2
    • Chiến Dịch Email Marketing 2
    • API KEY 1
    • Phí Dịch vụ 1
    • Các vấn đề chung 2
  • Nền tảng File Go 2
    • Bắt đầu 2
  • Lite Marketing 5
    • Thực hiện 1
    • Khái niệm, Thuật ngữ 3
    • Bắt đầu 1
  • Nền tảng Ad BioLink 1
    • Khái niệm, Thuật ngữ 1
  • Nền tảng QR Pos – Res 2
    • Bắt đầu 1
    • Thực hiện 1
  • Nền tảng Tạo Website Cửa hàng – Comment – Chat Bot tự động trên Facebook – Instagram 19
    • Khái niệm, Thuật ngữ 6
    • Cửa hàng Thương mại điện tử 12
    • Bắt đầu 1
  • Nền tảng Quản trị Nhân sự HRM Go 1
    • Bắt đầu 1
  • Nền tảng GetFund – Góp vốn đầu tư 1
  • Nền tảng Thương mại điện tử – Shop 4
    • Bắt đầu 1
    • Kinh doanh bán hàng 3

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

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

AppTeng Việt Nam
Giới thiệu
Danh sách phát hành
Tin tức
Chính sách Cộng tác viên
Chính sách Đại lý
Chính sách bảo mật
Điều khoản sử dụng
Chính sách và Quy tắc hoàn lại tiền
  • Chính sách bảo mật
  • Điều khoản sử dụng
  • © 2014 - 2022 AppTeng - phát triển và Vận hành.