HTML5-表格table
很多人说，表格已经过时了，当然比起很流行的div布局相比，table的使用频率确实很少，但是在一些特定的场景下，用表格来进行装填，是很方便的，会极大减少我们的代码量
table标签和我们div，p,h等标签一样，自定义是看不见边框的
如果我们想要看见它可以利用css样式来给它定义
我们来看一看我们的表格吧
语法
<table>
<tr>
<td>姓名</td>
<td>联系方式</td>
<td>地址</td>
</tr>
<tr>
<td>张三</td>
<td>123456788</td>
<td>地球</td>
</tr>
<tr>
<td>小明</td>
<td>123456788</td>
<td>地球</td>
</tr>
<tr>
<td>小红</td>
<td>123456788</td>
<td>地球</td>
</tr>
</table>
效果图
当然，我们很多时候需要取消其中的一些线那就需要两个辅助的代码来实现这些效果啦
colspan属性跨列，实现左右的列表格的合并
rowspan属性跨行，实现上下格的合并
更改引号里面的数字并删除或添加对应的td就可以实现更多行和列的跨越啦
我们来看看代码和效果吧
代码
<table>
<tr>
<td colspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
效果图
可以把td换成th，以实现一些特殊的实现：th使用的单元格自带文字加粗和居中
边框效果是通过css定义来实现的，如果不加边框只会存在空间而不会看见，不能说没有实现效果哦，在后面会有css的基础讲解
为了实现表格的不同部分的样式管理，在HTML中还引入了4个标签可以用来封装表格的不同部分
caption：用于封装标题
thead：用于封装表头
tbody：用于封装表格主体
tfoot：表格的底部
<table>
<caption>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</caption>
<thead>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
HTML5-表格table相关推荐
- html5表格两列合并_详解html中表格table的行列合并问题解决
这篇文章主要介绍了详解html中表格table的行列合并问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 因为要做个网站, ...
- 表格table标签的属性及使用方式
表格 table 创建表格 在HTML网页中,要想创建表格,就需要使用表格相关的标签.创建表格的基本语法格式如下: <table><tr><td>单元格内的文字&l ...
- HTML5 表格标签
表格标签 table:表格 属性: cellspacing:单元格间距 align:对齐方式 border:边框 caption:表名 thead:表头 tbody:表主体 tfoot:表格的页脚 t ...
- html表格第一列长度,表格table列宽度控制colgroup
标签用于对表格中的列进行组合,以便对其进行格式化. 通过使用 标签,可以向整个列应用样式,而不需要重复为每个单元格或每一行设置样式. 注释:只能在 提示:如果想对 中的某列定义不同的属性,请在 标签内 ...
- html5表格源码,HTML5表格制作源代码.doc
HTML5表格制作源代码.doc (4页) 本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦! 3.9 积分 HTML5表格制作源代码 (姬岚洋)代码:th{fo ...
- html5中如何消除表格间的间隔,HTML5表格间距问题
我试图让所有这些图片排成一列.由于某些原因,它在单元格的底部添加了额外的空间.我尝试了所有解决这个间距问题的不同解决方案.HTML5表格间距问题 下面就来看看我的HTML5代码以及: table{ b ...
- HTML5表格和表单
表格: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8& ...
- HTML5 表格元素
HTML5 表格元素 要点: 表格元素汇总 表格元素解析 表格就是使用网格的形式来显示二维数据的. 表格元素总汇 表格至少包含三个元素:<table>.<tr>.< ...
- latex如何清除表格table的浮动位置（表格自动上移）
一开始,我发现我的表格自动上移,如下: \documentclass{article}\begin{document} hello \begin{table}\centering\begin{tabu ...
- 表格Table宽度设置无效的解决方法
表格Table宽度设置无效的解决方法 参考文章: (1)表格Table宽度设置无效的解决方法 (2)https://www.cnblogs.com/sherryweb/p/11659848.html ...
最新文章
- Hackthebox--------irked
- Activiti 规则任务（businessRuleTask）
- java 多线程 1 “常用的实现多线程的2种方式”：Thread 和 Runnable
- 模拟浏览器自动化测试工具Selenium之六设置代理篇
- 华为手机助手解析包时出现问题_iOS12.0-12.1.2设备降级/平刷iOS12.0-12.1.2教程(付问题解决)...
- K Co-prime Permutation 构造，gcd，互质（2020.12.南京）
- align_center在JAVA_margin:0 auto与body{text-align:center;}实现元素居中的区别
- 【JS复习笔记】00 序
- 趣学java,编程趣学习app
- ONVIF协议实现1:Server端Discovery的实现详解
- apt编译java_自动生成代码工具--APT
- Bresenham直线算法与画圆算法
- 阿里3大营销模型：AIPL、FAST、GROW
- java开发面试流程
- PPPOE拨号之一：Cisco 路由器adsl拨号配置
- 关于Olly Dbg的使用报告
- android系统目录和作用是什么意思,安卓Android手机系统内文件夹目录解释
- 服务器端的相对地址与绝对地址
- 家庭NAS服务器(3)VM测试-固态缓存盘加速机械盘
- 电脑和手机连接同一个无线，电脑不能上网，手机能上网？