HTML basic tutorial table tag

Table tag

##The web page has functions similar to those in word. Of course, there will also be functions similar to those in excel, and table is one of them

The structure of the table

#<table>

;</td>

t;</td> ;

td>

;/table>

#<table>Attribute

Width: Table width, the unit can be a percentage or a fixed value.

Height: Table height. Align: horizontal alignment of the table, values: left, center, right

Border: border thickness.
Bordercolor: Border color.

bgColor: table background color.
background: background image URL.
cellpadding: the distance between the cell edge and the content (padding distance)
cellspacing: the distance between cells ( spacing)
rules: merge cell border lines, value: all
Note: rules compatibility is not good, please Use CSS to replace it.
Let’s actually draw a table

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
     <table border="2" width="300" height="100" bordercolor="blue" bgColor="#88cc66" cellspacing="0" cellpadding="2" rules="all">
         <tr>
             <td>工号</td>
             <td>姓名</td>
             <td>职位</td>
         </tr>
         <tr>
             <td>001</td>
             <td>小明</td>
             <td>设计师</td>
         </tr>
         <tr>
             <td>002</td>
             <td>小方</td>
             <td>工程师</td>
         </tr>
         <tr>
             <td>003</td>
             <td>小白</td>
             <td>程序员</td>
         </tr>
     </table> 
    </body>
</html>

bgColor: Row background color

height: Row height

align: The text in the row is horizontally centered, values: left, center, right

valign: Vertically centered, values: top, middle, bottom

##<td>or<th>attribute

< td> is an ordinary cell, <th> is a header cell, which is displayed in bold and centered.

width: cell width
height: cell height
bgColor : Cell background color
background: Cell background image
align: Horizontal alignment
valign: Vertical horizontal alignment
rowspan: Merge upper and lower cells. Merge attributes must be placed in the first cell.
colspan: merge left and right cells. When merging, there must be decreases as well as increases, ensuring that the number of cells in each row remains unchanged.

Example:

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
     <table border="2" width="400" height="100" bordercolor="blue" bgColor="#88cc66" cellspacing="0" cellpadding="2" rules="all">
         <tr bgColor="red" align="center">
             <th>星期日</th> 
             <th>星期一</th>
             <th>星期二</th>
             <th>星期三</th>
             <th>星期四</th>
             <th>星期五</th>
             <th>星期六</th>
         </tr>
         <tr bgColor="yellow" align="center">
             <td height="50">25</td>
             <td>26</td>
             <td>27</td>
             <td>28</td>
             <td>29</td>
             <td>30</td>
             <td>1</td>
         </tr>
         <tr align="center">
             <td  height="50">2</td>
             <td>3</td>
             <td>4</td>
             <td>5</td>
             <td>6</td>
             <td>7</td>
             <td>8</td>
         </tr>
     </table> 
    </body>
</html>

Note: The attribute is case-sensitive. If bgColor is written as bgcolor, it will have no effect

You can enter each attribute and view the output effect

##caption tag

Add a title and summary to the table

Summary

The content of the summary will not be displayed in the browser. Its function is to increase the readability (semanticization) of the table, enable search engines to better understand the table content, and also enable screen readers to better help special users read the table content.

Syntax: <table summary="table introduction text">

Title

is used to describe the content of the table , the display position of the title: above the table.

Grammar:

<table> <caption>Title text</caption>

<tr>

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
     <table border="2" width="400" height="100" bordercolor="blue" bgColor="#88cc66" cellspacing="0" cellpadding="2" rules="all"summary="日历信息">
         <caption>2016.10日历</caption>
         <tr bgColor="red" align="center">
             <th>星期日</th> 
             <th>星期一</th>
             <th>星期二</th>
             <th>星期三</th>
             <th>星期四</th>
             <th>星期五</th>
             <th>星期六</th>
         </tr>
         <tr bgColor="yellow" align="center">
             <td height="50">25</td>
             <td>26</td>
             <td>27</td>
             <td>28</td>
             <td>29</td>
             <td>30</td>
             <td>1</td>
         </tr>
         <tr align="center">
             <td  height="50">2</td>
             <td>3</td>
             <td>4</td>
             <td>5</td>
             <td>6</td>
             <td>7</td>
             <td>8</td>
         </tr>
     </table> 
    </body>
</html>

Continuing Learning

new file

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <table border="2" width="300" height="100" bordercolor="blue" bgColor="#88cc66" cellspacing="0" cellpadding="2" rules="all"> <tr> <td>工号</td> <td>姓名</td> <td>职位</td> </tr> <tr> <td>001</td> <td>小明</td> <td>设计师</td> </tr> <tr> <td>002</td> <td>小方</td> <td>工程师</td> </tr> <tr> <td>003</td> <td>小白</td> <td>程序员</td> </tr> </table> </body> </html>

submit Reset Code

Automatic operation

Previous section Next Section

Tutorial List

get help

Course Recommendations
Courseware download

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

About us Disclaimer Sitemap: php.cn：Public welfare online PHP training，Help PHP learners grow quickly！

HTML basic tutorial table tag

IntermediateFront-end Vue3 actual combat [handwritten vue project]

ElementaryAPIPOST tutorial [Popularization of technical concepts related to network communication]

IntermediateIssue 22_Comprehensive actual combat

ElementaryIssue 22_PHP Programming

ElementaryIssue 22_Front-end development

IntermediateBig data (MySQL) video tutorial full version

ElementaryGo language tutorial-full of practical information and no nonsense

ElementaryGO Language Core Programming Course

IntermediateJS advanced and BootStrap learning

IntermediateSQL optimization and troubleshooting (MySQL version)

IntermediateRedis+MySQL database interview tutorial

ElementaryDeliver food or learn programming?