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

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

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


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


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


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

目录
相关文章
|
3月前
|
UED
Qt侧边栏的动态展示:隐藏与呈现技术详解
在现代用户界面设计中,侧边栏(Sidebar)是一个常见的组件,它为用户提供了便捷的导航和操作入口。在Qt框架中,实现侧边栏的隐藏与呈现不仅能够提升应用的美观度,还能增强用户体验。本文将详细介绍如何在Qt中实现侧边栏的动态隐藏与呈现,包括技术要点和代码实现。
247 0
|
6月前
|
SQL 开发框架 前端开发
在Winform系统开发中,对表格列表中的内容进行分组展示
在Winform系统开发中,对表格列表中的内容进行分组展示
|
7月前
|
JavaScript 数据库
文本,在线浏览PDF,一个最简单的文档标准样式,文档预览非常简单的样式,文档管理样式设计,标准,好的设计
文本,在线浏览PDF,一个最简单的文档标准样式,文档预览非常简单的样式,文档管理样式设计,标准,好的设计
|
9月前
|
前端开发
HTML图片音频视频标签、超链接标签、列表标签和布局标签示例
HTML图片音频视频标签、超链接标签、列表标签和布局标签示例
110 0
table标签经典案例,综合使用行合并与列合并实现html网页表格【2020网页综合笔记03】
table标签经典案例,综合使用行合并与列合并实现html网页表格【2020网页综合笔记03】
315 0
table标签经典案例,综合使用行合并与列合并实现html网页表格【2020网页综合笔记03】
|
前端开发 程序员
【网页前端】HTML表格、图片、列表、超链接以及综合案例练习
【网页前端】HTML表格、图片、列表、超链接以及综合案例练习
457 0
【网页前端】HTML表格、图片、列表、超链接以及综合案例练习
|
JavaScript 前端开发
通过Javascript实现把数组里的内容以表格方式呈现到页面从
通过Javascript实现把数组里的内容以表格方式呈现到页面从