HTML5基本语法
1.表格
table
表格的基本属性有：
1.border 边框。
2.width 宽度。
3.height 高度。
4.align 对齐方式。
5.bgcolor 背景颜色。
6.background 背景图片。
7.cellspacing 单元格之间的间距。
8.cellpadding 单元格文本和单元格边框的距离。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!--boeder :表格的边框
width:宽度
height：高度
cellspaceing:单元格之间的距离
cellpadding:单元格文本与单元格边框之间的距离
align:对齐方式
bgcolor:背景色
background：背景颜色
bordercolor:边框颜色-->
<table border="1"width="200px"height="80px"cellspacing="10"cellpadding="1" background="../img/15438-106.jpg">
<tr>
<th>啦啦啦</th>
<td>11</td>
<td>22</td>
<td>33</td>
</tr>
<tr>
<th>呦呦呦</th>
<td>11</td>
<td>22</td>
<td>33</td>
</tr>
</table>
</body>
</html>
2.行和列
行和列的属性有如下几个：
1.width 宽度。
2.height 高度。
3.bgcolor 背景颜色。
4.align 对齐方式（水平方向）
5.valign 对齐方式（垂直方向）
6.nowarp 文本不换行
7.colspan=”n” 跨n列。
8.rowspan=”n” 跨n行。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跨行，跨列</title>
</head>
<body>
<table border="1" width="300px" height="60px">
<tr>
<td colspan="4" align="center">电子产品类</td>
</tr>
<tr>
<td colspan="2" align="center">家电类</td>
<td colspan="2" align="center">家具类</td>
</tr>
<tr>
<td colspan="3" align="center">文具类</td>
<td>饮</td>
</tr>
<tr>
<td>21</td>
<td>21</td>
<td>23</td>
<td>31</td>
</tr>
</table>
<table border="1" width="300px" height="100px">
<tr>
<td rowspan="2">张三</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td rowspan="2">张三</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>语文</td>
<td>100</td>
</tr>
</table>
<table border="1">
<tr>
<th colspan="3"><h1>学生成绩</h1></th>
</tr>
<tr>
<td rowspan="2"><h2>张三</h2></td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td rowspan="2">张三</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>语文</td>
<td>100</td>
</tr>
<table border="1">
<tr>
<td colspan="3" align="center">杰瑞</td>
</tr>
<tr>
<td>html5</td>
<td rowspan="2">android</td>
<td>ios</td>
</tr>
<tr>
<td>html5</td>
<td>ios</td>
</tr>
</table>
</table>
<table border="1" width="180px",height="120px">
<tr>
<td rowspan="6">
<img src="../img/15438-106.jpg" alt="" width="30px" height="60px">
</td>
<td rowspan="3"></td>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td rowspan="3"></td>
<td></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</body>
</html>
结果如下
| 电子产品类 | |||
| 家电类 | 家具类 | ||
| 文具类 | 饮 | ||
| 21 | 21 | 23 | 31 |
| 张三 | 语文 | 100 |
| 语文 | 100 | |
| 张三 | 语文 | 100 |
| 语文 | 100 |
学生成绩 |
||
|---|---|---|
张三 |
语文 | 100 |
| 语文 | 100 | |
| 张三 | 语文 | 100 |
| 语文 | 100 | |
| 杰瑞 | ||
| html5 | android | ios |
| html5 | ios | |
|
|||
3.结构化的表格标签
属性有如下几个：
1.caption:在表格外部加一个标题。
2.thead :表示头部执行代码。
3.tbody:表示内容执行的代码。
4.tfoot:表示尾部执行的顺序。
代码如下：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>结构化的表格标签</title>
</head>
<body boder="1" width="300px">
<!--
<caption></caption> 加一个表格标题
<thead></thead> 表格的头部区域
<tboday></tboday> 表格的内容区域
<tfoot></tfoot>
<colgroup></colgroup>
-->
<table border="1" width="100px">
<caption>标题</caption>
<colgroup>
<col style="background-color: red">
<col span="2" style="background-color: red">
<!--<col style="background-color: red">-->
</colgroup>
<thead>
<tr>
<th>1</th>
<th>1</th>
<th>1</th>
</tr>
</thead>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>实现如下： 