Advertisements
Skip to content
31/07/2011 / ~ Yappa ~

WordPress #9: Bảng biểu

Nội dung

Tạo bảng trong WordPress nói thật là vô cùng đơn giản ^^

Có 2 cách để tạo bảng, cách thứ nhất là copy một bảng đã tạo sẵn, cách thứ hai là dùng đến HTML

Copy bảng đã tạo sẵn

Đầu tiên bạn hãy vào Word, tạo một bảng với nội dung mình muốn. Sau đó copy bảng đó và paste vào trong WordPress ở chế độ Hiển thị. Rồi lúc đó muốn căn chỉnh, màu sắc bảng đó thế nào tùy ý. Vậy là xong, rất nhanh gọn nhé ^^

Chú ý là bảng đó không được quá rộng, vì nếu không nó sẽ lấn khỏi phạm vi của bài viết sang phần widget. Lúc đấy trông rất xấu ha ^^

Dùng HTML

Một bảng được xác định bởi tag <table>. Bảng được chia thành hàng với tag <tr> và cột với tag <td>. Một tag <td> có thể chứa kí tự, hình ảnh, danh sách,… và thậm chí là một bảng khác.

Ví dụ của một bảng

<table>

<tr>

<td>hàng 1, cột 1</td>


<td>hàng 1, cột 2</td>

</tr>


<tr>

<td>hàng 2, cột 1</td>


<td>hàng 2, cột 2</td>

</tr>

</table>

Với code trên, ta có một bảng như sau:

hàng 1, cột 1 hàng 1, cột 2
hàng 2, cột 1 hàng 2, cột 2

Cứ như thế bạn có thể làm một bảng cơ bản với số hàng hay cột tùy thích. Không khó lắm phải không ^^

Nếu muốn xem nhiều ví dụ hơn về tạo bảng với HTML, bạn có thể click vào đây để tới phần 2 của bài

Ngoài ra bạn có thể áp dụng cách copy code theo hướng dẫn trong bài này nữa nhé.

https://tieuxuyen.wordpress.com/meo-wordpress/

Advertisements

Trang: 1 2

126 phản hồi

Gửi bình luận
  1. tieutuyen / Th10 11 2011 11:20 Chiều

    YAPPA nàng có thể hướng dẫn cách tạo menu sổ xuống như blog của nàng ko?

    Số lượt thích

    • ~ Yappa ~ / Th10 12 2011 12:42 Sáng

      Có 2 cách để tạo

      Cách 1: Tạo trang mẹ và các trang con
      Cách 2: Tạo custom menu

      Ta sẽ lấy ví dụ là blog của nàng luôn nhé, vì nàng chưa tạo trang nên làm theo cách thứ 2 thì hay hơn

      Vào giao diện -> menus

      Đặt tên cho menu mới -> save lại, nàng sẽ thấy có 1 cái box gọi là Custom Link

      Giả sử nàng muốn tạo 1 menu mẹ là Mục lục chẳng hạn, nàng gõ Mục lục vào tiêu đề, chỗ địa chỉ vì ko có nên tạm gõ linh tinh vào asdf chẳng hạn, bấm Add to Menu

      Sau đó, menu vừa tạo sẽ hiện bên phải, bấm vào mũi tên cạnh chữ Custom trong menu Mục lục đó, xóa sạch những nội dung trong phần Đường dẫn đi -> Save Menu

      Rồi, sau đấy tạo các Custom link khác với tiêu đề và địa chỉ là trang mục lục của từng truyện

      Sau khi tạo xong hết, bắt đầu kéo mục lục từng truyện và thả nó dưới Mục lục, chú ý là thay vì chỉ đơn giản là thả thì nàng di sang bên phải 1 chút, cho đến khi thấy hình chữ nhật chấm chấm lệch hẳn vào so với trang mẹ ở trên là được, như ở hình ví dụ này :D

      Cuối cùng, ở box Theme Location, chọn menu vừa mới tạo -> Lưu lại

      Số lượt thích

      • EunHae is Real / Th8 21 2012 3:54 Chiều

        bạn ơi! mình đã làm theo các bước mà bạn hướng dẫn, nhưng nó chỉ hiển thị mỗi cái menus music thôi, còn homepage vs about của mình mất tiêu lun rồi, bạn chỉ mình cách tạo nhiều menu giống bạn với :(

        Số lượt thích

        • ~ Yappa ~ / Th8 21 2012 8:10 Chiều

          có vẻ bạn đang làm custom menu thì phải, vậy bạn phải tự thêm link trang about vào chứ, còn homepage thì chính là hình cái nhà đó
          còn về menu trong blog mình thì mình không phải tạo, mà là khi tạo trang thì mình chọn trang này là trang con của trang khác nên wp tự động tạo menu cho mình

          Liked by 1 person

          • Tiểu Diệp / Th10 11 2013 12:52 Chiều

            Bạn ơi ! Mình đã cố gắng tạo giống bạn nhưng khi set một menu nào đó nên làm primary menu thì cái menu được set primary menu còn lại không được hiển thị lên blog nữa. Phải làm thế nào bây giờ hả bạn ? :(

            Số lượt thích

      • crystaltrangl4ublog / Th10 16 2013 9:47 Sáng

        bạn ơi bạn xem hộ cái word của mình hướng dẫn mình lại với

        Số lượt thích

      • Tiểu Ngọan Nhi / Th9 2 2014 7:03 Chiều

        nàng có thể hướng dẫn cho ta menu sổ của nàng theo cách 1 ko? Ta lỡ tạo trang rồi, h cóa thể làm theo cách bên trên ko? pleasssssssssssss!!!!!!!!! :'( :'( http://hienhy1906.wordpress.com/

        Liked by 1 person

        • ~ Yappa ~ / Th9 2 2014 10:48 Chiều

          theme bạn đang dùng ko hỗ trợ menu của cách 1 bạn ạ
          bạn vẫn có thể tạo trang như bình thường và dùng trang để làm custom menu mà

          Số lượt thích

  2. tieutuyen / Th10 12 2011 7:32 Chiều

    ta làm được rồi, cám ơn nàng nhiều ^_^

    Số lượt thích

  3. Đông Thiên / Th5 23 2012 3:52 Chiều

    Bạn ơi, cho tớ hỏi muốn căn giữa cho bảng thì thế nào? Tớ code thế này

    nhưng nó chỉ căn giữa trong phần hiển thị, khi post lên vẫn căn trái bình thường

    Số lượt thích

    • ~ Yappa ~ / Th5 24 2012 7:52 Chiều

      tớ ko nhìn đc code do bạn post nên tớ ko nhận xét đc là có chỗ nào sai trong đó hay ko ^^
      nhưng nếu bạn code ko sai mà wp ko hiện thì khả năng rất cao là theme đó ko hỗ trợ bạn ạ ^^

      Số lượt thích

  4. lop12adonggia8588 / Th5 28 2012 3:33 Chiều

    Ta vô cùng ngưỡng mộ và cảm ơn Nàng!
    Ta xin Nàng giúp đỡ ta như nàng đã giúp những thần dân của Nàng: ta đã tạo được các trang trong Blog của lớp (lop12adonggia8588), có cách nào để đưa các bài viết (đã và sẽ posts) vào trang đã tạo cho đúng với chủ đề bài viết được không? Rất mong sự hồi âm và trợ giúp của Nàng.

    Số lượt thích

  5. lop12adonggia8588 / Th5 29 2012 4:36 Chiều

    Cảm ơn Nàng đã trợ giúp! Ta xin được thường xuyên ghé thăm Nàng nhe?

    Số lượt thích

  6. iviiha / Th8 25 2012 8:29 Sáng

    bạn ơi, t có dùng cách copy bảng trong excel nhưng lúc paste thì nó ra thành 1 dòng dài ngoằng bạn ạ :(

    Liked by 1 person

  7. iviiha / Th8 25 2012 11:43 Sáng

    up ảnh trong phản hồi làm thế nào hả bạn :”>

    Số lượt thích

  8. Đông Thiên / Th8 26 2012 12:37 Sáng

    Yappa ơi cho mình hỏi, mình đã tạo được một bảng như thế này http://i1218.photobucket.com/albums/dd406/nhp_dung137/table.gif
    Làm thế nào để chữ “Chương” vào ngay giữa khung luôn vậy bạn?

    Số lượt thích

    • ~ Yappa ~ / Th8 26 2012 10:10 Sáng

      cái này thì tùy từng theme mà wp mới hỗ trợ bạn ạ, nên cái này có hướng dẫn cũng như ko thôi

      Số lượt thích

  9. bonmin / Th8 26 2012 3:16 Chiều

    ss em mới tạo wordpress có nhiều kái hong hiểu cho em hỏi
    làm sao để nóa hiển thị kái cột bên phải dống ss ạ cái cột kóa thễ chèn widget vào á
    mặc dù em đã chọn theme có cột ròi nhưng vẫn không thấy nóa đâu =(( a~~~~ ss chĩ giúp em ks ss nhiều ạ a~~ =((

    Số lượt thích

  10. edr / Th8 27 2012 1:22 Sáng

    viet kho hieu

    Số lượt thích

  11. Rainy.Lyn / Th9 29 2012 12:29 Chiều

    có thể chèn màu nền cho bảng giống như chèn màu cho đoạn được ko cậu ^^?

    Số lượt thích

    • ~ Yappa ~ / Th9 29 2012 9:45 Chiều

      làm đc bạn ạ, bạn áp code tạo nền vào code tạo bảng là được ^^
      như ở trong đây, mình làm với ký tự nên dùng code span, với bảng thì bạn thay span bằng table là được, nội dung trong code table thì làm như trong bài viết này

      Liked by 2 people

  12. toilanam1am / Th10 26 2012 6:17 Chiều

    tại sao dùng 1 code giống nhau mà bảng bên google site (hình 1) đẹp hơn wordpress (hình 2)
    https://picasaweb.google.com/118432877599451832850/TaoBang?authuser=0&feat=directlink
    bạn cho mình nick yahoo để mình trao đổi thêm nhé.

    Số lượt thích

    • ~ Yappa ~ / Th10 26 2012 9:42 Chiều

      vì bảng bên wordpress nó còn phụ thuộc vào theme bạn ạ, có một số theme không hỗ trợ 1 số tính năng cho bảng
      ví dụ điển hình nhất là viền bảng :)
      lúc mình viền bảng bằng cái dấu gạch đứt, tại theme Koi thì bảng hiện đúng như code, trong khi chuyển sang hầu hết các theme khác thì nó đều biến hết thành viền thẳng bình thường :)

      Liked by 1 person

      • Nam / Th10 27 2012 8:15 Sáng

        vậy theme nào thì hỗ trợ tạo bảng ? hiện tại mình đang dùng theme mặc định.

        Số lượt thích

        • ~ Yappa ~ / Th10 27 2012 8:21 Sáng

          theme nào cũng hỗ trợ tạo bảng bạn ạ
          còn bảng nó hiện ra thế nào thì tùy theme, cái đấy thì bạn phải xem từng theme mới biết được

          Số lượt thích

  13. Ngô Chí Nguyện / Th11 6 2012 10:28 Sáng

    Sao mình copy từ excel và word vào wordpress thì chỉ hiển thị mỗi chữ nhỉ, ko hiển thị khung mặc dù lúc tạo bài thì thấy có khung dạng đứt nét?? Help me …

    Số lượt thích

    • ~ Yappa ~ / Th11 6 2012 11:42 Sáng

      có thể bạn copy không đúng rồi
      copy từ excel sang vẫn hiện vô cùng bình thường

      Số lượt thích

      • Ngô Chí Nguyện / Th11 6 2012 11:51 Sáng

        Hj, copy làm sao cho đúng nhỉ, có mỗi một lệnh Ctrl C và mỗi một nút copy thôi mà … hay là do theme lỗi ko biết

        Số lượt thích

        • ~ Yappa ~ / Th11 6 2012 11:57 Sáng

          à, nếu vậy thì rất có thể là do theme
          nhưng ko phải là do theme lỗi mà là theme đó chỉ hỗ trợ dạng bảng đó thôi

          Số lượt thích

          • Ngô Chí Nguyện / Th11 6 2012 12:05 Chiều

            Mình vừa làm được rồi. Copy từ excel hoặc nguồn khác vào word, xóa toàn bộ định dạng khung cũ đi, sao đó chọn lại theo định dạng khung của word, rồi paste vào thì hiển thị ok. Yappa cho mình hỏi thêm, muốn thay đổi mầu xác cho khung (chỉ khung thôi, còn chữ thì khác) thì phải làm thế nào?

            Số lượt thích

            • ~ Yappa ~ / Th11 6 2012 2:02 Chiều

              đây là code mẫu để đổi màu cho khung nhé

              <table style="border-color:mã màu;" border="1">
              <tr>
              <td>hàng 1, cột 1</td>
              <td>hàng 1, cột 2</td>
              </tr>
              <tr>
              <td>hàng 2, cột 1</td>
              <td>hàng 2, cột 2</td>
              </tr>
              </table>

              Số lượt thích

              • shoppil / Th6 5 2016 2:44 Chiều

                bạn ơi, mình muốn tạo 1 bảng với mã màu trắng (ko thấy các border) mã, rgb(255,255,255). Mình phải chèn như thế nào bạn?

                Số lượt thích

                • ~ Yappa ~ / Th6 5 2016 10:39 Chiều

                  ý bạn là màu trắng hay không có màu vậy @.@
                  nếu là màu trắng thì bạn phải dùng mã hex chứ không phải mã grb nhé
                  còn dễ dàng nhất thì bạn tạo trên word rồi copy sang WP theo hướng dẫn tại đây

                  Số lượt thích

  14. Ho Thanh Khuong / Th12 30 2012 5:17 Chiều

    ban co the huong dan tao nen cho o trong table cua wordpress. Voi lai khi minh ve table trong wordpress khong thay duoc duong khu o, khong hieu vi sao ban huong dan giup minh voi nhe

    Số lượt thích

    • ~ Yappa ~ / Th12 30 2012 5:38 Chiều

      về phần màu nền thì mình đã hướng dẫn ngay trong phần comment của bài viết này tại đây

      về phần khung cho bảng thì phụ thuộc vào theme bạn chọn, có cái hỗ trợ, có cái ko

      Số lượt thích

  15. alicelynk / Th1 30 2013 7:18 Chiều

    ss ơi, em cop từ excel và paste vào WP nhưng nó ko hiện ra viền bảng mà nó thành như thế này
    http://bjchjpxjnh.wordpress.com/tro-ve-tuoi-17-dan-ninh/phu-quan-la-thai-giam-tong-quan-thanh-dinh/
    Khắc phục thế nào ạ
    Thank ss trước

    Số lượt thích

  16. Nam Cung Dạ Hỏa / Th2 14 2013 10:26 Sáng

    Làm thế nào để hiện thanh chắn giữa hai cột vậy bạn? Cám ơn về bài viết nhé ^^

    Liked by 1 person

  17. chimun9700 / Th2 27 2013 8:35 Chiều

    bạn ơi cho mình hỏi cài lịch hiện ngày tháng như cái bảng ở đâu vậy?

    Số lượt thích

  18. chimun9700 / Th2 28 2013 8:30 Chiều

    ko ý mh` là hiện lịch trên tường nhà ấy hic chỉnh ngày giờ thì mh` bít làm r nhưg ko bít làm thế nào để nó hiện trên tường nhà của mh` cả >”<

    Số lượt thích

    • ~ Yappa ~ / Th2 28 2013 10:06 Chiều

      mình không hiểu lịch trên tường nhà là gì
      bạn có thể nói rõ hơn hoặc đưa 1 ví dụ cho mình được không

      Số lượt thích

  19. yusan / Th7 11 2013 2:16 Chiều

    Bạn ơi, vậy có cách nào tạo 1 thanh dọc bên phải text giống cái thanh màu xanh lá ở trên của bạn ko?

    Số lượt thích

  20. laurasaha / Th7 24 2013 5:05 Chiều

    T^T mình có thể send ID cho bạn edit làm dùm mình cái menu thả rơi được k :(, mình làm hoài cái chỉ dẫn mà ko được huhu

    Không hiểu sao trong Categories mình ko chèn được các Parent :(… help

    Số lượt thích

    • ~ Yappa ~ / Th7 24 2013 5:14 Chiều

      menu thả rơi chỉ cần làm trang mẹ/trang con là được bạn ạ
      category thì bạn phải chọn parent chứ không phải là chèn
      còn nếu bạn vẫn không thể làm được thì send ID và pass cho mình qua đây nhé

      Số lượt thích

  21. kamichang / Th8 14 2013 10:17 Sáng

    http://platinumflamingos.wordpress.com/?attachment_id=1155
    Nàng ơi, sao ta tạo bảng và chèn hình vào thì nó bị như này, làm sao cho chữ ngang với hình giống ở trên được vậy

    Số lượt thích

  22. Sanshiri / Th11 3 2013 5:37 Chiều

    Bạn ơi, cho mình hỏi sao làm được phần
    “Nội dung
    Copy bảng đã tạo sẵn
    Dùng HTML”
    giống của bạn vậy (chèn qua thành 1 cột bên phải á), cảm ơn trước nghen :D

    Số lượt thích

  23. Biển Trúc / Th1 17 2014 1:44 Sáng

    bạn ơi cho mình hỏi
    cái này phải up rồi thì mới hiện phải không , tại mình chọn xem thử nó không ra

    Số lượt thích

    • Biển Trúc / Th1 17 2014 2:06 Sáng

      tiện hỏi luôn bạn làm cái nội dung ở góc phải bài viết thế nào dợ

      Số lượt thích

      • ~ Yappa ~ / Th1 17 2014 11:52 Sáng

        1. chọn xem thử là ra ngay bạn ạ
        2. bạn dùng code sau nhé

        <blockquote class="pull alignright">Nội dung</blockquote>

        Số lượt thích

        • Biển Trúc / Th1 17 2014 2:14 Chiều

          thanks bạn nhiều nhiều ^^
          còn nữa bạn ơi thế cái bảng biểu ấy mình chỉ có thể chọn 1 màu cho chữ thôi à, mình muốn có nhiều màu hơn đk k

          Số lượt thích

          • Biển Trúc / Th1 17 2014 2:51 Chiều

            à làm đk rồi,tặng chủ nhà ngàn tym vì đã giúp mình ^.^

            Số lượt thích

  24. PHAN THÀNH HIẾU / Th1 20 2014 9:04 Sáng

    Bài chia sẽ của bạn rất đơn giản và tuyệt vời
    Nó giúp mình “phổ cập” mình được cách đăng table lên wordpress. Giải quyết rất nhiều vấn đề.
    Cám ơn bạn. Nếu là facebook thì bạn sẽ like và chia sẽ ngay.

    Số lượt thích

  25. Hiên / Th2 8 2014 9:34 Chiều

    Cám ơn bạn, mình làm được rồi >.< Theo cách lười, nhưng thế là cải thiện đáng kể lắm đối với mình

    Số lượt thích

  26. nguyenvanquan7826 / Th6 16 2014 6:45 Chiều

    Bạn cho mình hỏi làm sao dùng được SyntaxHighlighter để thu gọn đoạn code lại vậy? Khi ấn vào thì nó mới hiện ra code.

    Số lượt thích

  27. Lục Tiêu Tiêu / Th7 10 2014 5:55 Chiều

    Yappa ơi, thế dùng html không tạo được thanh dọc à? Tức là chia cột ý?

    Số lượt thích

  28. mymy / Th2 20 2015 4:32 Chiều

    cho e hỏi làm sao dc cái bảng này vậy link http://ngohaha.blogspot.com/2013/06/giao-dich-thua-lo-tam-cua-trum-xa-hoi.html
    chỗ mục lục b áy lúc thì tạo dc 4 cột lúc thì 5 cột làm sao ss ???

    Số lượt thích

  29. Minh Tử / Th8 6 2015 9:58 Chiều

    ngàng ơi làm sao để có thể tạo bảng thống kê số người thăm wordpress của mình vậy?

    Số lượt thích

  30. Minh Tử / Th8 7 2015 1:04 Chiều

    giống phần thống kê nhà nàng ấy.

    Số lượt thích

  31. Đỗ Nguyễn Thanh Tùng / Th11 10 2015 6:51 Chiều

    Bạn ơi, nếu muốn đưa chức năng sort và filter (như excel) vào bảng biểu thì phải làm sao?

    Số lượt thích

  32. 冬茗 [Đông Trà] / Th11 29 2015 10:03 Sáng

    Bạn ơi, mình tạo một bảng mà định mỗi 1 ô một màu nền riêng á, nhưng chèn code kiểu màu nền kí tự vào thì nó không nhận.
    Mình phải chèn code thế nào bạn?

    Số lượt thích

    • ~ Yappa ~ / Th11 29 2015 10:27 Sáng

      với màu nền của từng ô trong bảng, bạn phải đặt code màu vào từng thẻ tr một
      cái này khá là phức tạp và mất thời gian, thế nên mình khuyên bạn nên tạo bảng định dạng đầy đủ trong Word rồi dùng cách copy sang WordPress được giới thiệu tại đây

      Liked by 1 person

  33. Dĩ Nhược / Th2 8 2016 1:04 Sáng

    Chị tiểu xuyên xem giùm em thử HTML dưới đây được không ạ, có sai không ạ, tại em làm mà thấy bị một lỗi đó là dòng kẻ bên phải của bảng nằm ở sát lề phải trang mà không sát vào bảng mình làm, có cách khắc phục không ạ
    Link: https://leecarol194.wordpress.com/dm-hp-dong-nhan-hoi-dao-1975-tu-thu/

    Liked by 1 person

  34. ~ Yappa ~ / Th2 8 2016 1:40 Sáng

    em sửa code như sau nhé

    <div align="center">
    <table style="height:778px;width:404;">
    Nội dung của bảng
    </table>
    </div>

    Liked by 1 person

  35. Rai / Th4 4 2016 6:44 Chiều

    Mình muốn kẻ boder thì phải add thêm code nào ah?
    Theme mình đang dùng là libre

    Số lượt thích

  36. Phú Lê / Th8 27 2016 3:59 Chiều

    Tạo bảng có tính năng sắp xếp A-Z thì làm sao vậy bạn !
    Click phần tiêu đề mỗi cột sẽ sắp xếp A-Z.
    Thanks Nàng

    Số lượt thích

  37. Hạ Diên / Th4 8 2017 7:48 Chiều

    Chào nàng. Ta đã thử làm theo cách của nàng, nhưng ta làm xong nó chỉ hiện ra đường kẻ ngang chứ không có kẻ dọc, và đường ngang của bảng thì nó rất mờ. Ta muốn nổi cả kẻ ngang kẻ dọc thì phải làm sao hả nàng??

    Số lượt thích

  38. Lê Mai Phươngg / Th6 29 2017 10:29 Chiều

    Tks nàng nhé ^^ Tớ đã làm được rồi ạ

    Số lượt thích

  39. An Nhiên / Th7 1 2017 7:31 Chiều

    Yappa ơi cho mình hỏi làm sao để tạo được dòng kẻ giữa các dòng nhỉ, ví dụ như mình làm mục lục 5 chap 1 dòng, xong giữa mỗi dòng là 1 dòng kẻ. Chỉ là dòng kẻ nhạt nhạt thôi mà ko phải bảng ấy.

    Số lượt thích

  40. greenscat / Th7 17 2017 7:42 Chiều

    Chị ơi, chị có code tạo bảng một hàng dài không ạ?

    Số lượt thích

Trả lời

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Đăng xuất / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Đăng xuất / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Đăng xuất / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Đăng xuất / Thay đổi )

Connecting to %s

%d bloggers like this: