一、表格的定义:用于有规范的显示数据。

  

二、基本组成:

     行<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表格标签的更多相关文章

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

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

  2. [05]HTML基础之表格标签

    1. <table>标签 表格容器,尽量避免用属性书写样式,而是用CSS来表达 border: 数字 //表格边框宽度 2. <caption>标签 表格的标题,一般出现在表格 ...

  3. table表格标签的属性

    table标签目前前端主流推荐HTML.CSS.JS三者分离,实际使用table标签的CSS样式代码还是采用table的style的属性和值来进行外观样式控制. 习惯样式: 1 table { 2 d ...

  4. HTML基础【4】:表格标签

    表格标签 在过去表格标签用的非常非常的多,绝大多数的网站都是使用表格标签来制作的,也就是说表格标签是一个时代的代表 作用:以表格形式将数据显示出来,当数据量非常大的时候,表格这种展现形式被认为是最为清 ...

  5. 前端基础:HTML标签(上)

    前端基础:THML HTML初始 1.web服务本质 import socket sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) so ...

  6. HTML常用标签与表格标签

    超链接标签: <a href="超链接地址" target="_blank">超链接的文字</a> _blank或new是在新网页中打开 ...

  7. HTML表格标签

    table标签的用途: 在表格中放图片,或用于布局(已经淘汰掉了),存放数据 table制作过程: 1.先分析表格有多少行 2.分析有多少列 3.做好表格的基本之后再添加表格需要的一些属性 table ...

  8. HTML基础之HTML标签

    前端的三把利器 HTML:赤裸的一个人 CSS:华丽的衣服 JS/JavaScript:赋予这个人的行为,也就是动起来 HTML(超文本标记语言) html代码实际上就是一套能够被浏览器所识别的规则代 ...

  9. HTML-常用标签与表格标签

    超链接标签: <a href="超链接地址" target="_blank">超链接的文字</a> _blank或new是在新网页中打开 ...

随机推荐

  1. endnote X7使用方法

    网页版的endnote不能添加新模版,只能用模版库里的那些,所以转而试试离线版客户端. 1.下载安装完以后(下载地址就不给了,网上有很多),在word里可以看到顶栏有插件,如果你同时也安装了在线版本, ...

  2. sqlloader外部表

    一创建目录 先在系统下创建 $ cd /home/oracle $ mkdir dir $ cd dir $ pwd 再在sqlplus里创建,让oracle知道这个目录 SQL> create ...

  3. java程序的工作原理

    Sun公司设计java语言的目标是让Java程序不必经过修改就可以在各种各样的计算机(包括PC机和工作站)上运行.为了实现这一目标,Sun公司提供了一阵Java虚拟机(Java Virtual Mac ...

  4. Beanstalkd使用

    Beanstalkd,一个高性能.轻量级的分布式内存队列系统,最初设计的目的是想通过后台异步执行耗时的任务来降低高容量Web应用系统的页面访问延迟,支持过有9.5 million用户的Facebook ...

  5. ASP.NET Zero--13.一个例子(6)商品分类管理-删除分类

    1.添加按钮 首先添加一个删除按钮,打开文件Index.js[..\MyCompanyName.AbpZeroTemplate.Web\Areas\Mpa\Views\Category\Index.j ...

  6. JavaWeb知识回顾二

    动态web资源相关 1.tomcat相关 tomcat的目录结构 bin -- tomcat服务器的批处理文件的存放目录 conf -- tomcat服务器配置文件的存放目录 lib -- tomca ...

  7. Java偏向锁实现原理(Biased Locking)

    http://kenwublog.com/theory-of-java-biased-locking 阅读本文的读者,需要对Java轻量级锁有一定的了解,知道lock record, mark wor ...

  8. Hadoop权威指南:HDFS-数据流

    Hadoop权威指南:HDFS-数据流 [TOC] 剖析文件读取 客户端通过调用FileSystem对象的open()方法来打开希望读取的文件,对于HDFS来说, 这个对象是分布式文件系统的一个实例 ...

  9. 游戏音频技术备忘 (三) 集成Wwise到Unreal Engine

    当前受众较广的商业游戏引擎有 Unreal Engine.Unity.cocos2d-x等,在音频领域的第三方中间件则有Wwise.FMOD.Criware等,言多且烦,我们首先集成Wwise到 Un ...

  10. css单位总结

    body的font-size:14px     body第二代子元素的font-size: em: 1.2em=1.2*1.2*14px rem:1.2rem=1.2*14px 视口高度:1000px ...