标签之美五——网页表格的设计(二)

简介: 标签之美五——网页表格的设计


4、设置frame="hsides"则只显示上下外边框


<body>

<table cellpadding="50" border="5" frame="hsides"><tr>

<td>第一列</td><td>第二列</td>

</tr></table>

</body>

image.png


5、设置frame="vsides"则只显示左右外边框


6、单独显示边框的frame值分别为:


上:above


下:below


左:lhs


右:rhs


7、设置表格对齐模式:


水平对齐模式:align


表格的align属性可以设置对齐模式,center,left,right分别对应居中,左对齐,右对齐。


垂直对齐模式:valign


和水平对齐模式相似,这个属性的值为:middle,top,bottom对应了中间对齐,上对齐和下对齐。


四、表格行和列的操作


1、行的合并:rowspan


<body>

<table cellpadding="50" border="5" frame="hsides">

<tr>

<td rowspan="2">第一行</td><td>第一行</td>

</tr>

<tr>

<td>第二行</td>

</tr>

</table>

</body>

image.png


2、列的合并colspan


<body>

<table cellpadding="50" border="5" frame="hsides">

<tr>

<td colspan="2">第一列</td>

</tr>

<tr>

<td>第一列</td><td>第二列</td>

</tr>

</table>

</body>

image.png


3、表格的标题标签<caption></caption>


<body>

<table cellpadding="50" border="5" frame="hsides" >

<caption>标题</caption>

<tr>

<td colspan="2">第一列</td>

</tr>

<tr>

<td>第一列</td><td>第二列</td>

</tr>

</table>

</body>

image.png

目录
相关文章
|
3月前
|
前端开发
探索HTML表格的奥秘:学会使用 <table>标签创建精美表格
探索HTML表格的奥秘:学会使用 <table>标签创建精美表格
|
4月前
|
JavaScript 数据库
文本,在线浏览PDF,一个最简单的文档标准样式,文档预览非常简单的样式,文档管理样式设计,标准,好的设计
文本,在线浏览PDF,一个最简单的文档标准样式,文档预览非常简单的样式,文档管理样式设计,标准,好的设计
|
4月前
测试语雀图片嵌入表格(不用通过)
测试语雀图片嵌入表格(不用通过)
|
6月前
|
前端开发
HTML图片音频视频标签、超链接标签、列表标签和布局标签示例
HTML图片音频视频标签、超链接标签、列表标签和布局标签示例
80 0
|
前端开发 定位技术 容器
HTML之图像,表格,列表,区块(笔记小结)
HTML之图像,表格,列表,区块(笔记小结)
126 0
HTML之图像,表格,列表,区块(笔记小结)
table标签经典案例,综合使用行合并与列合并实现html网页表格【2020网页综合笔记03】
table标签经典案例,综合使用行合并与列合并实现html网页表格【2020网页综合笔记03】
289 0
table标签经典案例,综合使用行合并与列合并实现html网页表格【2020网页综合笔记03】
|
前端开发 开发者
首页-组合样式 |学习笔记
快速学习 首页-组合样式
105 0
首页-组合样式 |学习笔记
|
数据安全/隐私保护
网页中的表格和表单
本章将会学习网页中的表格和表单
103 0
网页中的表格和表单
|
前端开发 程序员
【网页前端】HTML表格、图片、列表、超链接以及综合案例练习
【网页前端】HTML表格、图片、列表、超链接以及综合案例练习
415 0
【网页前端】HTML表格、图片、列表、超链接以及综合案例练习