HTML表格
-
<table>表格 边框border属性 宽度width属性
-
<caption>表格标题，居中显示
-
<tr>行
-
<th>表头，内容居中，加粗显示
-
<td>单元格
带结构的表格：优化用户体验，加载一部分显示一部分
表格划分为三部分：表头、主体、脚注
-
thead：表格的头（放表格的表头）
-
tbody：表格的主体（放数据本体）
-
tfoot：表格的脚（放表格的脚注）
<table>
<caption>....</caption>
<thead>
<tr>
<th>表头</th>
</tr>
</thead>
<tbody>
<tr>
<td>主体</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>脚注</td>
</tr>
</tfoot>
</table>
表格属性
| 属性 | 值 | 描述 |
|---|---|---|
| width | pixels、% | 规定整个表格的宽度 |
| align | left、center、right | 表格相对周围元素的对齐方式 |
| border | pixels | 规定表格边框的宽度 |
| bgcolor | rgb（x，x，x）、#XXXXXX、colorname | 表格的背景颜色 |
| cellpadding | Pixels、% | 单元边沿与其内容之间的空白 |
| cellspacing | Pixels、% | 单元格之间的空白 |
| frame | 属性值 | 规定外侧边框的哪个部分是可见的 |
| rules | 属性值 | 规定内侧边框的哪个部分是可见的 |
frame属性值：
| 值 | 描述 |
|---|---|
| void | 不显示外侧边框 |
| above | 显示上部的外侧边框 |
| below | 显示下部的外侧边框 |
| hsides | 显示上边和下边的外侧边框 |
| vsides | 显示左边和右边的外侧边框 |
| lhs | 显示左边的外侧边框 |
| rhs | 显示右边的外侧边框 |
| box | 在所有四个边上显示外侧边框 |
| border | 在所有四个边上显示外侧边框 |
rules属性值：
| 值 | 描述 |
|---|---|
| none | 没有线条 |
| groups | 位于行组和列组之间的线条 |
| rows | 位于行之间的线条 |
| cols | 位于列之间的线条 |
| all | 位于行和列之间的线条 |
<tr>和<td>标签属性：
| 属性 | 值 | 描述 |
|---|---|---|
| align | left、center、right、justify、char | 行/单元格内容的水平对齐 |
| Valign | top、middle、bottom、baseline | 行/单元格内容的垂直对齐 |
| Bgcolor | rgb（X，X，X）、#XXXXXX、colorname | 行/单元格的背景颜色 |
| width | % pixels | 宽度 |
| height | % pixels | 高度 |
<thead><tbody><tfoot>标签属性：
| 属性 | 值 | 描述 |
|---|---|---|
| align | left、center、right、justify、char | 水平对齐 |
| valign | top、middle、bottom、baseline | 垂直对齐 |
跨列属性colspan：
<table>
<tr>
<td colspan="2">...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</table>
跨行属性rowspan：
<table>
<tr>
<td>...</td>
<td rowspan="2">...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
</tr>
</table>
表格嵌套：
<table>
<tr>
<td>...</td>
<td>
<table>
<tr>
<td>...</td>
<td>...</td>
</tr>
</table>
</td>
</tr>
</table>
表格布局
<!DOCTYPE html> <html> <head> <title>XX网-友情链接</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> </head> <body bgcolor="#f2f2f2"> <table width="100%" border="0" cellspacing="0" cellpadding="0" > <tr bgcolor="#14191e" height="80px" > <td width="200px"><img src="1710047743093.png"></td> <td style="color:white" align="right">首页</td> <td style="color:white" align="right">计划</td> <td style="color:white" align="right">课程</td> <td style="color:white" align="right">文章</td> <td style="color:white" align="center">个人中心</td> </tr> <tr height="10px"><td></td></tr> <tr><td colspan="2"> <table align="center" width="1024px"> <tr> <td width="240px" valign="top"> <table width="100%" bgcolor="#ffffff"> <tr><td align="center" height="60px"><a href="https://www.imooc.com/about/us">关于我们</a></td></tr> <tr><td align="center" height="60px"><a href="https://www.imooc.com/about/group">团队介绍</a></td></tr> <tr><td align="center" height="60px"><a href="https://www.imooc.com/about/job">人才招聘</a></td></tr> <tr><td align="center" height="60px"><a href="https://www.imooc.com/seek/masters">讲师招募</a></td></tr> <tr><td align="center" height="60px"><a href="https://www.imooc.com/about/contact">联系我们</a></td></tr> <tr><td align="center" height="60px"><a href="https://www.imooc.com/help">常见问题</a></td></tr> </table> </td> <td width="20px"></td> <td width="764px" bgcolor="#ffffff"> <pre> 什么是慕课（MOOC） 源于国外，Massive（大规模）Open（开放）Online（在线）Course（课程）。 慕课网是什么MOOC 专注做好IT技能教育的MOOC，符合互联网发展潮流接地气儿的MOOC。 我们免费，我们只教有用的，我们专心做教育。 为什么做慕课网 慕课网的小伙伴希望所有热爱互联网的同学能更加便捷的获取学习资源， 用互联网思维改变我们的学习。 我们提供最新的知识，帮你应对变化的世界！ 慕课网在做什么 做更多实用的课程，做更好体验的产品，研究更牛的技术！ 慕课网的追求是什么 让更多热爱互联网的同学来慕课网学习， 多年以后，圈子里一批技术牛说：我在慕课网学习过，这就够了。 慕课网有移动端吗 有啊，手机端、iPad版请扫描下方二维码下载 iPhone Android iPad 慕课网的大佬是谁 慕课网隶属于北京慕课科技中心(有限合伙)，是一家从事互联网免费教学的网络教育公司。 秉承“开拓、创新、公平、分享”的精神，将互联网特性全面的应用在教育领域， 致力于为教育机构及求学者打造一站式互动在线教育品牌 想及时沟通，请加慕粉QQ群，咱们当面聊！ 群7: 416465236 Java群: 6200344 Php群: 42125527 web前端群3: 249860541 安卓群: 232465453 在校生群: 187845234 什么是慕课（MOOC） 源于国外，Massive（大规模）Open（开放）Online（在线）Course（课程）。 慕课网是什么MOOC 专注做好IT技能教育的MOOC，符合互联网发展潮流接地气儿的MOOC。 我们免费，我们只教有用的，我们专心做教育。 为什么做慕课网 慕课网的小伙伴希望所有热爱互联网的同学能更加便捷的获取学习资源， 用互联网思维改变我们的学习。 我们提供最新的知识，帮你应对变化的世界！ 慕课网在做什么 做更多实用的课程，做更好体验的产品，研究更牛的技术！ 慕课网的追求是什么 让更多热爱互联网的同学来慕课网学习， 多年以后，圈子里一批技术牛说：我在慕课网学习过，这就够了。 慕课网有移动端吗 有啊，手机端、iPad版请扫描下方二维码下载 iPhone Android iPad 慕课网的大佬是谁 慕课网隶属于北京慕课科技中心(有限合伙)，是一家从事互联网免费教学的网络教育公司。 秉承“开拓、创新、公平、分享”的精神，将互联网特性全面的应用在教育领域， 致力于为教育机构及求学者打造一站式互动在线教育品牌 想及时沟通，请加慕粉QQ群，咱们当面聊！ 群7: 416465236 Java群: 6200344 Php群: 42125527 web前端群3: 249860541 安卓群: 232465453 在校生群: 187845234 </pre> </td> </tr> </table> </td></tr> <tr height="10px"><td></td></tr> <tr bgcolor="#14191e" height="120px"><td colspan="6"></td></tr> </table> </body> </html>
178
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
