HTML table

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

Let’s write a simple HTML file to practice these tags:

<html>
<title >表格</title>
<body style="font-size:20px">
    <p style="text-align:center">表格</p>  
     <table  align="center" border="1">  
            <tr>
            <td>第一行和第一列</td>
            <td>第一行和第二列</td>
            <td>第一行和第三列</td>
            </tr>
             <tr>
             <td>第二行和第一列</td>
             <td>第二行和第二列</td>
             <td>第二行和第三列</td>
             </tr>
     </table>   
</body>
</html>

This is the experimental screenshot:

QQ截图20161206113742.png

##border "1" defines the thickness of the outermost border, which is 1. You can also set it to 0, which means no border is displayed (the default is no border). Here we change it to 15 and try:

QQ截图20161206113812.png

Let’s introduce two attributes of the table: colspan: control the number of columns occupied by this unit rowspan: control the number of rows occupied by this unit

<html>
<title >表格</title>
<body style="font-size:30px">
    <p style="text-align:center">表格</p>
     <table  align="center" border="15" >
        <tr>
         <td align="center" colspan="2">第一行和第一列</td>
         </tr>
         <tr>
         <td rowspan="2">第二行和第一列 </td>
            <td>第二行和第二列 </td>
            <td >第二行和第三列</td>
         </tr>
         <tr>
         <td>第三行和第一列 </td>
            <td>第三行和第二列 </td>
         </tr>
        </table>   
</body>
</html>

If you don’t understand it very well, let’s take a look Looking at the performance on the web page, comparison helps us understand. Let the unit in the first column and first row occupy two columns, and let the unit in the second row and first column occupy two rows. This is the effect.

QQ截图20161206114105.png

There are many details that can be defined in the table. We will briefly describe it here. Everyone needs to practice:

Tag: < th>Header< ; /th>: Set the table header

Tag: <caption>title< /caption>: Set the table title

Attribute: cellpadding="..."Set the cell edge Distance

Attribute: bgcolor="..."Set the table background color

Attribute: background="..." Use a certain picture as the table background

< table> Define table

<caption> Define table title.

<th> Define the header of the table.

<tr> Define the rows of the table.

<td> Define table cells.

<thead> Define the header of the table.

<tbody> Defines the body of the table.

<tfoot> Define the footer of the table.

<col> Defines the properties used for table columns.

<colgroup> Defines the group of table columns.

Continuing Learning

new file

<html> <title >表格</title> <body style="font-size:30px"> <p style="text-align:center">表格</p> <table align="center" border="15" > <tr> <td align="center" colspan="2">第一行和第一列</td> </tr> <tr> <td rowspan="2">第二行和第一列 </td> <td>第二行和第二列 </td> <td >第二行和第三列</td> </tr> <tr> <td>第三行和第一列 </td> <td>第三行和第二列 </td> </tr> </table> </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]