欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  web前端

【HTML】表格标记_html/css_WEB-ITnose

程序员文章站 2022-04-25 11:49:12
...
设计网页时经常会用到表格来组织页面信息，它能将网页划分成任意多个矩形区域，每个区域可包含导航、文字、图像、动画等信息，设计者可将任意的网页元素放入其中。

1. 表格的定义：

1）在需要使用表格的地方插入成对的

标记，就可以完成表格的插入。定义表格常用的标记有

标记的属性来设置表格中某一行的属性，用

标签

说明

表格标记，用于插入表格

行标记，用于插入行

列标记，用于插入列

表头标记，用于设置表头信息

表格标题，设置标题

实例：

表格的定义
计算机学习
CS 数据库 BS
软件工程 SQL Server html
设计模式 mySql JavaScript

效果：

2）划分结构表格

划分结构表格是指将一个表格分成三个部分，分别使用三个标记

标签

说明

定义一组表头行

为表格添加一个标注

定义表格的主体部分

2. 表格属性

在网页的设计中常常需要对网页中的表格

做一些格式上的设置，这些设置是通过对表格标记属性的设置完成的。

属性名称

说明

width

表格的宽度

border

边框粗细

frame（8种属性值）

设置表格的边框样式

属性值

说明

void

不显示边框

border

显示上下左右边框

above

显示上边框

below

显示下边框

hsides

显示上下边框

lhs

显示左边框

rhs

显示右边框

vsides

显示左右边框

rules（5种属性值）

设置表格内部边框的属性

属性值

说明

all

显示所有内部边框

none

不显示内部边框

groups

显示介于行列边框

cols

仅显示列边框

rows

仅显示行边框

实例：

表格的属性
计算机学习
CS 数据库 BS
设计模式 mySql JavaScript
软件工程 SQL Server html

效果：

3.表格行与单元格的属性

在表格中，通过

的属性设置表格单元格的属性。

属性名称

说明

align（3种属性值）

设置行内容的水平对齐方式

属性值

说明

left

左对齐

right

右对齐

center

居中对齐

valign（4种属性值）

设置行内容的垂直对齐方式

属性值

说明

top

顶端对齐

middle

居中对齐

bottom

底部对齐

baseline

基线

rowspan

设置跨行，即单元格的纵向合并

colspan

设置跨列，即单元格的横向合并

实例：

表格行与单元格的属性
计算机学习
CS 数据库 BS
设计模式 mySql JavaScript
SQL Server html

效果：

4.多个表格的使用

表格可以嵌套使用以表示层次关系，在

标记插入表格后，可在间再插入
表示在单元格中插入表格；也可以多个同级表格同时使用，此时有两个常用的属性可方便表格的排版，美化布局。

cellspacing

设置单元格的间距

cellpadding

设置单元格中内容与边框之间的间距

小结：

表格是一种很简单的页面布局工具，它的应用使得网页简洁直观，且更便于阅读。熟练掌握主要的表格标记的相关属性，可以提高工作效率

【HTML】表格标记_html/css_WEB-ITnose

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

相关文章

相关视频

网友评论

文明上网理性发言，请遵守 新闻评论服务协议

我要评论
  • 【HTML】表格标记_html/css_WEB-ITnose

    • 专题推荐

    作者信息
    【HTML】表格标记_html/css_WEB-ITnose

    认证0级讲师

    发布技术文章
    • 最新文章
    • 热门排行
    推荐视频教程
  • 【HTML】表格标记_html/css_WEB-ITnosejavascript初级视频教程
  • 【HTML】表格标记_html/css_WEB-ITnosejquery 基础视频教程
    • 视频教程分类

    ：公益在线php培训，帮助PHP学习者快速成长！

    Copyright 2014-2021 https://www.php.cn/ All Rights Reserved | 苏ICP备2020058653号-1【HTML】表格标记_html/css_WEB-ITnose关于我们免责申明赞助与捐赠广告合作

    【HTML】表格标记_html/css_WEB-ITnose   【HTML】表格标记_html/css_WEB-ITnose
    相关标签： 【HTML】表格标记

    上一篇： JavaScript构建自己的对象示例

    下一篇： java实现的AES秘钥生成算法示例

    推荐阅读