<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--快捷键的使用
tab:选中的内容右移
按住shift+tab:选中的内容左移-->
<!--table表格标签：
1.border:给表格添加边框。当属性值增大时，只有外围框线增加，单元格的边框始终px
2.brodercolor="blue" 边框颜色
3.Width Height：表格的高宽
4.Cellspacing：单元格与单元格的间隙距离。当Cellspacing="0"时，只会使单元格的间隙为0，但不会合并边框线。
表格边框合并：style="border-collapse:collapse;",无需再写Cellspacing="0"
5.Cellpadding :每个单元格中的内容与边框线的距离。
6.align:表格在屏幕的左中右位置显示，left center right
注意：给表格加上align属性，相当于让表格浮动
会直接打破表格后面元素的原始排列方式
7.bgcolor(不推荐):背景颜色 等同于（推荐）style="background-color: "
8.background:background="../img/Lenovo.jpg"设置背景图片
等同于style="background-image: url('../img/Lenovo.jpg')";"且背景图片会覆盖背景图片
th:标题-->
<!--tr和td属性：
1.Width Height：单元格的高宽
2.bgcolor:单元格的背景颜色
3.align:left center right单元格中的文字，水平对齐方式
4.valign:top center bottom单元格中的文字，垂直对齐方式
5.nowrap="nowrap"单元格中的文字不换行
注意：1.当表格属性与行列属性冲突时，以行列属性为准。(近者优先，就近原则)
2.表格中的align属性，是控制表格自身在浏览器中的位置
行和列的align属性，是控制单元格中的文字在单元格中的对齐方式
3.表格中的align属性，--> <table border="1" >
<tr >
<td>1 1</td>
<td>1 2</td>
<td>1 3</td>
</tr>
<tr>
<td>2 1</td>
<td>2 2</td>
<td>2 3</td>
</tr>
</table> 
<table border="5" bordercolor="red" width="500" height="150" style="border-collapse:collapse;background-color: aqua" Cellspacing=" Clpadding="10px" align="center";> <tr bgcolor="#ffe4c4" align="center" align="top"> <td width="250" height="200">1 1</td> <td >1 2</td> <td>1 3</td> </tr> <tr> <td>2 1</td> <td>2 2</td> <td>2 3</td> </tr> </table>
<table>
<tr>
<th>学号</th>
<th>姓名</th>
<th>数学</th>
<th>语文</th>
<th>英语</th>
</tr>
<tr>
<td>1001</td>
<td>张三</td>
<td>122</td>
<td>120</td>
<td>150</td>
</tr>
<tr>
<td>1001</td>
<td>张三</td>
<td>122</td>
<td>120</td>
<td>150</td>
</tr>
<tr>
<td>1001</td>
<td>张三</td>
<td>122</td>
<td>120</td>
<td>150</td>
</tr>
</table>
<!--如果第一行第一列不添加任何文字，可能会在成表格塌陷，补救的方法是添加转义字符&;
colspan:跨列 rowspan:跨行
在涉及到跨行与跨列问题时，以行为标准，被跨的行或列在新的<td>中不再写-->
<table border="1">
<tr>
<td>第一行第一列</td>
<td colspan="3">第一行跨三列</td>
</tr>
<tr>
<td rowspan="3">第二行跨三行</td>
<td>第二行第二列</td>
<td>第二行第三列</td>
<td>第二行第四列</td>
</tr>
<tr>
<td>第三行第二列</td>
<td>第三行第三列</td>
<td>第三行第四列</td>
</tr>
<tr>
<td>第四行第二列</td>
<td>第四行第三列</td>
<td>第四行第四列</td>
</tr>
</table>
<table border="1" width="500px" height="400">
<tr>
<td colspan="4" align="center">1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td colspan="2" align="center">3</td>
<td colspan="2" align="center">3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
<tr>
<td colspan="2" align="center">6</td>
<td colspan="2" align="center">6</td>
</tr>
<tr>
<td colspan="3" align="center">6</td>
<td align="center">6</td>
</tr>
<tr>
<td>7</td>
<td>7</td>
<td>7</td>
<td>7</td>
</tr>
</table>
<table border="1" width="300px" height="200">
<tr>
<td rowspan="2">1</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td rowspan="2">1</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
</tr>
</table>
<table border="1" width="300px" height="200">
<tr>
<td rowspan="6" >1</td>
<td rowspan="3">1</td>
<td rowspan="2">1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
</tr>
<tr>
<td rowspan="2">1</td>
<td>1</td>
</tr>
<tr>
<td rowspan="3">1</td>
<td>1</td>
</tr>
<tr>
<td rowspan="2">1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
</tr>
</table>
<!--caption标签：表格标签，出现在表格之上且中间-->
<table border="1" width="300px" height="200">
<caption>表格标题</caption>
<tr>
<td colspan="2">1</td>
</tr>
<tr>
<td rowspan="4">1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
</tr>
<tr>
<td>1</td>
</tr>
<tr>
<td>1</td>
</tr>
</table>
<table width="500" align="center">
<colgroup style="background-color: red;"> <!--前两列为一组-->
<col/> <!--第一列-->
<col/> <!--第二列-->
</colgroup>
<col style="background-color: blue;"/> <!--第三列-->
<caption>表格标题</caption>
<!--语义化标签-->
<thead>
<tr>
<th>头1</th>
<th>头2</th>
<th>头3</th>
</tr>
</thead>
<tbody>
<tr>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
</tbody>
<tbody>
<tr>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>尾1</td>
<td>尾2</td>
<td>尾3</td>
</tr>
</tfoot>
</table>
</body>
</html>
扫一扫
1602
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
