Table表格
一完整表格是由:表的标题 表头 表内容 表尾构成的
完整表格的好处:可以更好的提高浏览器加载的效率
<table>
<caption>title</caption>//标题(默认居中)
<thead>//表头(有默认加粗居中样式)
<tr>//表示行
<td>//表示列
</td>
</tr>
</thead>
<tbody>//身体
<tr>
<td>body1</td>
</tr>
</tbody>
<tfoot>//表尾
<tr>
<td>foot1</td>
</tr>
</tfoot>
</table>
当表格宽度不够内容的宽度是内容将撑起表格的宽度
如果表格的宽度足够显示内容时
这时表格的宽度局势你设置的宽度
二文字换行
超出div宽度连续的英文不会自动换行
系统认为空格中文是换行的标志
到达长度系统强制换行
三表格的合并(合并几那一行或几列就要删除对应的几行或几列)
合并行rowspan
和并列colspan
列子:
<table border="1px" style="text-align: center;">
<caption>练习课程表</caption>
<tr>
<td colspan="2">时间</td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
</tr>
<tr>
<td rowspan="4">1</td>
<td>第一节课</td>
<td>1</td>
<td rowspan="3">大数据库应用开发</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>第二节课</td>
<td></td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>第三节课</td>
<td></td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>第四节课</td>
<td></td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td rowspan="4">1</td>
<td>第五节课</td>
<td rowspan="2">大课</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>第六节课</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>第七节课</td>
<td></td>
<td>4</td>
<td colspan="3">自习</td>
</tr>
<tr>
<td>第八节课</td>
<td></td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
</table>
效果图:
四表格的样式;
cellpadding="0" 单元格的内边距
cellspacing="0" 单元格之间的距离
rules 显示 内边框的分割线
rows 显示行
cols 显示列
all 都显示
今天的中点是表格合并的运用,理解表格的合并在加以熟练就可以了
<td>星期二</td><td>星期三</td>
<td>星期四</td>
<td>星期五</td>
</tr>
<tr>
<td rowspan="4">1</td>
<td>第一节课</td>
<td>1</td>
<td rowspan="3">大数据库应用开发</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>第二节课</td>
<td></td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>第三节课</td>
<td></td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>第四节课</td>
<td></td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td rowspan="4">1</td>
<td>第五节课</td>
<td rowspan="2">大课</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>第六节课</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>第七节课</td>
<td></td>
<td>4</td>
<td colspan="3">自习</td>
</tr>
<tr>
<td>第八节课</td>
<td></td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
</table>
效果图:
四表格的样式;
cellpadding="0" 单元格的内边距
cellspacing="0" 单元格之间的距离
rules 显示 内边框的分割线
rows 显示行
cols 显示列
all 都显示
今天的中点是表格合并的运用,理解表格的合并在加以熟练就可以了