HTML 表格

HTML中的表格使用标签<table>来实现，每个表格均有若干行由<tr>标签来定义，每个<tr>表示一行。美航被分为若干个单元格用<td>标签来实现。<td>标签内包含的是单元格的内容。

数据单元格可以包含文本 图片 列表 段落 表单 水平线表格等内容。

HTML表格的边框属性

如果不定义边框属性 表格将不显示边框 有时候这很有用 但是大多数的时候 我们希望显示边框

表格的边框属性 是 border 可以规定边框的宽度 和 颜色。

HTML表格的表头

表格的表头使用标签<th>来定义。

例子

1.没有边框的表格

<body>

        <table>

            <tr>

                <td>100</td>

                <td>200</td>

                <td>300</td>

            </tr>

            <tr>

                <td>400</td>

                <td>500</td>

                <td>600</td>

            </tr>

        </table>

    </body>

2.带有表头的表格

<body>

        <h2>水平的表头</h2>

        <table border="1">

            <tr>

                <th>姓名</th>

                <th>电话</th>

                <th>电话</th>

            </tr>

            <tr>

                <td>田小胖</td>

                <td>5562346</td>

                <td>5562347</td>

            </tr>

            <tr></tr>

        </table>

        <h2>垂直的表头</h2>

        <table border="1px">

            <tr>

                <th>姓名</th>

                <td>田小胖</td>

            </tr>

            <tr>

                <th>电话</th>

                <td>5562346</td>

            </tr>

            <tr>

                <th>电话</th>

                <td>5562347</td>

            </tr>

        </table>

    </body>

带有空数据的单元格

<body>

        <table border="1">

            <tr>

                <td>Some text</td>

                <td>Some text</td>

            </tr>

            <tr>

                <td></td>

                <td>Some text</td>

            </tr>

        </table>

< /body>

单元格边距（cell padding）

<body>

        <table border="1" cellpadding="10">

            <tr>

                <td>Some text</td>

                <td>Some text</td>

            </tr>

            <tr>

                <td></td>

                <td>Some text</td>

            </tr>

        </table>

</body>

单元格间距(cell spacing)

<body>

        <table border="1" cellpadding="10" cellspacing="10">

            <tr>

                <td>Some text</td>

                <td>Some text</td>

            </tr>

            <tr>

                <td></td>

                <td>Some text</td>

            </tr>

        </table>

</body>

总结

<table width="400" border="1" style="border-collapse: collapse;">

 <tr>

  <th align="left">消费项目....</th>

  <th align="right">一月</th>

  <th align="right">二月</th>

 </tr>

 <tr>

  <td align="left">衣服</td>

  <td align="right">$241.10</td>

  <td align="right">$50.20</td>

 </tr>

 <tr>

  <td align="left">化妆品</td>

  <td align="right">$30.00</td>

  <td align="right">$44.45</td>

 </tr>

 <tr>

  <td align="left">食物</td>

  <td align="right">$730.40</td>

  <td align="right">$650.00</td>

 </tr>

 <tr>

  <th align="left">总计</th>

  <th align="right">$1001.50</th>

  <th align="right">$744.65</th>

 </tr>

</table>

还有向表格添加背景图 用属性 background 添加背景颜色 bgColor这些比较简单就不一一举例了。

HTML 学习笔记(表格)的更多相关文章

  1. android 学习笔记(1)

    内容来源:高成珍.钟元生<Android编程经典案例>学习笔记 表格布局——TableLayout 表格布局以行和列的方式来管理界面的布局,但并不能明确声明包含几行几列.可通过TableR ...

  2. Ext JS4 学习笔记之发送表单（Form）时也将表单下的表格（Grid）数据一同发送的方法

    Ext JS4 学习笔记之发送表单(Form)时也将表单下的表格(Grid)数据一同发送的方法 昨天在开发的时候遇到个小问题,就是如何将Grid的内容与Form一起发送到服务器端.默认情况下,表单(F ...

  3. HTML&CSS基础学习笔记1.16-单元格间距和表格主体

    上一篇讲html学习笔记,讲过了合并单元格,那么今天就来介绍下如何控制单元格的间距,以及表格主体的相关知识. 单元格间距 在上个知识点的显示结果中你可能发现了,单元格与单元格之间有一小段空白.这是由& ...

  4. amazeui学习笔记--css（HTML元素5）--表格Table

    amazeui学习笔记--css(HTML元素5)--表格Table 一.总结 1.基本样式:am-table:直接模块名  <table class="am-table"& ...

  5. iView学习笔记(三)：表格搜索，过滤及隐藏列操作

    iView学习笔记(三):表格搜索,过滤及隐藏某列操作 1.后端准备工作 环境说明 python版本:3.6.6 Django版本:1.11.8 数据库:MariaDB 5.5.60 新建Django ...

  6. HTML5学习笔记之表格标签

    HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...

  7. Bootstrap学习笔记博客

    本片博客用于记录之后要用到Bootstrap的学习笔记   概括: Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASC ...

  8. Linux 学习笔记

    Linux学习笔记 请切换web视图查看,表格比较大,方法:视图>>web板式视图 博客园不能粘贴图片吗 http://wenku.baidu.com/view/bda1c3067fd53 ...

  9. Log4j简单学习笔记

    log4j结构图: 结构图展现出了log4j的主结构.logger:表示记录器,即数据来源:appender:输出源,即输出方式(如:控制台.文件...)layout:输出布局 Logger机滤器:常 ...

随机推荐

  1. iOS 简单动画 block动画

    - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{ UIView * view = [ ...

  2. .NET项目工程生成一份项目帮助文档chm--Sandcastle工具

    Sandcastle的,由Microsoft创建的,是从创建MSDN风格的文档中使用的工具.NET程序集和关联的XML注释文件.目前的版本是 2010年6月发布.这是命令行并没有GUI前端,项目管理功 ...

  3. db2+python+sqlchemy环境的搭建

    记录了通过sqlalchemy 管理db2数据库的环境搭建 1.db2数据库安装配置 利用winscp复制iso文件到/mnt/IBM_db2 目录下 IBM_db2为自己创建 重命名 mv IBM\ ...

  4. 自动kill慢查询

    在生产环境中,DB服务器经常会被并发的慢查询压挂,因此事前进行sql审核避免烂SQL很重要.万一不小心慢sql还是跑到线上,并且并发还不小,这是dba肯定会收到告警.dba上线处理第一时间是定位并ki ...

  5. 关于update set from where

    http://blog.csdn.net/xcbsdu/article/details/6736503 下面是这样一个例子: 两个表a.b,想使b中的memo字段值等于a表中对应id的name值    ...

  6. Ngigx+Tomcat配置动静分离，负载均衡

    由于公司使用过Ngnix,对于刚接触Nginx来说,感觉有些好奇,于是研究了下. 本人在windows下使用的版本是nginx-1.8.1: 1. 启动Ngnix 双击nginx-1.8.1文件夹中n ...

  7. 简单阐述下Ajax以get方式请求的步骤 初学，不对的话，跟我说下，谢谢！

    首先, 在GET提交中"=,&"等字符与请求字符串的关键字相混淆.所以: 第一步,先对get提交过来的数据进行编码. 第二步,实例化ajax对象. 第三步,创建对服务器的连 ...

  8. SQL查询数据库中所有指定类型的字段名称和所在的表名

    --查询数据库中所有指定类型的字段名称和所在的表名 --eg: 下面查的是当前数据库中 所有字段类型为 nvarchar(max) 的字段名和表名 SELECT cols.object_id , co ...

  9. pt-diskstats 报错 Can't locate Time/HiRes.pm in @INC

    调用 pt-diskstats 时报错如下Can't locate Time/HiRes.pm in @INC [root@localhost ~]# pt-diskstats Can't locat ...

  10. c# UpdateLayeredWindow异形窗口

    #region UpdateLayeredWindow #region 重写窗体的 CreateParams 属性 protected override CreateParams CreatePara ...