网页设计与制作教程Web前端开发（第7版）课件：CSS3的属性-CSS表格属性_第1页
网页设计与制作教程Web前端开发（第7版）课件：CSS3的属性-CSS表格属性_第2页
网页设计与制作教程Web前端开发（第7版）课件：CSS3的属性-CSS表格属性_第3页
网页设计与制作教程Web前端开发（第7版）课件：CSS3的属性-CSS表格属性_第4页
网页设计与制作教程Web前端开发（第7版）课件：CSS3的属性-CSS表格属性_第5页
已阅读5页，还剩10页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

本章介绍CSS设置背景、文本、列表、图像、表格、表单、链接等元素的属性样式。

CSS3的属性CSS表格属性《网页设计与制作教程Web前端开发第7版》

目录

CSS3的属性5.1CSS背景属性5.2CSS字体属性5.3CSS文本属性5.4CSS尺寸属性5.5CSS列表属性5.6CSS表格属性5.7CSS内容属性5.8CSS属性的应用5.9实训——制作社区网页面习题55.6CSS表格属性5.6.1合并边框属性border-collapse语法：border-collapse:separate|collapse示例：table{border-collapse:separate;}5.6CSS表格属性5.6.2边框间隔属性border-spacing语法：border-spacing:length|length示例：table{border-collapse:separate;border-spacing:10px;}5.6CSS表格属性5.6.3标题位置属性caption-side语法：caption-side:bottom|left|right|top示例：tablecaption{caption-side:top;width:auto;text-align:left;}5.6CSS表格属性5.6.4单元格无内容显示方式属性empty-cells语法：empty-cells:hide|show5.6CSS表格属性【例5-17】使用border-spacing属性设置相邻单元格边框间的距离，本例文件5-17.html的显示效果，如图5-20所示。5.6CSS表格属性<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>CSS表格属性</title><styletype="text/css">table.one{border-collapse:separate;/*表格边框独立*/border-spacing:10px;/*单元格水平、垂直距离均为10px*/}table.two{border-collapse:separate;/*表格边框独立*/border-spacing:10px20px;/*单元格水平距离10px、垂直距离20px*/empty-cells:hide;/*表格的单元格无内容时隐藏单元格的边框*/}</style></head>

5.6CSS表格属性<body><tableborder="1"style="caption-side:bottom;"><caption>每餐饮料</caption><tr><th>早餐</th><th>午餐</th><th>晚餐</th></tr><tr><td>可可</td><td>咖啡</td><td>茶</td></tr></table><hr><tableborder="1"style="border-collapse:collapse;border-spacing:10px20px;"><tr><th>早餐</th><th>午餐</th><th>晚餐</th></tr><tr><td>可可</td><td>咖啡</td><td>茶</td></tr></table><hr>

5.6CSS表格属性<tableclass="one"border="1"><tr><th>早餐</th><th>午餐</th><th>晚餐</th></tr><tr><td>可可</td><td>咖啡</td><td>茶</td></tr></table><br><tableclass="two"border="1"><tr><th>早餐</th><th>午餐</th><th></th></tr><tr><td>可可</td><td></td><td>茶</td></tr></table></body></html>5.6CSS表格属性5.6.4表格设置方式属性table-layout语法：table-layout:auto|fixed示例：table{table-layout:auto;}5.6CSS表格属性【例5-18】使用border-spacing属性设置相邻单元格边框间的距离，本例文件5-18.html的显示效果，如图5-21所示。5.6CSS表格属性<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>table-layout属性</title></head><body><tableborder="1"style="table-layout:auto;"><tr><th>早餐</th><th>午餐</th><th>晚餐</th></tr><tr><td>可可</td><td>咖啡</td><td>茶</td></tr></table><hr>5.6CSS表格属性<tableborder="1"style="table-layout:fixed;width:150px;"><tr><thwidth="90%">早餐</th><thwidth="10%">午餐</th><thwidth="10%">晚餐</th></tr><tr><tdwidth="90%">可可</td>

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论