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

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

标签之美——网页表格的使用


通过表格,可以使网页排版更加清晰,形式更加简洁漂亮。


一、表格布局中三个重要的标签


1、<table></table>:表格的开始和结束标签,行列的布局都在<table>标签内。


2、<tr></tr>行标签的开始和结束


3、<tb></tb>列标签的开始和结束


行标签在列标签的外层,不能单独使用,其中必须至少有一列。示例如下:


<body>

<table border="1"><!--为了便于观察,设置一个边框-->

<tr>

<td>表格的内容</td>

</tr>

</table>

</body>

效果如下:

image.png



二、单元格设置的相关标签


1、单元格表头<th></th>


这个标签用来设置表格的表头,作用和列标签相似,只是字体是加黑的。


<body>

<table border="1">

<tr>

<th>1</th><th>2</th>

</tr>

</table>

</body>


image.png

2、表格宽度属性和高度属性width,height


这两个属性可以设置在<table>标签里,也可以设置在<tr>和<tb>中,作用域会不同。


<body>

<table border="1">

<tr>

<th width="200">1</th><th width="100">2</th>

</tr>

</table>

</body>

image.png


3、设置表格背景图片background


这个属性和尺寸属性用法一样,写在相应的标签里,就是相应的背景图案,设置的是图片的路径。


4、设置表格行列间距cellspacing


<body>

<table border="1" cellspacing="20">

<tr>

<th width="200">1</th><th width="100">2</th>

</tr>

</table>

</body>

image.png


5、设置单元格内容偏移量 cellpadding


<body>

<table cellpadding="50" border="2"><tr>

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

</tr></table>

</body>

image.png


三、表格的边框属性和对齐模式


灵活的应用边框,可以使表格看起来更加整洁有序。


1、边框宽度属性border


2、边框的颜色属性bordercolor


3、不显示外边框frame="void"


<body>

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

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

</tr></table>

</body>


image.png

目录
相关文章
|
4月前
|
前端开发
HTML图片音频视频标签、超链接标签、列表标签和布局标签示例
HTML图片音频视频标签、超链接标签、列表标签和布局标签示例
47 0
|
8月前
表格标签
表格标签
22 0
table标签经典案例,综合使用行合并与列合并实现html网页表格【2020网页综合笔记03】
table标签经典案例,综合使用行合并与列合并实现html网页表格【2020网页综合笔记03】
235 0
table标签经典案例,综合使用行合并与列合并实现html网页表格【2020网页综合笔记03】
|
数据安全/隐私保护
网页中的表格和表单
本章将会学习网页中的表格和表单
79 0
网页中的表格和表单
|
前端开发 程序员
【网页前端】HTML表格、图片、列表、超链接以及综合案例练习
【网页前端】HTML表格、图片、列表、超链接以及综合案例练习
331 0
【网页前端】HTML表格、图片、列表、超链接以及综合案例练习
|
移动开发 前端开发 HTML5
web前端学习(八)——HTML5中表格、边框的相关标签设置
web前端学习(八)——HTML5中表格、边框的相关标签设置
web前端学习(八)——HTML5中表格、边框的相关标签设置
html+css实战29-表格-结构标签
html+css实战29-表格-结构标签
79 0
html+css实战29-表格-结构标签
|
Web App开发 缓存 网络协议
网页页面下各种标签的含义
1、charset: 2、X-UA-Compatible: 3、canonical : 4、dns-prefetch: 5、keywords 6、viewport 7、description
137 0
那些酷炫的网页你也可以做到——第五篇(表格标签)
那些酷炫的网页你也可以做到——第五篇(表格标签)
123 0
那些酷炫的网页你也可以做到——第五篇(表格标签)