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. JavaScript上传图片及时预览

    /*******************************正面图片上传预览开始****************************/        function previewImage ...

  3. nginx反向代理配置及优化

    nginx反向代理配置及优化前言: 由于服务器apache抗不住目前的并发.加上前端squid配置后,问题依然无法解决.而页面程序大部分是动态.无法使用fastcgi来处理.因此想使用nginx做为反 ...

  4. iOS 获取emoji表情和拦截emoji表情

      1 2 //将数字转为 #define EMOJI_CODE_TO_SYMBOL(x) ((((0x808080F0 | (x & 0x3F000) >> 4) | (x &a ...

  5. iOS开发--Swift 最近项目开发中遇到的一些小问题与解决方法

    1, Swift 修改导航栏颜色 self.navigationController?.navigationBar.barTintColor 2, Swift button 属性设置时直接进行初始化 ...

  6. 【代码笔记】iOS-给背景图赋值颜色

    代码: - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. // ...

  7. 【Android】Fragment真正意义上的onResume和onPause

    前言 Fragment虽然有onResume和onPause的,但是这两个方法是Activity的方法,调用时机也是与Activity相同,和ViewPager搭配使用这个方法就很鸡肋了,根本不是你想 ...

  8. MySQL主主双机负载均衡

    MySQL双机主主架构,其上辅以负载均衡设备,可以实现mysql数据库的负载均衡高性能和高可用性,负载均衡设备可以根据算法将数据库操作的负 载平均分到两台MySQL服务器上,这样对于每台服务器来说工作 ...

  9. hibernate注解——@Temporal

    @Temporal(TemporalType.TIMESTAMP) @Column(name="createTime",nullable=false) private Date c ...

  10. Asp.net MVC的Model Binder工作流程以及扩展方法(1) - Custom Model Binder

    在Asp.net MVC中, Model Binder是生命周期中的一个非常重要的部分.搞清楚Model Binder的流程,能够帮助理解Model Binder的背后发生了什么.同时该系列文章会列举 ...