简单的html表格，由table元素以及一个或多个tr,th,td元素组成。

tr:定义表格行

th:定义表格头

td:定义表格单元

更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

可选属性：

align:

  • left      字体靠左，右，居中
  • center  字体靠右
  • right    字体靠居中

bqcolor：表格背景色

  • rgb(x,x,x)
  • #xxxxxx
  • colorname

border:表格边框的宽度 

cellpadding:单元格边缘与其内容之间的距离

  • pixels
  • %

cellspacing:单元格之间的空白

  • pixels
  • %

示例代码：

<body>

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

        <thead>

            <tr>

                <th>第一列</th>

                <th align="left">第二列</th>

                <th bgcolor="aqua">第三列</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>row1 col1</td>

                <td>row1 col2</td>

                <td>row1 col3</td>

            </tr>

            <tr>

                <td>row2 col1</td>

                <td>row2 col2</td>

                <td>row2 col3</td>

            </tr>

            <tr>

                <td>row3 col1</td>

                <td>row3 col2</td>

                <td>row3 col3</td>

            </tr>

        </tbody>

    </table>

</body>

上图看看：

效果怎么样呢？

再看看边框属性吧：

fram:外侧边框哪个可见

  • void       外边框四边不见了
  • above    仅上边框可见
  • below　  仅下边框可见
  • hsides    仅上下边框可见
  • lhs         仅左边框可见
  • rhs        仅右边框可见
  • vsides　 仅左右边框可见
  • box        四边均可见
  • border　 单元格边框可见

rules:内侧边框哪个可见

  • none    无内侧边框
  • groups  仅上边框可见
  • rows      仅行间边框可见
  • cols       仅列间边框可见
  • all       内边框均可见

表格的概要与宽度

summary：表格的概要

width：表格的宽度

  • %
  • pixels

再看看其它表格效果吧：

上代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <table border="" cellpadding="" width="800px" bgcolor="#5f9ea0">

        <tr>

            <th>机型</th>

            <th>CPU</th>

            <th>内存</th>

            <th colspan="">描述信息</th>

        </tr>

        <tr>

            <th rowspan="">DELL2950</th>

            <td>.4GHZ</td>

            <td>16GB</td>

            <td>

                <p>CPU坏了一颗</p>

                <p>工程师明上午来修</p>

            </td>

            <td>

                <table border="">

                    <tr>

                        <th>姓名</th>

                        <th>电话</th>

                    </tr>

                    <tr>

                        <td>孔扎根</td>

                        <td></td>

                    </tr>

                </table>

            </td>

        </tr>

        <tr>

            <td>.4GHZ*</td>

            <td>16GB</td>

            <td>

                <ul>

                    <p>花费详单</p>

                    <li>服务器5800块</li>

                    <li>两颗CUP共1万块</li>

                    <li>内存花了4000块</li>

                </ul>

            </td>

            <td>200GB</td>

        </tr>

        <tr>

            <th>DELL5800</th>

            <td>.4GHZ*</td>

            <td>32GB</td>

            <td>800GB</td>

            <td>800GB</td>

        </tr>

        <tr>

            <th>DELL9700</th>

            <td>.4GHZ*</td>

            <td>128GB</td>

            <td>2TB</td>

            <td>2TB</td>

        </tr>

    </table>

</body>

</html>

解释图：

最终效果图：

html之table标签的更多相关文章

  1. python处理html的table标签

    转载:http://www.xuebuyuan.com/583071.html python处理html的table标签 2012年01月06日 ⁄ 综合 ⁄ 共 5279字 ⁄ 字号 小 中 大 ⁄ ...

  2. ol,ul,dl,table标签的基本语法

    ol,ul,dl,table标签的基本语法 有序列表: 无序列表:                                  自定义列表: <ol> <ul> < ...

  3. HTML——表格table标签，tr或者td

    表格定义和用法 <tr> 标签定义 HTML 表格中的行. tr 元素包含一个或多个 th 或 td 元素. HTML 与 XHTML 之间的差异 在 HTML 4.01 中,tr 元素的 ...

  4. table标签

    table标签使我们最常用的的标签,在使用table标签时我们要注意一些其属性,早期我们经常使用table标签对其进行页面布局但是现在我们基本不再使用,由此可见table标签也是非常强大的一个工具. ...

  5. dl标签和table标签

    dl标签定义了一个定义列表 <html> <body> <h2>一个定义列表:</h2> <dl>   <dt>计算机</ ...

  6. PHP自学4——通过函数将数组数据输出到html的Table标签中（使用函数的例子）

    这一节其实说实话并没有什么干货,不过为了防止PO主的懒癌的复发,还是坚持放一点东西,即使是内容和长度都令人发指.这一节通过一个函数来实现将数组中的内容输出html的Table标签当中显示. 函数文件— ...

  7. PHP自学3——在html的<table>标签中显示用户提交表单

    为了更好地显示用户提交表单,本节将在上一节的基础上将读取的用户表单显示在html的<table>标签中,这一节将用到和数组有关的知识. 本节代码将从外部文件(.txt文件)中读取信息于指定 ...

  8. display：table标签来自动改变列宽 改变的同时table的整体宽度跟随变化

    发现公司里的所有分页功能都是通过display:talbe来实现的,但是用户最近说要让表格列宽可以拖动:所有我就寻找了好多的办法:网上找了很多的资料,但是都不是我要的效果因为他们都是列宽不改变要不就是 ...

  9. 区别CSS中display：box；inline；none以及HTML中 <frame> 标签<table> 标签的 frame 属性

    区别display:box:display:inline:display:none三者的不同 display:block的特点是: block是Display默认的值.总是在新行上开始:该对象随后的内 ...

  10. <table>标签总结（colspan跨列 ，rowspan跨行）

    table标签有些内置属性要设置: <table cellpadding="0" cellspacing="0" border="0" ...

随机推荐

  1. HDU 5092

    http://acm.hdu.edu.cn/showproblem.php?pid=5092 卡读题,实质是每行取一个点,从上到下找一条路径权值和最小,点可以到达的地方是周围八个格子 类似数塔的dp, ...

  2. Magento速度优化

    一.Magento Compiler可以提高 25% 到 50% 速度 Magento的性能一直是大家比较关心的焦点,现在Magento最新的版本 1.3.2.2 增加了 Magento Compil ...

  3. Http方法：Get请求与Post请求的区别

    Get是向服务器发索取数据的一种请求,而Post是向服务器提交数据的一种请求Get是获取信息,而不是修改信息,类似数据库查询功能一样,数据不会被修改Get请求的参数会跟在url后进行传递,请求的数据会 ...

  4. 前端学习资源（CSS+HTML5）

    CSS CSS | MDN CSS参考手册 CSS探索之旅 Web前端实验室 STYLESHEETS CSS3中的content字符编码 Font Awesome, 一套绝佳的图标字体库和CSS框架 ...

  5. JVM监控命令详解(转)

    JVM监控命令基本就是 jps.jstack.jmap.jhat.jstat 几个命令的使用就可以了 JDK本身提供了很多方便的JVM性能调优监控工具,除了集成式的VisualVM和jConsole外 ...

  6. spark streaming 实现接收网络传输数据进行WordCount功能

    package iie.udps.example.operator.spark; import scala.Tuple2; import org.apache.spark.SparkConf; imp ...

  7. Python天天美味(13) - struct.unpack

    转载自:http://www.cnblogs.com/coderzh/archive/2008/05/04/1181462.html Python中按一定的格式取出某字符串中的子字符串,使用struc ...

  8. ubuntu Virtualbox菜单栏不见

    ubuntu 装了Virtualbox 后,不知道怎么操作的导致顶部菜单栏不见啦, 网上查了下,我们看到开启/关闭 Scale Mode的快捷键都是 Ctrl C ,注意Ctrl是右边的那个不是左边那 ...

  9. ANTLR3完全参考指南读书笔记[06]

    前言 这段时间在公司忙的跟狗似的,但忙的是没多少技术含量的活儿. 终于将AST IR和tree grammar过了一遍,计划明天写完这部分的读书笔记.   内容 1 内部表示AST构建 2 树文法   ...

  10. js正则函数

    js的正则函数主要有有replace,match,test,search,exec. 首先对文中的变量进行说明: rgExp为包含正则表达式模式和可用标志的正则表达式对象.也可以是包含正则表达式模式和 ...