复习下关于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 —— 表格的更多相关文章

  1. HTML 表格<table><caption><th><tr><td><thead><tbody><tfoot><col><colgroup>

    <table>标签: 定义和用法: <table>标签定义HTML表格. 简单的HTML表格由table元素以及一个或多个tr.th或td元素组成. tr元素定义表格行,th元 ...

  2. html-3,table 表格标签 tr th td caption thead tbody tfoot 的简单使用

    <!-- table border='1' style="border-collapse:collapse;" border 表格的像素宽度 border-collapse: ...

  3. HTML表格,table,thead,tbody,tfoot,th,tr,td,的属性以及跨行,跨列

    在HTML中表格是作为一个整体来解析的,解析完才会在页面显示,如果表格很复杂很长,加载时间很长,用户体验就不好.所以这里就要用到表格结构标签,解析一部分就显示一部分,不用等表格全部加载完再显示. 表格 ...

  4. HTML——表格table标签,tr或者td

    表格定义和用法 <tr> 标签定义 HTML 表格中的行. tr 元素包含一个或多个 th 或 td 元素. HTML 与 XHTML 之间的差异 在 HTML 4.01 中,tr 元素的 ...

  5. jQuery遍历table中的tr td并获取td中的值

    jQuery遍历table中的tr td并获取td中的值 $(function(){ $("#tableId tr").find("td").each(func ...

  6. table的thead,tbody,tfoot

    为了让大表格(table)在下载的时候可以分段的显示,就是说在浏览器解析HTML时,table是作为一个整体解释的,使用tbody可以优化显示. 如果表格很长,用tbody分段,可以一部分一部分地显示 ...

  7. table样式测试总结tr td宽度分析

    题外话:一直以来习惯布局用ul,li样式调整比较方便,不会互相影响出现一些问题,but~现在公司涉及很多表格打印,都是用table写的,好多宽度高度合并啊,组合啊~~~,单元格之间互相影响,有的样式设 ...

  8. table标签修改tr,td标签的行距

    修改tr标签的行距,tbale标签的td标签间距 看如下Css文件的代码,其都没有table的tr行距产生效果 tr{ margin-top: 10px; padding: 10px; } td{ m ...

  9. thead tbody tfoot

    <!DOCTYPE html> <html lang="en"> <head> <title>Title</title> ...

  10. html5 表格标签 table tr td

      最重要的三个 <table>     表格声明标签 属性: boarder    边框粗细 style    可配合css 使用 <tr>    行标签 table row ...

随机推荐

  1. NGINX-二级域名

    先给二级域名添加到 DNS 解析再配置 nginx server { #侦听80端口 listen 80; #定义使用 www.nginx.cn访问 server_name ~^(?<subdo ...

  2. find pattern

    daniel@daniel-mint ~/msf/metasploit-framework/tools $ ruby pattern_create.rb 2000 Aa0Aa1Aa2Aa3Aa4Aa5 ...

  3. how to catch error in make error message

    make 2>&1 | grep error -C 10 -n

  4. (转)Adaboost

    基本原理 Adaboost算法基本原理就是将多个弱分类器(弱分类器一般选用单层决策树)进行合理的结合,使其成为一个强分类器. Adaboost采用迭代的思想,每次迭代只训练一个弱分类器,训练好的弱分类 ...

  5. 比较全面的CSS hack方式一览

    转载请注明来自CSDN freshlover的博客专栏<史上最全CSS Hack方式一览>   做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某 ...

  6. 分布式-技术专区-Redis分布式锁原理实现

    在很多场景中,我们为了保证数据的最终一致性,需要很多的技术方案来支持,比如分布式事务.分布式锁等.那具体什么是分布式锁,分布式锁应用在哪些业务场景.如何来实现分布式锁呢?今天来探讨分布式锁这个话题. ...

  7. buuctf zip伪加密

    平时伪加密总是依赖osx,这道题无法直接解压,所以研究一下伪加密先放两张图(图是偷的)一般在压缩源文件数据区全局方式位标记处,真加密为 09 00,伪加密为00 00,而后面将压缩源文件目录区全局方式 ...

  8. 7、服务发现&服务消费者Ribbon

    公众号: java乐园 在<服务注册&服务提供者>这一篇可能学习了这么开发一个服务提供者,在生成上服务提供者通常是部署在内网上,即是服务提供者所在的服务器是与互联网完全隔离的.这篇 ...

  9. su - 运行替换用户和组标识的shell

    SYNOPSIS(总览) su [OPTION]... [-] [USER [ARG]...] DESCRIPTION(描述) 修改有效用户标识和组标识为USER的. -, -l, --login 使 ...

  10. 文件对比工具 diff cmp patch(没弄完) pr

    diff不仅可以对比文件,而且可以对比文件夹中的文件. 解析: diff用在比对两个文件的差异,并且是以行为单位进行对比.一般用在ascii纯文本档的对比上. 例 在tmp中创建一个testpw文件夹 ...