h5标签基础 table表格标签
一、表格的定义:用于有规范的显示数据。
二、基本组成:
行<tr>/列<td>/表头<caption>/表标题<th>
eg:
<table>
<caption><h1>学生信息表</h1></caption> <!---表头--->
<tr> <!----行-->
<th>姓名</th>
<th>年龄</th> <!----标题-->
</tr>
<tr> <!----行-->
<td>张大勇</td> <!----列-->
<td>22岁</td> <!----列-->
</tr>
</table>
三、table包含的属性
宽:width 高:hight 背景色:bgcorlor
单元格与单元格之间的距离:cellspacing=数值,默认是2可设置
指单元格里的内容占据的地方 cellpadding=数值 可设置
边框线:border=数值
eg:
细线表格的制作
分析:table标签有背景色(bgcolor)属性,tr也有,而细线可以通过单元格与单元格之间的距离设置后,给用户体现为细线,从而不使用border这个属性
代码:
<table cellspacing="3" bgcolor="green" width="500" height="200">
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
<td></td>
</tr><tr bgcolor="white">
<td></td>
<td></td>
<td></td>
<td></td>
</tr><tr bgcolor="white">
<td></td>
<td></td>
<td></td>
<td></td>
</tr><tr bgcolor="white">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
四、横向合并、纵向合并单元格
横向:colspan="数值"
纵向合并:rowspan="数值"
eg:制作一个课程表
代码:
<table bgcolor="green" cellspacing="2" width="600" height="300" >
<caption><h1>课程表</h1></caption> <!---表头-------->
<tr bgcolor="white"><!----行-->
<th colspan="2"></th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
<tr bgcolor="white"><!----行-->
<td >上午</td>
<td>1</td>
<td>数学</td>
<td>语文</td>
<td>英语</td>
<td>物理</td>
<td>历史</td>
</tr>
<tr bgcolor="white"><!----行-->
<td >下午</td>
<td>2</td>
<td>数学</td>
<td>语文</td>
<td>英语</td>
<td>物理</td>
<td>历史</td>
</tr>
</table>
h5标签基础 table表格标签的更多相关文章
- html-3,table 表格标签 tr th td caption thead tbody tfoot 的简单使用
<!-- table border='1' style="border-collapse:collapse;" border 表格的像素宽度 border-collapse: ...
- [05]HTML基础之表格标签
1. <table>标签 表格容器,尽量避免用属性书写样式,而是用CSS来表达 border: 数字 //表格边框宽度 2. <caption>标签 表格的标题,一般出现在表格 ...
- table表格标签的属性
table标签目前前端主流推荐HTML.CSS.JS三者分离,实际使用table标签的CSS样式代码还是采用table的style的属性和值来进行外观样式控制. 习惯样式: 1 table { 2 d ...
- HTML基础【4】:表格标签
表格标签 在过去表格标签用的非常非常的多,绝大多数的网站都是使用表格标签来制作的,也就是说表格标签是一个时代的代表 作用:以表格形式将数据显示出来,当数据量非常大的时候,表格这种展现形式被认为是最为清 ...
- 前端基础:HTML标签(上)
前端基础:THML HTML初始 1.web服务本质 import socket sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) so ...
- HTML常用标签与表格标签
超链接标签: <a href="超链接地址" target="_blank">超链接的文字</a> _blank或new是在新网页中打开 ...
- HTML表格标签
table标签的用途: 在表格中放图片,或用于布局(已经淘汰掉了),存放数据 table制作过程: 1.先分析表格有多少行 2.分析有多少列 3.做好表格的基本之后再添加表格需要的一些属性 table ...
- HTML基础之HTML标签
前端的三把利器 HTML:赤裸的一个人 CSS:华丽的衣服 JS/JavaScript:赋予这个人的行为,也就是动起来 HTML(超文本标记语言) html代码实际上就是一套能够被浏览器所识别的规则代 ...
- HTML-常用标签与表格标签
超链接标签: <a href="超链接地址" target="_blank">超链接的文字</a> _blank或new是在新网页中打开 ...
随机推荐
- endnote X7使用方法
网页版的endnote不能添加新模版,只能用模版库里的那些,所以转而试试离线版客户端. 1.下载安装完以后(下载地址就不给了,网上有很多),在word里可以看到顶栏有插件,如果你同时也安装了在线版本, ...
- sqlloader外部表
一创建目录 先在系统下创建 $ cd /home/oracle $ mkdir dir $ cd dir $ pwd 再在sqlplus里创建,让oracle知道这个目录 SQL> create ...
- java程序的工作原理
Sun公司设计java语言的目标是让Java程序不必经过修改就可以在各种各样的计算机(包括PC机和工作站)上运行.为了实现这一目标,Sun公司提供了一阵Java虚拟机(Java Virtual Mac ...
- Beanstalkd使用
Beanstalkd,一个高性能.轻量级的分布式内存队列系统,最初设计的目的是想通过后台异步执行耗时的任务来降低高容量Web应用系统的页面访问延迟,支持过有9.5 million用户的Facebook ...
- ASP.NET Zero--13.一个例子(6)商品分类管理-删除分类
1.添加按钮 首先添加一个删除按钮,打开文件Index.js[..\MyCompanyName.AbpZeroTemplate.Web\Areas\Mpa\Views\Category\Index.j ...
- JavaWeb知识回顾二
动态web资源相关 1.tomcat相关 tomcat的目录结构 bin -- tomcat服务器的批处理文件的存放目录 conf -- tomcat服务器配置文件的存放目录 lib -- tomca ...
- Java偏向锁实现原理(Biased Locking)
http://kenwublog.com/theory-of-java-biased-locking 阅读本文的读者,需要对Java轻量级锁有一定的了解,知道lock record, mark wor ...
- Hadoop权威指南:HDFS-数据流
Hadoop权威指南:HDFS-数据流 [TOC] 剖析文件读取 客户端通过调用FileSystem对象的open()方法来打开希望读取的文件,对于HDFS来说, 这个对象是分布式文件系统的一个实例 ...
- 游戏音频技术备忘 (三) 集成Wwise到Unreal Engine
当前受众较广的商业游戏引擎有 Unreal Engine.Unity.cocos2d-x等,在音频领域的第三方中间件则有Wwise.FMOD.Criware等,言多且烦,我们首先集成Wwise到 Un ...
- css单位总结
body的font-size:14px body第二代子元素的font-size: em: 1.2em=1.2*1.2*14px rem:1.2rem=1.2*14px 视口高度:1000px ...