Hướng dẫn what is table in html explain? - giải thích bảng trong html là gì?


Các bảng HTML cho phép các tác giả 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 của ô.

Show

Các bảng HTML được tạo bằng thẻ trong đó thẻ được sử dụng để tạo các hàng bảng và thẻ được sử dụng để tạo các ô dữ liệu. Các phần tử dưới đều thường xuyên và được căn chỉnh theo mặc định

tag in which the tag is used to create table rows and
tag is used to create data cells. The elements under are regular and left aligned by default

Thí dụ

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Tables</title>
   </head>
	
   <body>
      <table border = "1">
         <tr>
            <td>Row 1, Column 1</td>
            <td>Row 1, Column 2</td>
         </tr>
         
         <tr>
            <td>Row 2, Column 1</td>
            <td>Row 2, Column 2</td>
         </tr>
      </table>
      
   </body>
</html>

Điều này sẽ tạo ra kết quả sau -

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

tag and it is used to put a border across all the cells. If you do not need a border, then you can use border = "0".

Tiêu đề bảng

Tiêu đề bảng có thể được xác định bằng thẻ. Thẻ này sẽ được đặt để thay thế thẻ, được sử dụng để thể hiện tế bào dữ liệu thực tế. Thông thường bạn sẽ đặt hàng trên cùng của bạn làm tiêu đề bảng như hình 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ập trung và in đậm theo mặc định.

tag. This tag will be put to replace tag, which is used to represent actual data cell. Normally you will put your top row as table heading as shown below, otherwise you can use element in any row. Headings, which are defined in tag are centered and bold by default.

Thí dụ

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Header</title>
   </head>
	
   <body>
      <table border = "1">
         <tr>
            <th>Name</th>
            <th>Salary</th>
         </tr>
         <tr>
            <td>Ramesh Raman</td>
            <td>5000</td>
         </tr>
         
         <tr>
            <td>Shabbir Hussein</td>
            <td>7000</td>
         </tr>
      </table>
   </body>
   
</html>

Điều này sẽ tạo ra kết quả sau -

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

Tiêu đề bảng

Thí dụ

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Cellpadding</title>
   </head>
	
   <body>
      <table border = "1" cellpadding = "5" cellspacing = "5">
         <tr>
            <th>Name</th>
            <th>Salary</th>
         </tr>
         <tr>
            <td>Ramesh Raman</td>
            <td>5000</td>
         </tr>
         <tr>
            <td>Shabbir Hussein</td>
            <td>7000</td>
         </tr>
      </table>
   </body>
	
</html>

Điều này sẽ tạo ra kết quả sau -

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

Tiêu đề bảngcolspan attribute if you want to merge two or more columns into a single column. Similar way you will use rowspan if you want to merge two or more rows.

Thí dụ

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Colspan/Rowspan</title>
   </head>
	
   <body>
      <table border = "1">
         <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
         </tr>
         <tr>
            <td rowspan = "2">Row 1 Cell 1</td>
            <td>Row 1 Cell 2</td>
            <td>Row 1 Cell 3</td>
         </tr>
         <tr>
            <td>Row 2 Cell 2</td>
            <td>Row 2 Cell 3</td>
         </tr>
         <tr>
            <td colspan = "3">Row 3 Cell 1</td>
         </tr>
      </table>
   </body>
	
</html>

Điều này sẽ tạo ra kết quả sau -

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

Tiêu đề bảng

  • Tiêu đề bảng có thể được xác định bằng thẻ. Thẻ này sẽ được đặt để thay thế thẻ, được sử dụng để thể hiện tế bào dữ liệu thực tế. Thông thường bạn sẽ đặt hàng trên cùng của bạn làm tiêu đề bảng như hình 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ập trung và in đậm theo mặc định. attribute − You can set background color for whole table or just for one cell.

  • Các thuộc tính của CellPadding và CellSpaces attribute − You can set background image for whole table or just for one cell.

Có hai thuộc tính được gọi là CellPadding và CellSpaces mà bạn sẽ sử dụng để điều chỉnh không gian trắng trong các ô bảng của bạn. Thuộc tính tế bào xác định không gian giữa các ô bảng, trong khi CellPadding biểu thị khoảng cách giữa các đường viền tế bào và nội dung trong một ô.bordercolor attribute.

Thuộc tính Colspan và Rowspan − The bgcolor, background, and bordercolor attributes deprecated in HTML5. Do not use these attributes.

Thí dụ

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Background</title>
   </head>
	
   <body>
      <table border = "1" bordercolor = "green" bgcolor = "yellow">
         <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
         </tr>
         <tr>
            <td rowspan = "2">Row 1 Cell 1</td>
            <td>Row 1 Cell 2</td>
            <td>Row 1 Cell 3</td>
         </tr>
         <tr>
            <td>Row 2 Cell 2</td>
            <td>Row 2 Cell 3</td>
         </tr>
         <tr>
            <td colspan = "3">Row 3 Cell 1</td>
         </tr>
      </table>
   </body>
	
</html>

Điều này sẽ tạo ra kết quả sau -

Ở đây, đường viền là một thuộc tính của thẻ và nó được sử dụng để đặt một đường viền trên tất cả các ô. Nếu bạn không cần đường viền, thì bạn có thể sử dụng Border = "0".background attribute. Here we will use an image available in /images directory.

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Background</title>
   </head>
	
   <body>
      <table border = "1" bordercolor = "green" background = "/images/test.png">
         <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
         </tr>
         <tr>
            <td rowspan = "2">Row 1 Cell 1</td>
            <td>Row 1 Cell 2</td><td>Row 1 Cell 3</td>
         </tr>
         <tr>
            <td>Row 2 Cell 2</td>
            <td>Row 2 Cell 3</td>
         </tr>
         <tr>
            <td colspan = "3">Row 3 Cell 1</td>
         </tr>
      </table>
   </body>
	
</html>

Tiêu đề bảng

Tiêu đề bảng có thể được xác định bằng thẻ. Thẻ này sẽ được đặt để thay thế thẻ, được sử dụng để thể hiện tế bào dữ liệu thực tế. Thông thường bạn sẽ đặt hàng trên cùng của bạn làm tiêu đề bảng như hình 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ập trung và in đậm theo mặc định.

Các thuộc tính của CellPadding và CellSpaceswidth and height attributes. You can specify table width or height in terms of pixels or in terms of percentage of available screen area.

Thí dụ

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Width/Height</title>
   </head>
	
   <body>
      <table border = "1" width = "400" height = "150">
         <tr>
            <td>Row 1, Column 1</td>
            <td>Row 1, Column 2</td>
         </tr>
         
         <tr>
            <td>Row 2, Column 1</td>
            <td>Row 2, Column 2</td>
         </tr>
      </table>
   </body>
	
</html>

Điều này sẽ tạo ra kết quả sau -

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

Tiêu đề bảngcaption tag will serve as a title or explanation for the table and it shows up at the top of the table. This tag is deprecated in newer version of HTML/XHTML.

Thí dụ

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Caption</title>
   </head>
	
   <body>
      <table border = "1" width = "100%">
         <caption>This is the caption</caption>
         
         <tr>
            <td>row 1, column 1</td><td>row 1, columnn 2</td>
         </tr>
         
         <tr>
            <td>row 2, column 1</td><td>row 2, columnn 2</td>
         </tr>
      </table>
   </body>
	
</html>

Điều này sẽ tạo ra kết quả sau -

Tiêu đề bảng có thể được xác định bằng thẻ. Thẻ này sẽ được đặt để thay thế thẻ, được sử dụng để thể hiện tế bào dữ liệu thực tế. Thông thường bạn sẽ đặt hàng trên cùng của bạn làm tiêu đề bảng như hình 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ập trung và in đậm theo mặc định.

Các thuộc tính của 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 không gian trắng trong các ô bảng của bạn. Thuộc tính tế bào xác định không gian giữa các ô bảng, trong khi CellPadding biểu thị khoảng cách giữa các đường viền tế bào và nội dung trong một ô.

  • Thuộc tính Colspan và Rowspan − to create a separate table header.

  • 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. − to indicate the main body of the table.

  • Bàn hình nền − to create a separate table footer.

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

Thí dụ

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table</title>
   </head>
	
   <body>
      <table border = "1" width = "100%">
         <thead>
            <tr>
               <td colspan = "4">This is the head of the table</td>
            </tr>
         </thead>
         
         <tfoot>
            <tr>
               <td colspan = "4">This is the foot of the table</td>
            </tr>
         </tfoot>
         
         <tbody>
            <tr>
               <td>Cell 1</td>
               <td>Cell 2</td>
               <td>Cell 3</td>
               <td>Cell 4</td>
            </tr>
         </tbody>
         
      </table>
   </body>
	
</html>

Điều này sẽ tạo ra kết quả 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 nền - Bạn có thể đặt hình nền cho toàn bộ bảng hoặc chỉ cho một ô.

Thí dụ

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

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table</title>
   </head>
	
   <body>
      <table border = "1" width = "100%">
         
         <tr>
            <td>
               <table border = "1" width = "100%">
                  <tr>
                     <th>Name</th>
                     <th>Salary</th>
                  </tr>
                  <tr>
                     <td>Ramesh Raman</td>
                     <td>5000</td>
                  </tr>
                  <tr>
                     <td>Shabbir Hussein</td>
                     <td>7000</td>
                  </tr>
               </table>
            </td>
         </tr>
         
      </table>
   </body>
	
</html>

Điều này sẽ tạo ra kết quả sau -

Bảng bảng giải thích với ví dụ là gì?

Giới thiệu về thẻ bảng HTML.Bảng HTML cung cấp một cách để lấy hoặc xác định dữ liệu như văn bản, hình ảnh, liên kết, v.v., về mặt hàng và cột của ô.Các bảng HTML có thể được tạo bằng cách sử dụng TAG.Theo mặc định, dữ liệu bảng được căn chỉnh.Trong chủ đề này, chúng tôi sẽ tìm hiểu về các thẻ bảng HTML ...

Bảng trong mã là gì?

Một bảng trong lập trình máy tính là một cấu trúc dữ liệu được sử dụng để sắp xếp thông tin, giống như trên giấy.Có nhiều loại bảng liên quan đến máy tính khác nhau hoạt động theo một số cách khác nhau.a data structure used to organize information, just as it is on paper. There are many different types of computer-related tables that work in a number of different ways.