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. Android 短信验证码平台

    1.容联云通讯 (目前只支持国内.收费) http://www.yuntongxun.com/ 2.bmob (目前只支持国内.收费) http://www.bmob.cn/ 3.阿里大鱼(目前只支持 ...

  2. Android之SeekBar定制

    1.SeekBar样式定制 xml文件中:  <SeekBar             android:id="@+id/seekbar_voice"             ...

  3. 对URL编码

    url支持26个英文字母.数字和少数几个特殊字符,因此,对于url中包含非标准url的字符时,就需要对其进行编码.iOS中提供了函数stringByAddingPercentEscapesUsingE ...

  4. Android属性之build.prop生成过程分析

    Android的build.prop文件是在Android编译时刻收集的各种property(LCD density/语言/编译时间, etc.),编译完成之后,文件生成在out/target/pro ...

  5. Android优秀学习资料(高手博客

    任玉刚, 博客 : http://blog.csdn.net/singwhatiwanna, github : https://github.com/singwhatiwanna Trinea, 博客 ...

  6. 【网络编程】Socket概念及简单聊天…

    Socket(套接字) * Socket就是为网络服务提供的一种机制 * 通信的两端都是Socket * 网络通信其实就是Socket间的通信 * 数据在两个Socket间通过IO传输 我们来看看下面 ...

  7. Android ANR产生的原理和如何避免

    在Android上,如果你的应用程序有一段时间响应不够灵敏,系统会向用户显示一个对话框,这个对话框称作应用程序无响应(ANR:Application Not Responding)对话框.用户可以选择 ...

  8. Android Studio 2.2新功能预览

    升级SDK可用Background 多加了个按钮,可用一边写代码一边下载SDK Instant Run 修改代码一秒启动 APK analyzer 分析任何的APK 查看APK下载包的大小,解压后的实 ...

  9. OC NSArray 数组

    # OC NSArray 数组 NSArray常用方法 获取数组中第一位元素 array.firstObject 获取数组中最后一个元素 array.lastObject 获取数组中指定索引下标的元素 ...

  10. vs2015密钥 企业版 专业版 (vs.net)

    专业版:HMGNV-WCYXV-X7G9W-YCX63-B98R2企业版:HM6NR-QXX7C-DFW2Y-8B82K-WTYJV