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. 虚拟机克隆以后出现“需要整合虚拟机磁盘”的解决方法

    问题描述 在虚拟机克隆完毕以后,原始虚拟机提示"需要整合虚拟机磁盘" 在"任务与事件"栏中看到以下信息 解决方法 从上面可以看到是因为整合失败导致的,那么我们只 ...

  2. Linux中的硬链接和软链接

    软链接和硬链接 命令ln ln是创建链接的命令: 创建硬链接:ln file link 创建软链接:ln -s file link 硬链接 硬链接(hard link)是Unix系统最早的创建链接的方 ...

  3. 浅谈Java五大设计原则之观察者模式

    定义一下观察者模式: 观察者模式又叫  发布-订阅  模式,定义的两个对象之间是一种一对多的强依赖关系,当一个对象的状态发生改变,所有依赖它的对象 将得到通知并自动更新(摘自Hand First). ...

  4. 全面理解JavaScript中的闭包的含义及用法

    1.什么是闭包 闭包:闭包就是能够读取其他函数内部变量的函数;闭包简单理解成“定义在一个函数内部的函数”. 闭包的形式:即内部函数能够使用它所在级别的外部函数的参数,属性或者内部函数等,并且能在包含它 ...

  5. Redis客户端开发包：Jedis学习-入门

    添加Jedis依赖 我们可以使用以下三种方式来添加Jedis依赖. 1.下载jar文件 从http://search.maven.org/下载最近的jedis包和Apache Commons Pool ...

  6. u盘安装CENTOS后，启动missing operating system ，只能用U盘才能启动系统

    好久之前就想把家里闲置的那台老的不能再老的笔记本换成linux的,用来学习 从N久之前用光盘安装的时候发现光驱坏掉了之后就没有再装过,最近又想安装于是就试了U盘安装 U盘安装过程也很简单,只需要制作一 ...

  7. innoDB源码分析--缓冲池

    最开始学Oracle的时候,有个概念叫SGA和PGA,是非常重要的概念,其实就是内存中的缓冲池.InnoDB的设计类似于Oracle,也会在内存中开辟一片缓冲池.众所周知,CPU的速度和磁盘的IO速度 ...

  8. 像编程一样写文章—Markdown

    Markdown是什么 是一种极其简单的标记语言,写的时候只需要普通编辑器即可: 它可以使文本内存具有某种格式: Markdown设计理念使文本易读.易写 文件后缀名:.md . .markdown. ...

  9. python setuptools工具打包

    http://blog.csdn.net/five3/article/details/7847551http://blog.csdn.net/reyoung1110/article/details/7 ...

  10. MarkDown插入图片

    MarkDown插入图片的语法 ·编辑器:MacDown 比如博客园的Logo,URL是 http://static.cnblogs.com/images/logo_small.gif 在要插入图片的 ...