Cách tạo bảng trong HTML – tạo table trong HTML

AdminTháng Tám 3, 2019
176 lượt xem

Hãy cùng webaffiliatevn.com tìm hiểu cách tạo bảng trong html

Các bảng trong HTML cho phép lập trình viên web sắp xếp dữ liệu như văn bản, hình ảnh, liên kết, các bảng khác, v.v. thành các hàng và cột trong các ô.

Bảng HTML được tạo bằng thẻ <table> trong đó thẻ <tr> được sử dụng để tạo các hàng của bảng và thẻ <td> được sử dụng để tạo các ô dữ liệu. Các yếu tố trong <td> là dữ liệu cần đưa vào và được căn trái theo mặc định.

Ví dụ:

 <!DOCTYPE html>
<html lang="en">
<head>
      <title>Ví dụ bảng trong HTML</title>
   </head>
<body>
  <table 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>
</body>
</html>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”eYZORvo” default_tab=”html,result” user=”davidkhai”]See the Pen
eYZORvo by DavidKhai (
@davidkhai) on
CodePen.[/codepen_embed]

Ở đây, border là một thuộc tính của thẻ và nó được sử dụng để đặt đường viền trên tất cả các ô. Nếu bạn không cần viền, thì bạn có thể sử dụng border = “0”.

     1. Tiêu đề trong bảng

Tiêu đề bảng có thể được xác định bằng cách sử dụng thẻ
 . Thẻ này sẽ được đặt để thay thế thẻ, được sử dụng để thể hiện ô dữ liệu thực tế. Thông thường, bạn sẽ đặt hàng trên cùng để làm tiêu đề bảng như ví dụ bên dưới, nếu không bạn có thể sử dụng phần tử trong bất kỳ hàng nào. Các tiêu đề, được xác định trong thẻ được đặt ở giữa và in đậm theo mặc định.

Ví du:

<!DOCTYPE html>
<html>

   <head>
      <title>Tiêu đề trong bảng</title>
   </head>
    
   <body>
      <table border = "1"> 
        <tr> 
          <th>Tên</th> 
          <th>Lương</th> 
        </tr> 
        <tr> 
          <td>Nguyễn Văn A</td>                       
          <td>5.000.000</td> 
        </tr> 
        <tr> 
          <td>Nguyễn Thị B</td>
          <td>7.000.000</td> 
        </tr> 
     </table>
   </body>
   
</html>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”gOrYRXX” default_tab=”html,result” user=”davidkhai”]See the Pen
gOrYRXX by DavidKhai (
@davidkhai) on
CodePen.[/codepen_embed]      

2. Thuộc tính cellpadding và cellspaces 

Có hai thuộc tính được gọi là
cellpadding và
cellspaces mà bạn sẽ sử dụng để điều chỉnh khoảng trắng trong các ô của bảng. Thuộc tính giúp cho ta dãn được khoảng cách giữa các ô, làm cho bảng nhìn trực quan hơn.

<!DOCTYPE html>
<html>
   <head>
      <title>Cellpadding của bảng trong HTML</title>
   </head>
   <body>
      <table border = "1" cellpadding = "5" cellspacing = "5">
         <tr>
            <th>Tên</th>
            <th>Lương</th>
         </tr>
         <tr>
            <td>Nguyễn Văn A</td>
            <td>5.000.000</td>
         </tr>
         <tr>
            <td>Nguyễn Thị B</td>
            <td>7.000.000</td>
         </tr>
      </table>
   </body>
   
</html>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”rNeBwvB” default_tab=”html,result” user=”davidkhai”]See the Pen
rNeBwvB by DavidKhai (
@davidkhai) on
CodePen.[/codepen_embed]

     3. Thuộc tính Colspan và Rowspan

Bạn sẽ sử dụng thuộc tính colspan nếu bạn muốn hợp nhất hai hoặc nhiều cột thành một cột. Cách tương tự bạn sẽ sử dụng rowspan nếu bạn muốn hợp nhất hai hoặc nhiều hàng.

Ví dụ:

<!DOCTYPE html> 
<html> 
  <head> 
    <title>Thuộc tính Colspan/Rowspan trong bảng HTML</title> 
  </head> 
  <body> 
    <table border = "1"> 
      <tr> 
        <th>Cột 1</th> 
        <th>Cột 2</th> 
        <th>Cột 3</th> 
      </tr> 
      <tr> 
        <td rowspan = "2">Hàng 1 Ô 1</td>
        <td>Hàng 1 Ô 2</td> 
        <td>Hàng 1 Ô 3</td> 
      </tr> 
      <tr> 
        <td>Hàng 2 Ô 2</td> 
        <td>Hàng 2 Ô 3</td> 
      </tr> 
      <tr> 
        <td colspan = "3">Hàng 3 Ô 1</td>
      </tr> 
    </table> 
  </body> 
</html>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”oNxvwQZ” default_tab=”html,result” user=”davidkhai”]See the Pen
oNxvwQZ by DavidKhai (
@davidkhai) on
CodePen.[/codepen_embed]

      4. Màu nền cho bảng

Bạn có thể đặt nền bảng bằng một trong hai cách sau :

  • Thuộc tính bgcolor – Bạn có thể đặt màu nền cho toàn bộ bảng hoặc chỉ cho một ô.
  • Thuộc tính background – Bạn có thể đặt hình nền cho toàn bộ bảng hoặc chỉ cho một ô

Bạn cũng có thể đặt màu đường viền bằng cách sử dụng thuộc tính bordercolor .

Lưu ý – Các thuộc tính
bgcolor ,
background và
bordercolor không được dùng trong HTML5 vì HTML5 không sử dụng các thuộc tính này.

[codepen_embed height=”265″ theme_id=”dark” slug_hash=”LYNPjPy” default_tab=”html,result” user=”davidkhai”]See the Pen
LYNPjPy by DavidKhai (
@davidkhai) on
CodePen.[/codepen_embed]

Dưới đây là một ví dụ về việc sử dụng thuộc tính nền . Ở đây chúng tôi sẽ sử dụng một hình ảnh có sẵn trong thư mục / hình ảnh.

<!DOCTYPE html> 
<html> 
  <head> 
    <title>Thuộc tính Background-image trong bảng HTML</title> 
  </head> 
  <body> 
    <table border = "1" bordercolor = "red" background = "https://webaffiliatevn.com/wp-content/uploads/2020/07/dich-vu-seo-uy-tin.png"> 
      <tr> 
        <th>Cột 1</th> 
        <th>Cột 2</th> 
        <th>Cột 3</th> 
      </tr> 
      <tr> 
        <td rowspan = "2">Hàng 1 Ô 1</td>
        <td>Hàng 1 Ô 2</td> 
        <td>Hàng 1 Ô 3</td> 
      </tr> 
      <tr> 
        <td>Hàng 2 Ô 2</td> 
        <td>Hàng 2 Ô 3</td> 
      </tr> 
      <tr> 
        <td colspan = "3">Hàng 3 Ô 1</td>
      </tr> 
    </table> 
  </body> 
</html>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”jOqNLPj” default_tab=”html,result” user=”davidkhai”]See the Pen
jOqNLPj by DavidKhai (
@davidkhai) on
CodePen.[/codepen_embed]

     5. Chiều cao và chiều rộng của bảng

Bạn có thể đặt chiều rộng và chiều cao của bảng bằng các thuộc tính chiều rộng (width) và chiều cao (height) . Bạn có thể chỉ định chiều rộng hoặc chiều cao của bảng theo pixel hoặc theo tỷ lệ phần trăm của diện tích màn hình có sẵn.

Ví dụ:

<!DOCTYPE html> 
<html> 
  <head> 
    <title>Chiều rộng/Chiều cao của bảng HTML</title> 
  </head> 
  <body> 
    <table border = "1" width = "500" height = "180"> 
  <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> 
  </body> 
</html>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”bGpbreJ” default_tab=”html,result” user=”davidkhai”]See the Pen
bGpbreJ by DavidKhai (
@davidkhai) on
CodePen.[/codepen_embed]

     6. Thuộc tính chú thích

Các chú thích thẻ sẽ đóng vai trò như một tiêu đề hoặc giải thích cho bảng và nó xuất hiện ở phía trên cùng của bảng. Thẻ này không được dùng trong phiên bản HTML / XHTML mới hơn.

Ví dụ:

<!DOCTYPE html> 
<html> 
  <head> 
    <title>Chú thích(Caption) trong bảng HTML</title> 
  </head> 
  <body> 
    <table border = "1" width = "100%">
      <caption>Đây là chú thích của bảng này !!!</caption> 
      <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> 
  </body> 
</html>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”NWNKvbV” default_tab=”html,result” user=”davidkhai”]See the Pen
NWNKvbV by DavidKhai (
@davidkhai) on
CodePen.[/codepen_embed]

      7. Thành phần Header, Body và Footer

Các bảng có thể được chia thành ba phần – tiêu đề, thân và chân. Phần đầu và phần chân khá giống với phần đầu và chân của  trang web và phần thân là phần giữ nội dung chính của bảng.

Ba yếu tố để phân tách đầu, thân và chân của bảng là:

  •  – để tạo tiêu đề bảng riêng biệt.
  •  – để chỉ thân chính của bảng.
  •  – để tạo chân trang riêng.

Một bảng có thể chứa một số phần tử để chỉ ra các trang hoặc nhóm dữ liệu khác nhau . Nhưng điều đáng chú ý là các thẻ và sẽ xuất hiện trước

Ví dụ:

<!DOCTYPE html> 
<html> 
  <head> 
    <title>HTML Table</title> 
  </head> 
  <body> 
    <table border = "1" width = "100%">
      <thead> 
        <tr> 
          <td colspan = "4">Đây là phần đầu của bảng</td> 
        </tr> 
      </thead> 
      <tfoot> 
        <tr> 
          <td colspan = "4">Đây là phần chân của bảng</td> 
        </tr> 
      </tfoot> 
      <tbody> 
        <tr> 
          <td>Ô 1</td> 
          <td>Ô 2</td> 
          <td>Ô 3</td> 
          <td>Ô 4</td> 
        </tr> 
      </tbody> 
    </table> 
  </body> 
</html>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”RwabZxe” default_tab=”html,result” user=”davidkhai”]See the Pen
RwabZxe by DavidKhai (
@davidkhai) on
CodePen.[/codepen_embed]

     8. Bảng lồng bảng

Bạn có thể sử dụng một bảng bên trong một bảng khác. Không chỉ các bảng bạn có thể sử dụng hầu hết tất cả các thẻ bên trong thẻ dữ liệu bảng.

Ví dụ:

Sau đây là ví dụ về việc sử dụng một bảng khác và các thẻ khác trong một ô của bảng.

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table</title>
   </head>
    
   <body>
      <table border = "1" width = "100%">
         
         <tr>
            <td>
               <table border = "1" width = "100%">
                  <tr>
                     <th>Tên</th>
                     <th>Lương</th>
                  </tr>
                  <tr>
                     <td>Nguyễn Văn A</td>
                     <td>5.000.000</td>
                  </tr>
                  <tr>
                     <td>Nguyễn Thị B</td>
                     <td>7.000.000</td>
                  </tr>
               </table>
            </td>
         </tr>
         
      </table>
   </body>
    
</html>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”qBZWXYx” default_tab=”html,result” user=”davidkhai”]See the Pen <a href=’https://codepen.io/davidkhai/pen/qBZWXYx’>qBZWXYx</a> by DavidKhai (<a href=’https://codepen.io/davidkhai’>@davidkhai</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

>> Xem thêm:

Đánh giá post
Lượt xem: 1.418

Các kênh thông tin của chúng tôi

Disclaimer: Thông tin trong bài viết không phải là lời khuyên đầu tư từ Coin98 Insights. Hoạt động đầu tư tiền mã hóa chưa được pháp luật một số nước công nhận và bảo vệ. Các loại tiền số luôn tiềm ẩn nhiều rủi ro tài chính.

Admin

Weblog cá nhân của Minh Trần - Marketing Leader thẩm mỹ viện Mailisa. Hy vọng bạn sẽ tìm thấy nhiều kiến thức marketing (đặc biệt là affiliate) bổ ích qua những bài viết trên website này. PS: Team chúng tôi không phải chuyên gia, chỉ là viết blog dạo để học hỏi kiến thức, ứng dụng vào công việc vì thế các thông tin trên blog không thể thay thế lời khuyên của chuyên gia, chúng tôi không đảm bảo tính đúng đắn về mặt chuyên môn trong các bài blog! Các bài trên website, có bài do tôi viết, cũng có những bài do CTV viết. Xin cảm ơn bạn đã ghé thăm blog. PS: chúng tôi đang làm ngành comestic , nhận huấn luyện affiliate 1-1 miễn phí cho bạn nào cũng chuyên làm affiliate ngành comestic.

Bài viết cùng chủ đề:

You cannot copy content of this page

TẶNG BẠN EBOOK HƯỚNG DẪN LÀM AFFILIATE - KIẾM TIỀN ONLINE TỪ CƠ BẢN ĐẾN NÂNG CAO

Học cách làm thế nào kiếm $ từ số vốn 0 đồng với affiliate 

Những người muốn làm tiếp thị liên kết chuyên nghiệp
đều phải đọc bài viết này !. 

Không, cảm ơn tôi không muốn kiếm $ từ Internet.

Bạn muốn đọc tin riêng tư, hay hơn?
Đăng ký danh sách email của chúng tôi, chúng tôi sẽ gởi thêm tin theo xu hướng mới!
Cập nhật kiến thức và thông tin mới nhất về Affiliate & Tip kiếm tiền online hiệu quả .

PS: Cam kết bảo mật thông tin, không spam

Đăng ký bản tin

Không, cảm ơn, tôi không muốn đọc thêm tin
Contact Me on Zalo