Cách tạo bảng trong HTML

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>

See the Pen eYZORvo by DavidKhai (@davidkhai) on CodePen.dark

Ở đây, border là một thuộc tính của thẻ <table> 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> . Thẻ này sẽ được đặt để thay thế thẻ <td>, đượ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ử <th> trong bất kỳ hàng nào. Các tiêu đề, được xác định trong thẻ <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>

See the Pen gOrYRXX by DavidKhai (@davidkhai) on CodePen.dark

       

 

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>

See the Pen rNeBwvB by DavidKhai (@davidkhai) on CodePen.dark

 

     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>

See the Pen oNxvwQZ by DavidKhai (@davidkhai) on CodePen.dark

 

      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.

See the Pen LYNPjPy by DavidKhai (@davidkhai) on CodePen.dark

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>

See the Pen jOqNLPj by DavidKhai (@davidkhai) on CodePen.dark

 

     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>

See the Pen bGpbreJ by DavidKhai (@davidkhai) on CodePen.dark

 

     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>

See the Pen NWNKvbV by DavidKhai (@davidkhai) on CodePen.dark

 

      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à:

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

Một bảng có thể chứa một số phần tử <tbody> để 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ẻ <thead> và <tfoot> sẽ xuất hiện trước <tbody>

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>

See the Pen RwabZxe by DavidKhai (@davidkhai) on CodePen.dark

 

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

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>

See the Pen qBZWXYx by DavidKhai (@davidkhai) on CodePen.dark

>> Xem thêm:

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *