HTML table

Table is defined by <table> tag. Each table has a number of rows (defined by <tr> tags), and each row is divided into a number of cells (defined by <td> tags). The letters td refer to table data, the contents of data cells. Data cells can contain text, pictures, lists, paragraphs, forms, horizontal lines, tables, and more.

Table example

<table border="1">
 <tr>
 <td>row 1, cell 1</td>
 <td>row 1, cell 2</td>
 </tr>
 <tr>
 <td>row 2, cell 1</td>
 <td>row 2, cell 2</td>
 </tr>
 </table>

HTML table and border attributes

If the border attribute is not defined, the table will not display the border. Sometimes this is useful, but most of the time, we want the border to show.

Use the border attribute to display a table with a border:

<table border="1">
 <tr>
 <td>Row 1, cell 1</td>
 <td>Row 1, cell 2</td>
 </tr>
 </table>

HTML table header

The header of the table is defined using the <th> tag.

Most browsers will display the table header as bold and centered text:

<html>
<head>
<table border="1">
 <tr>
 <th>Header 1</th>
 <th>Header 2</th>
 </tr>
 <tr>
 <td>row 1, cell 1</td>
 <td>row 1, cell 2</td>
 </tr>
 <tr>
 <td>row 2, cell 1</td>
 <td>row 2, cell 2</td>
 </tr>
 </table>
 </head>
 </html>
举个例子：
<html>
<head>
<meta charset="utf-8">
    <title>无标题页</title>
    <style type="text/css">
        .tb
        {
         border-width:1px;
         border-collapse:collapse;
         border-color:black;
         border-style:solid;
        }
        td
        {
         border-width:1px;
         border-collapse:collapse;
         border-color:black;
         border-style:solid;
        }
    </style>
</head>
<body>
    <div>
    <table width="600" height="400" border="1">
     <tr>
      <td colspan="3"></td>
     </tr>
      <tr>
       <td rowspan="3"></td>
       <td> </td>
       <td> </td>
     </tr>
      <tr>
       <td> </td>
       <td> </td>
     </tr>
     <tr>
       <td> </td>
       <td> </td>
     </tr>
    </table>
    </div>
</body>
</html>

HTML table tag

##Tag

##<table> Define the table cell

<caption> . -- defined

#<thead> Define the header of the table Define the footer of the table

Continuing Learning

new file

<html> <head> <table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> </head> </html> 举个例子： <html> <head> <meta charset="utf-8"> <title>无标题页</title> <style type="text/css"> .tb { border-width:1px; border-collapse:collapse; border-color:black; border-style:solid; } td { border-width:1px; border-collapse:collapse; border-color:black; border-style:solid; } </style> </head> <body> <div> <table width="600" height="400" border="1"> <tr> <td colspan="3"></td> </tr> <tr> <td rowspan="3"></td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table> </div> </body> </html>

submit Reset Code

Automatic operation

HTML table

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]