Community
Learn
Tools Library
AI Tools
Leisure
search
English
search
logo
  • Sign In
  • Sign Up
Password reset successful

Follow the proiects vou are interested in andi aet the latestnews about them taster

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>
Reset Code
Automatic operation
submit
logo
Preview Clear
Previous section
Next Section
Tutorial List
get help
  • Course Recommendations
  • Courseware download
Free Learn HTML+CSS at your fingertips
¥ 29 Learn HTML video tutorials at your fingertips
Free Learn jQuery at your fingertips
¥ 29 Video tutorial to learn CSS at your fingertips
Free Learn PHP programming at your fingertips
Free Tutorial to learn JavaScript at your fingertips
Free ECMAScript new features in-depth video tutorial
Free Detailed video tutorial on Ajax principles
Free React basics in-depth video tutorial
Free React routing in-depth video tutorial
Free React Native basics video tutorial
Free PHP Fun Breakthrough Class
The courseware is not available for download at the moment. The staff is currently organizing it. Please pay more attention to this course in the future~
Students who have watched this course are also learning
496451
Let's briefly talk about starting a business in PHP Quick introduction to web front-end development Large-scale practical Tianlongbabu development of Mini version MVC framework imitating the encyclopedia website of embarrassing things Getting Started with PHP Practical Development: PHP Quick Creation [Small Business Forum] Login verification and classic message board Computer network knowledge collection Quick Start Node.JS Full Version The front-end course that understands you best: HTML5/CSS3/ES6/NPM/Vue/...[Original] Write your own PHP MVC framework (40 chapters in depth/big details/must read for newbies to advance)