小白程序员的第二天
来源:互联网 发布:nc.windows.app.23787 编辑:程序博客网 时间:2024/05/21 06:40
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 都显示
今天的中点是表格合并的运用,理解表格的合并在加以熟练就可以了
- 小白程序员的第二天
- 小白的第二天
- 程序员的第二天
- 小白第二天
- 小白第二天
- 黑马程序员的第二天
- 学习P2P第二天的小问题
- 第二天学的小程序
- 小白程序员的烦恼
- 软件测试—小白第二天
- 腾讯课堂IMWeb小白-第二天
- 黑马程序员第二天
- 寻找第二小的数
- 寻找第二小的数
- 程序员的养成第二篇
- 小白程序员必备的十项技能
- 程序员小白的这一年
- 关于小白程序员的一些思考。
- Oracle 删除重复数据只留一条 查询及删除重复记录的SQL语句 1、查找表中多余的重复记录,重复记录是根据单个字段(Id)来判断 select * from 表 wher
- Linux system 存储设备的管理
- bzoj1047 单调队列
- 将oracle的dmp导入到不同表空间 oracle的dmp文件导入到不同表空间 oracle将dmp文件导入到不同的表空间方法: 1、exp USER/PASSOWRD@SID file=c:\t
- SeetaFaceEngine/FaceAlignment/
- 小白程序员的第二天
- 静态导入
- html5新增属性
- iOS 11更新后以及iPhone X推出后工程中遇到的问题及适配
- NOIP赛前常用模板代码总结
- html基本样式
- html基本样式及表格
- easyui中combotree只能选子选项,父级不被选中
- rraanndd