HTML中的表格标签
表格是网页制作中使用最多的工具之一,在制作网页时,使用表格可以更清晰地排列数据。但是在实际制作过程中,表格更多用在网页布局的定位上。很多网页都是以表格布局的。这是因为表格在文本和图像的位置控制方面都有很强的功能。
表格的基本构成
表格由行、列、和单元格3部分组成,一般通过3个标记来创建,分别是表格标记<table>
、行标记<tr>
、和单元格标记<td>
。表格的各种属性都要在表格的开始标记<table>
和表格的结束标记</table>
之间才有效。
创建表格的四个元素:
table、tr、th、td
<tabel>...</table>
:整个表格以<table>
标记开始、</table>
标记结束。
<tr>...</tr>
:表格的一行,那么以为着有几对<tr></td>
,表格就有几行。
<td>...</td>
:表格的一个单元格,一行中包含几对<td></td>
,说明一行中就有几列。
<th></th>
:表格的头部的一个单元格,表格表头。
表格中列的个数,取决于一行中数据单元格的个数
<table>
<tr>
<th>动物名称</th>
<th>物种</th>
<th>生活习性</th>
<th>食性</th>
</tr>
<tr>
<td>老虎</td>
<td>猫科动物</td>
<td>单独活动</td>
<td>肉食</td>
</tr>
<tr>
<td>狮子</td>
<td>猫科动物</td>
<td>集群</td>
<td>肉食</td>
</tr>
<tr>
<td>大象</td>
<td>哺乳纲动物</td>
<td>群居</td>
<td>草食</td>
</tr>
</table>
内容仅做实例参考,不保证其真实性
表格属性
表格标题caption
一个表格只能有一个标题
在上述代码的<table></table>
间添加<caption>动物世界</caption>
表格宽度与高度
表格宽度为width
,高度为height
语法为<table width="500" height="130">
以下功能实现与此类似,将不进行示例
表格表头对齐方式align
语法为<table align="对齐方式">
在对齐方式中填入相应的属性值:
left:左对齐
center:居中
right:右对齐
表格边框宽度border
border值不设置时或设置为0时,显示为无边框
语法为<table border="5">
, 5为边框宽度
表格边框颜色bordercolor
语法为<table bordercolor="#66ccff">
, 各颜色对应的具体编码可从网上查找
表格内框宽度cellspacing
表格内框宽度属性用于设置表格内部每个单元格之间的间距
语法为<table cellspacing="内框宽度值">
表内文字与边框边距cellpadding
在默认情况下,单元格里的内容会紧贴着表格的边框,这样看上去会非常拥挤,可用词语法设置其间距离
语法为<table cellspadding="文字与边框距离值">
表格背景颜色bgcolor
语法为<table bgcolor="7fffaa">
表格背景图像background
语法为<table background="图片链接">
表格表首标记thead
表首样式的开始标记是<thead>
,结束标记是</thead>
。它用于定义表格最上端表首的样式,可以设置背景颜色、文字对齐方式、文字垂直方式等。
表主体标记tbody
表主体标记与表首标记功能类似,表主体样式用于统一设计表主体部分的样式,标记为<tbody>
表格表尾标记tfoot
<tfoot>
用于定义表尾样式
行属性
表格行属性设置
表格中行属性的设置与表格的属性设置类似,只需要将相关的属性值添加在行标签中即可,如<tr width="5" height="3" align="content" bordercolor="#66ccff" cellspacing="3">
多个参数值用空格隔开
表格行对齐方式
表格中行对齐方式除了上面在表头对齐方式中介绍的水平对齐方式align
,还有垂直对齐方式valign
语法为<tr valign="对齐方式">
可设置的值有三个:top
、middle
、bottom
valign
也可用于单元格属性
单元格属性
单元格大小
语法为<td width="8" height="5">
水平跨度colspan
在设计表格时,有时需要将两个或多个相邻单元格合成一个单元格
语法为<td colspan="跨度的列数">
垂直跨度rowspan
单元格除了可以在水平方向上跨列,还可以在垂直方向上跨行
语法为<td rowspan="跨度的行数">
给出一段实例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Demo</title>
</head>
<body>
<table width="500" height="300" align="content" border="5" bordercolor="#66ccff" cellspacing="3" bgcolor="7fffaa">
<caption>动物世界</caption>
<tr>
<th>动物名称</th>
<th>物种</th>
<th>生活习性</th>
<th>食性</th>
</tr>
<tr align="center">
<td>老虎</td>
<td>猫科动物</td>
<td>单独活动</td>
<td rowspan="2">肉食</td>
</tr>
<tr align="center">
<td>狮子</td>
<td>猫科动物</td>
<td>集群</td>
</tr>
<tr align="center">
<td>大象</td>
<td>哺乳纲动物</td>
<td>群居</td>
<td>草食</td>
</tr>
</table>
</body>
</html>
HTML中的表格标签的更多相关文章
- 详解HTML中的表格标签
详细代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" ...
- H5 表格标签的其它标签
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- H5 表格标签基本使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- HTML常用标签与表格标签
超链接标签: <a href="超链接地址" target="_blank">超链接的文字</a> _blank或new是在新网页中打开 ...
- 9月6日表格标签(table、行、列、表头)(补)
一.<table> <table>代表表格标签. <table></table> 1.width 表示表格宽度,宽度表达方式有像素和百分比两种.网 ...
- 关于html中table表格tr,td的高度和宽度
关于html中table表格tr,td的高度和宽度 关于html中table表格tr,td的高度和宽度 做网页的时候经常会遇到各种各样的问题,经常遇到的一个就是会碰到表格宽度对不齐的问题.首先,来分析 ...
- HTML表格标签
table标签的用途: 在表格中放图片,或用于布局(已经淘汰掉了),存放数据 table制作过程: 1.先分析表格有多少行 2.分析有多少列 3.做好表格的基本之后再添加表格需要的一些属性 table ...
- html系列教程--span style 及表格标签 title video
<span> 标签:非块状元素,用于文本描述 <style> 标签:内联样式表标签定义样式信息,必须写明type类型为text/css,建议写在head中,不是必须 demo: ...
- HTML表格标签的使用-<table>
<html> <head> <title> 表格标签 </title> <!-- 标签名:table 定义一个表格 子标签:<caption ...
随机推荐
- LIGHTX-CMS —— 基于 Node.js,Express.js 以及 SQLite 3 搭建的个人博客系统
概述 LIGHTX-CMS 是我基于 Node.js,Express.js 以及 SQLite 3 搭建的个人博客发布系统. 项目本身可以拿来部署个人博客网站,同时我认为其也适合用以新手学习 Node ...
- 如何使用Swagger为.NET Core 3.0应用添加JWT授权说明文档
简介 本教程采用WHY-WHAT-HOW黄金圈思维模式编写,黄金圈法则强调的是从WHY为什么学,到WHAT学到什么,再到HOW如何学.从模糊到清晰的学习模式.大家的时间都很宝贵,我们做事前先想清楚为什 ...
- KAFKA集群搭建(自带zookeeper)
1. KAFKA下载地址:http://kafka.apache.org/downloads KAFKA-快速上手-官方网站:http://kafka.apache.org/quickstart 2. ...
- django-Views之使用视图渲染模板(五)
render(<request>,<template_name>,context=-None,content_type=None,status=None,using=None) ...
- 使用 Nginx 搭建静态资源 web 服务器
在搭建网站的时候,往往会加载很多的图片,如果都从 Tomcat 服务器来获取静态资源,这样会增加服务器的负载,使得服务器运行 速度非常慢,这时可以使用 Nginx 服务器来加载这些静态资源,这样就可以 ...
- FBV与CBV
一.FBV FBV(function base views) 就是在视图里使用函数处理请求,也是我们最开始接触和使用的方式. urls.py urlpatterns = [ path('login/' ...
- No such application config! Please add dubbo:application
SpringBoot运行找不到application.properties配置文件 运行springBoot项目启动报错:java.lang.IllegalStateException: No suc ...
- [考试反思]1009csp-s模拟测试66:依旧
依旧是好一场烂一场. 依旧是那么菜. 依旧是难止颓废. 依旧是在此方仰望,幻想? 上面这段中二的东西是为了防止Parisb说我的标题与内容无关而diss我莫名其妙115的语文. 但是菜是的确是菜... ...
- 还看不懂同事的代码?Lambda 表达式、函数接口了解一下
当前时间:2019年 11月 11日,距离 JDK 14 发布时间(2020年3月17日)还有多少天? // 距离JDK 14 发布还有多少天? LocalDate jdk14 = LocalDate ...
- CDQ分治学习笔记(三维偏序题解)
首先肯定是要膜拜CDQ大佬的. 题目背景 这是一道模板题 可以使用bitset,CDQ分治,K-DTree等方式解决. 题目描述 有 nn 个元素,第 ii 个元素有 a_iai.b_ibi.c_ ...