html:表格
1.表格三标签:
(1)<table> 表格
(2)<tr> 行
(3)<td> 单元格
<table>
<tr>
<td> </td>
<tr>
<td> </td>
</tr>
</table>
3.带表头的表格
<table>
<tr>
<th>……</th> <!-表格头,内容居中、加粗显示-->
</tr>
<tr>
<td>……</td>
</tr>
</table>
4.带标题的表格
<table>
<caption>……</caption> <!-表格标题,居中显示>
<tr>
<th>……</th>
</tr>
<tr>
<td>……</td>
</tr>
</table>
5.带结构的表格
<table>
<caption>……</caption>
<thead>
<tr>
<th>表头</th>
</tr>
</thead>
<tbody>
<tr>
<td>主体</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>脚注</td>
</tr>
</tfoot>
</table>
6.表格属性
(1)width 表格宽度
(2)border 表格边框宽度
(3)cellpadding 单元格边沿和内容之间的空白
(4)cellspacing 单元格之间的空白
(5)bgcolor 背景颜色
(6)frame 外边框样式
(7)rules 内边框样式
7.跨列属性colspan
<table>
<tr>
<td colspan="2">……</td>
<td>……</td>
</tr>
<tr>
<td>……</td>
<td>……</td>
<td>……</td>
</tr>
</table>
8.跨行属性rowspan
<table>
<tr>
<td rowspan="2">……</td>
<td>……</td>
<td>……</td>
</tr>
<tr>
<td>……</td>
<td>……</td>
</tr>
</table>
9.表格布局
(1)尽量少的使用表格嵌套
(2)尽量少的使用表格跨行跨列
(3)说明:使用表格进行网页结构布局一般不设置border
html:表格的更多相关文章
- HTML 表格<table><caption><th><tr><td><thead><tbody><tfoot><col><colgroup>
<table>标签: 定义和用法: <table>标签定义HTML表格. 简单的HTML表格由table元素以及一个或多个tr.th或td元素组成. tr元素定义表格行,th元 ...
- html-3,table 表格标签 tr th td caption thead tbody tfoot 的简单使用
<!-- table border='1' style="border-collapse:collapse;" border 表格的像素宽度 border-collapse: ...
- HTML表格,table,thead,tbody,tfoot,th,tr,td,的属性以及跨行,跨列
在HTML中表格是作为一个整体来解析的,解析完才会在页面显示,如果表格很复杂很长,加载时间很长,用户体验就不好.所以这里就要用到表格结构标签,解析一部分就显示一部分,不用等表格全部加载完再显示. 表格 ...
- HTML——表格table标签,tr或者td
表格定义和用法 <tr> 标签定义 HTML 表格中的行. tr 元素包含一个或多个 th 或 td 元素. HTML 与 XHTML 之间的差异 在 HTML 4.01 中,tr 元素的 ...
- jQuery遍历table中的tr td并获取td中的值
jQuery遍历table中的tr td并获取td中的值 $(function(){ $("#tableId tr").find("td").each(func ...
- table的thead,tbody,tfoot
为了让大表格(table)在下载的时候可以分段的显示,就是说在浏览器解析HTML时,table是作为一个整体解释的,使用tbody可以优化显示. 如果表格很长,用tbody分段,可以一部分一部分地显示 ...
- table样式测试总结tr td宽度分析
题外话:一直以来习惯布局用ul,li样式调整比较方便,不会互相影响出现一些问题,but~现在公司涉及很多表格打印,都是用table写的,好多宽度高度合并啊,组合啊~~~,单元格之间互相影响,有的样式设 ...
- table标签修改tr,td标签的行距
修改tr标签的行距,tbale标签的td标签间距 看如下Css文件的代码,其都没有table的tr行距产生效果 tr{ margin-top: 10px; padding: 10px; } td{ m ...
- thead tbody tfoot
<!DOCTYPE html> <html lang="en"> <head> <title>Title</title> ...
- html5 表格标签 table tr td
最重要的三个 <table> 表格声明标签 属性: boarder 边框粗细 style 可配合css 使用 <tr> 行标签 table row ...
随机推荐
- java面试准备基础篇
1.Java中常用关键字和用途 synchronized: 加锁 transient 不参与序列化和反序列化 volatile 保证其他线程可见性,不保证原子性,禁止指令重排 2.hashCode() ...
- 使用moment获取本周、前n周、后n周开始结束日期以及动态计算周数
原文地址 https://blog.csdn.net/qq_43432158/article/details/124200343 项目中有一个需求:需要根据学期时间动态的计算出该学期有多少周 通过上网 ...
- debian/ubuntu下安装nodejs npm
举例:在 /home 目录下 wget https://nodejs.org/dist/v16.17.1/node-v16.17.1-linux-x64.tar.xz nodejs官网下载地址,目前最 ...
- win10系统下mysql安装
1.官网下载压缩包 2.添加环境变量到PATH 3.在bin的同级目录下,新增my.ini,内容如下(严重注意,是斜杠,千万别写成反斜杠!!!): [mysqld] basedir = D://sof ...
- git 忽略文件与如何忽略已经提交的文件或文件夹
git 忽略文件与如何忽略已经提交的文件或文件夹 使用 git提交代码的时候可能会遇到想要忽略的文件夹出现在提交列表中的情况 1,目录中右键选择git bash Here 然后输入touch .g ...
- 在Vue中实现app拍照-选取本地图库-图片上传成功后预览
基于Vue和uni-app实现手机app的功能实现和打包.拍照功能和选取本地图片使用的是HTML5的API 实现. 我为测试这个功能使用node写了个本地服务器,对于手机调试,可以通过连接同一个无线网 ...
- ctfshow web入门41
这个题过滤了$.+.-.^.~使得异或自增和取反构造字符都无法使用,同时甚至过滤了字母和数字. 但是特意留了个或运算符|. 由此我们可以尝试从ascii为0-255的字符中,找到用或运算能得到我们可用 ...
- Operator包的应用
# -*-coding:utf-8-*- import operator print(operator.add(1,1)) # 加 print(operator.sub(2,1)) #减 ...
- lui - pager - 分页
pager - 分页 demo lui demo <template> <div class="app-container"> <h3>el-p ...
- C/C++:printf 函数格式化输出,用法详细记录
printf ( print format )函数是接触C/C++之后接触的第一个函数,它的功能除了输出hello world外,更重要的是进行格式化输出,比如输出整数的%d,输出小数的%f,%lf ...