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>

Next Section

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

Full Screen

None