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>
实现如下: