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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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

HTML basic tutorial table tag

ElementaryHTML+CSS basic introductory tutorial

ElementaryHTML/CSS 5-hour basic introductory tutorial

ElementaryCSS 0 basic introductory tutorial

ElementaryJQuery basic introductory tutorial

ElementaryPython basic introductory tutorial

ElementaryEasyUI basic introductory video tutorial

ElementaryNginx basic introductory video tutorial

ElementaryHTML5 basic knowledge introductory video tutorial

Elementary0 Basic WeChat development introductory video tutorial

ElementaryHTML basic tutorial

ElementaryHan Shunping 2016 latest HTML basic video tutorial

ElementaryBasic knowledge of HTML+css