Cách tạo bảng trong HTML – tạo table 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ẻ 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>

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

  •  – để 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>

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.

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:

TẶNG BẠN EBOOK HƯỚNG DẪN LÀM AFFILIATE 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