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

  

二、基本组成:

     行<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. Delphi的时间与字符串函数代码示例

    [delphi] view plaincopyprint? SysUtils.StrToDate(); SysUtils.StrToDateDef(); SysUtils.TryStrToDate() ...

  2. linux学习笔记----文件与目录管理

    一.目录处理命令 cd:切换目录 pwd:显示当前目录 mkdir:新建一个新的目录 rmdir:删除一个空的目录 1)pwd:显示当前目录 pwd [-P] P:显示出当前的路径,而非使用连接(li ...

  3. jQuery 处理TextArea

    jQuery 处理TextArea: $('#btn001').click(function(e) { console.log("btn001Click"); var cmt = ...

  4. sqlserver怎么将查询出来的数据存到新的数据库表中

    查询结果直接创建一个新表存放select * into [新表名] FROM [原表名]WHERE 车辆='小汽车' 若新建表要放在另一个数据库B中USE BGOSELECT * INTO [新表名] ...

  5. Flex性能调优相关的一些总结

    1.Performace包含4点:(1)Latency反应时间(2)Scalability:可伸缩性(3)Reliablity:稳定性(4)Availability:可用性2.运行时生命周期:Flex ...

  6. NSObject头文件解析 / 消息机制 / Runtime解读 (一)

    NSObject头文件解析 当我们需要自定义类都会创建一个NSObject子类, 比如: #import <Foundation/Foundation.h> @interface Clas ...

  7. 基于ssh反向代理实现的远程协助

    本文描述了怎么通过ssh反向代理实现远程协助,并提供了相关代码. 可满足web开启远程协助功能后,维护人员能够通过ssh和http登录客户机器(包括在nat环境下) web开启该功能后,ssh才能登录 ...

  8. 《JAVASCRIPT高级程序设计》表单基础知识和文本框脚本

    在HTML中,表单是由<form>元素来表示,在javascript中,表单对应的是HTMLFormElement类型,它具有一些独有的属性和方法: 一.表单基础知识 1.取得表单的方式 ...

  9. 蓝桥网试题 java 基础练习 杨辉三角形

    ----------------------------------------------------------- ---------------------------------------- ...

  10. LoadRunner 调用Dll完成加密解密

    LoadRunner里的函数比较少,没有MD5.Base64加密. 我们可以通过在C++里把一些加解密写成函数,供LR调用. DLL函数编写 C++里新建工程Class Library(此处是用VS2 ...