HTML —— 表格
复习下关于html中的表格。
基本结构:
表格由 table 标签为父标签进行包裹,可以在 table 上添加几种属性。
border : 定义表格的边框。
cellspacing : 间距,指单元格之间的距离,类似 盒模型中的 margin。
cellpadding : 补白,指单元格内文字与边框的距离 类似盒模型中的 padding 。
其它 比如 宽高对齐方式,建议使用css进行设置。
tr 标签,表示 行。
td 标签,表示单元格。
表格一般都会设置表头,用来定义一列的信息。
表头设置 用 tr 包裹,表示一行,th 标签 定义表头
<table border="1" align="center" cellspacing="2" cellpadding="10">
<tr>
<th>性别</th>
<th>姓名</th>
<th>电话</th>
</tr>
</table>
下面,简单定义一个表格
<table border="1" align="center" cellspacing="2" cellpadding="10">
<tr>
<th>性别</th>
<th>姓名</th>
<th>电话</th>
</tr>
<tr>
<td>男</td>
<td>张三</td>
<td>130000</td>
</tr>
<tr>
<td>男</td>
<td>李四</td>
<td>131120</td>
</tr>
<tr>
<td>女</td>
<td>小红</td>
<td>4541124</td>
</tr>
</table>
我们经常需要合并单元格,来显示一些数据
比如,类似下面这样
直接上重点:
rowspan : 合并行
上图 其实 是 第二行的第三个单元格 合并了 第三行及第四行 的第三个单元格。
合并掉几个,就要在相应的行内,删除掉对应的单元格。
代码如下:
<table border="1" align="center" cellspacing="2" cellpadding="10">
<tr>
<th>学科</th>
<th>分数</th>
<th>总计</th>
</tr>
<tr>
<td>数学</td>
<td>80</td>
<td rowspan="3">123</td>
</tr>
<tr>
<td>语文</td>
<td>95</td> </tr>
<tr>
<td>英语</td>
<td>92</td> </tr>
</table>
colspan :合并单元格
效果如下:
此时,第一行的第一个单元格,合并掉了第一行的第二个单元格,同样的,既然合并了,就需要删除掉对应的单元格。
代码如下:
<table border="1" align="center" cellspacing="2" cellpadding="10">
<tr>
<td colspan="2">123</td>
<td>abc</td>
</tr>
<tr>
<td>123</td>
<td>abc</td>
<td>abc</td>
</tr>
<tr>
<td>123</td>
<td>abc</td>
<td>abc</td>
</tr>
</table>
下面,写一个具体的示例作为参考
效果如下:
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
table{
border-collapse: collapse;
width: 500px;
}
td,th{
border: 1px solid #B2C2E3;
height: 26px;
text-align: center;
}
th{
background-color: #DBE3F9;
font-size: 14px;
}
td{
font-size: 12px;
}
.noborder{
border: 0;
background-color: #ffffff;
height: 5px;
}
.h{
color: #E33F06;
}
.l{
color: #0C0C6C;
}
.tred{
color: #FF0000;
}
.datebg{
background-color: #F4F7FC;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th colspan="2">日期</th>
<th>天气现象</th>
<th>气温</th>
<th>风向</th>
<th>风力</th>
</tr>
</thead>
<tr>
<td rowspan="2" class="datebg">22日星期五</td>
<td class="datebg">白天</td>
<td>晴间多云</td>
<td class="h">高温7℃</td>
<td>无持续风向</td>
<td>微风</td>
</tr>
<tr>
<td class="datebg">夜间</td>
<td>晴</td>
<td class="l">低温4℃</td>
<td>无持续风向</td>
<td>微风</td>
</tr>
<tr>
<td class="noborder" colspan="7"></td>
</tr>
<tr>
<td rowspan="2" class="tred datebg">23日星期六</td>
<td class="datebg">白天</td>
<td>晴间多云</td>
<td class="h">高温7℃</td>
<td>无持续风向</td>
<td>微风</td>
</tr>
<tr>
<td class="datebg">夜间</td>
<td>晴</td>
<td class="l">低温4℃</td>
<td>无持续风向</td>
<td>微风</td>
</tr>
</table> </body>
</html>
以上就是本文的全部内容。
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 ...
随机推荐
- (13)C++ 多态
虚析构和纯虚析构用来解决父类指针释放子类对象的问题,此时会不调用子类的析构函数 如果子类没有堆数据,可以不使用虚析构
- python字符串比较大小
zfill函数 xs = ['] print (sorted(xs))
- PHP面试 MySQL数据库基础
MySQL数据库基础 MySQL数据类型 整数类型:TINYINT SMALLINT MEDIUMINT INT BIGINT 属性:UNSIGNED 长度:可以为整数类型指定宽度,列 ...
- Django框架(二十七)—— ContentType组件
目录 ContentType组件 一.什么是ContentType组件 二.使用ContentType 三.使用场景总结 ContentType组件 一.什么是ContentType组件 conten ...
- java遇到的问题
1.java 初始化泛型数组 public static <T> T[] toArray(java.util.List<T> src, Class<T> type) ...
- 响应式web开发的一些文章
CSS Device Adaptation:关注 W3C 建议的 CSS 设备适配标准. “在 CSS 中使用 LESS 实现更多的功能”(作者:Uche Ogbuji,developerWorks, ...
- python之求字典最值
本例子求字典最小值 首先字典分为键和值 eg: {键:值} prices = { 'ACME': 45.23, 'AAPL': 612.78, 'IBM': 205.55, 'HPQ': 37.20, ...
- TreeMap和TreeSet在排序时如何比较元素,Collections工具类中的sort()方法如何比较元素
TreeSet和TreeMap排序时比较元素要求元素对象必须实现Comparable接口 Collections的sort方法比较元素有两种方法: 元素对象实现Comparable接口 实体类Dog ...
- 小技巧-CSS 三角的做法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- LeetCode Array Easy 118. Pascal's Triangle
Description Given a non-negative integer numRows, generate the first numRows of Pascal's triangle. I ...