Form table
Now form a substantially common label used a few years ago to the front end of the layout table industry, processing, display tabular data. This year because the page had to bring standardization to enable DIV + CSS page layout caused major reconstruction bloody, interested students on their own Baidu.
Create Table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格标签</title>
</head>
<body>
<!-- 跟无序列表一样，table里面只能嵌套tr标签 -->
<!-- table的属性有：边框-border 单元格与边框的间隙-cellspacing 单元格内容的间隙-cellpading 单元格宽度-width 单元格高度-height 水平对齐方式-align:left center right -->
<!-- cellspacing 单元格与边框的距离 cellpading 内容与单元格之间的距离 -->
<!-- 一般三参为：0 border cellspacing cellpading -->
<table width="1000px" align="center" border="1px" cellspacing="0" cellpading="0" height="300px">
<tr align="center">
<td>姓名</td>
<td>性别</td>
<td>工资</td>
</tr>
<tr align="center">
<td>小红</td>
<td>女</td>
<td>500</td>
</tr>
<tr align="center">
<td>小明</td>
<td>男</td>
<td>500</td>
</tr>
</table>
</body>
</html>
1.table used to define a form.
2.tr used to define the row in the table, must be nested in the tag table, comprising several pairs tr in the table, there are several rows of the table.
3.td: a cell definition table, tr tag must be nested in the pair contains several pairs tr td, it means the number of columns in the row (or the number of cells).
Header tags
Usually header cell in a table or a first column of a first row which is centered bold text, as shown below, that is provided with a table header. Set header is as easy as with the header tag th replaced by corresponding to the cell label td.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表头标签</title>
</head>
<body>
<!-- 表格标题一般用caption标签定义，体现出是一个整体 -->
<!-- 一般表头用th取代td标签，表头内容自动加黑变粗居中 -->
<table width="1000" align="center" border="0" cellspacing="0" cellpading="0" >
<caption>我是表格标题</caption>
<tr align="center">
<th>姓名</th>
<th>性别</th>
<th>工资</th>
</tr>
<tr align="center">
<td>小红</td>
<td>女</td>
<td>500</td>
</tr>
<tr align="center">
<td>小明</td>
<td>男</td>
<td>500</td>
</tr>
</table>
</body>
</html>
caption labels must immediately after the table tag.
There is only a table inside.
Merge Cells
Interbank merger: rowspan across columns merge: colspan
Merge Cells ideas:
The more content time of the merger, there will be extra things, delete it. For example the three td combined into one, it would be redundant two, need to be removed.
Formula: The number of deleted = Merge number --1
The combined first order of the first left and right rear
- First determine the interbank across columns or merge
- Find the target cell on a first-down on the first left and right
- The number of deleted delete cells = number of combined --1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单标签</title>
</head>
<body>
<!-- 合并单元格 跨行合并：rowspan 跨列合并：colspan -->
<table width="500" border="1" cellspacing="1" cellpadding="1" >
<tr>
<td>姓名</td>
<td>性别</td>
<td>工资</td>
<td>部门</td>
<td>特殊说明</td>
</tr>
<tr>
<td>小明</td>
<td>男</td>
<td>3500</td>
<td>设计</td>
<td rowspan="2">rowspan</td>
</tr>
<tr>
<td>小红</td>
<td>女</td>
<td>3000</td>
<td>后端</td>
</tr>
</table>
<table width="500" border="1" cellspacing="1" cellpading="1" >
<tr>
<td>小红</td>
<td>小明</td>
<td>小王</td>
</tr>
<tr>
<td colspan="3">colspan</td>
</tr>
</table>
</body>
</html>
Because now is not commonly used or even no access to basic, we have a better layout, table understood as a form of learning.
