那些酷炫的网页你也可以做到——第五篇(表格标签)

简介: 那些酷炫的网页你也可以做到——第五篇(表格标签)

表格标签

<table> :封装表格的范围
<caption>标题标签</caption><tr>  :行标签。写在table标签内部,有几行写几个<tr></tr><td>文本内容</td> :单元格标签。写在tr标签内部
<th>文本内容</th> :单元格标签。写在tr标签内部
</tr></table>属性:
    border  :表格的边框,表示最外边框的宽度
    width :表格的宽度
    height  :表格的高度
    ceillpadding  :单元格内文字距离表格线的长度,单位像素px
<tr>  :表格的行
  align :单元中文字的对齐方式。值有:left、center、right
<td>  :单元格           <th>  :单元格
th和td的区别:
  th封装的文本内容默认是 加粗和居中的。
    一般作为表格的表头。
        td重要的属性:合并单元格。


重要的一点:合并单元格

表格单元格合并分为:
    rowspan:行合并。合并几个单元格就是数字几。
    colspan:列合并。合并几个单元格就是数字几。
实例1:
<tableborder="1"cellpadding="10"><tr><th>序号</th><th>姓名</th><th>分数</th></tr><tr><td>1</td><td>张三</td><td>95</td></tr><tr><td>2</td><td>李四</td><td>89</td></tr></table>实例2:
<h4>商品信息</h4><tableborder="1"cellpadding="10"><tr><tdrowspan="2">电器商城</td><td>商品信息:冰箱</td><td>商品价格:500元</td></tr><tr><td>商品信息:洗衣机</td><td>商品价格:600元</td></tr></table>

image.png

image.png

看完这篇文章之后有何感想呢,是不是以前自己觉得很厉害的网页,现在自己做都是简简单单,哈哈哈,那就对了,跟着继续学习,以后还有跟好玩的,加油继续学习不断完善自己的网页。



目录
相关文章
|
5月前
|
人工智能 安全 语音技术
幼师必备AI教学神器:AI大模型赋能幼儿园课堂
输入幼儿年龄、性别、个案情况概述等关键内容,一键快速生成五大领域评价、幼儿发展评价、幼儿区域活动评价、幼儿游戏评价等评价内容,助力教师高效科学开展幼儿评价工作。
|
数据格式
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
本文介绍了在ElementUI和ElementPlus中使用`el-table`组件实现合并行功能的技巧,包括多列合并和单列合并的方法,并提供了相应的示例代码和运行效果。
9971 1
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
|
JavaScript
Vue2级联选择(Cascader)
这是一个基于 Vue 3 的级联选择组件,支持多种自定义属性,如数据源、选中项、文本字段等。提供了丰富的配置项,如层级间隙、宽度、高度、禁用状态和占位符等,便于灵活使用。组件通过监听选择变化并触发回调事件,实现了动态更新与交互。
700 1
Vue2级联选择(Cascader)
|
文字识别 算法 计算机视觉
PaddleOCR学习笔记 01-PaddleOCR简介
《PaddleOCR学习笔记 01-PaddleOCR简介》涵盖了PaddleOCR的基础介绍、OCR技术概览、PaddleOCR的开源状态及主要算法,包括文字检测与识别算法、百度自研的SAST、SRN和End2End-PSL等,以及9m超轻量模型的介绍。适合初学者入门学习。
759 0
PaddleOCR学习笔记 01-PaddleOCR简介
|
安全 网络虚拟化 数据安全/隐私保护
Windows 10系统自带VPN客户端配置连接PPTP VPN服务器
Windows 10系统自带VPN客户端配置连接PPTP VPN服务器
6853 1
|
人工智能 自然语言处理 开发者
Claude 3系列包含Haiku(低)、Sonnet(中)和Opus(高)三个模型
Claude 3系列包含Haiku(低)、Sonnet(中)和Opus(高)三个模型
1059 1
|
Java 数据库连接 数据库
SQLite三种JDBC驱动的区别
在DBeaver中看到SQLite有三种JDBC驱动,查了它们官方网站的相关解释,发现它们还是挺不一样的。   SQLite Wrapper by Christian http://www.ch-werner.de/javasqlite/ 这个驱动其实是在本地C/C++的SQLite上用JDBC实现进行了包装。
1686 0
|
Linux 程序员 Windows
华为面试心得
华为面试心得
169 0
|
存储
openstack之云主机备份还原
openstack之云主机备份还原
331 0