<!Doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="keywords" content="">
        <meta name="description" content="">
        <meta name="author" content="">
        <meta http-equive="refresh" content="30">
        <title>第三天（html表格）</title>
    </head>
    <body>
        <table border="1"><!--border="1"意思是每个格子包括外面的大盒子都有像素为1的边框-->
            <tr>
                <th>这是头部第一行，第一格</th>
                <th>这是头部第一行，第二格</th>
                <!--<th>标签代表表格头部-->
            </tr>
            <tr>
                <td>这是第一行，第一格</td>
                <td>这是第一行，第二格</td>
            </tr>
            <tr>
                <td>这是第二行，第一格</td>
                <td>这是第二行，第二格</td>
            </tr>
        </table>

<table><!--如果不定义边框则没有边框，但大多数都是要定义边框的-->
            <tr>
                <th>这是头部第一行，第一格</th>
                <th>这是头部第一行，第二格</th>
                <!--<th>标签代表表格头部-->
            </tr>
            <tr>
                <td>这是第一行，第一格</td>
                <td>这是第一行，第二格</td>
            </tr>
            <tr>
                <td>这是第二行，第一格</td>
                <td>这是第二行，第二格</td>
            </tr>
        </table>

<!--带有标题的表格-->
        <table>
            <caption style="text-align:left;font-weight:bold">我是表格标题</caption><!--<caption>标签写在table中用来定义表格标题-->
            <tr>
                <td>这是第一行，第一格</td>
                <td>这是第一行，第二格</td>
            </tr>
            <tr>
                <td>这是第二行，第一格</td>
                <td>这是第二行，第二格</td>
            </tr>
        </table>

<!--单元格跨两格（即单元格夸两行）-->
        <table border=“1” >
            <tr  align="center"><!--其中align="center"放在tr中是为了让单元格内的字居中，若是放在table标签中则是整个表格居中-->
                <td>这是第一行，第一格</td>
                <td colspan="2">我自己占据两个格子</td>

</tr>
            <tr>
                <td>这是第二行，第一格</td>
                <td>这是第二行，第二格</td>
                <td>这是第二行，第三格</td>
            </tr>
        </table>
        <!--colspan="2"中的“2”就是占据几个单元格的数值，上一个行的表格占有几个单元格，下面几行就要有几个单元格来撑，不然不显示占据两个单元格的效果-->

<!--单元格跨两列-->
        <table border=“1” style="margin-top:30px">
            
            <tr>
                <td rowspan="3">我自己占三列</td>
                <td>这是第二行，第三格</td>
            </tr>
            <tr>
                <td>这是第二行，第三格</td>
            </tr>

</table>

<!--单元格跨三列-->
        <table border=“1” style="margin-top:30px">
            
            <tr>
                <td rowspan="3">我自己占三列</td>
                <td>这是第二行，第三格</td>
        
            </tr>
            <tr>
                <td>这是第二行，第三格</td>
            </tr>

<tr>
                <td>这是第二行，第三格</td>
            </tr>
        
        </table>
        <!--rowspan="2"中的“2”就是占据几列的数值，详解与占据两个单元格类似，特别注意：占据列的时候在本列中要单独有个与之同一列中，为了是往后占位达到效果-->

<!--表格内添加东西-->
        <table border=“1” style="margin-top:30px">
            
            <tr>
                <td>
                <p>这是段落一</p>
                <p>这是段落二</p>
                </td>
                <td>这个单元格内包含一个表格：
                    <table border="1">
                        <tr>
                            <td>一</td>
                            <td>二</td>
                        </tr>
                        <tr>
                            <td>三</td>
                            <td>四</td>
                        </tr>
                    </table>
                </td>
        
            </tr>
            <tr>
                <td>
                    这个单元格包含一个列表：
                    <ul>
                        <li>我是大娃</li>
                        <li>我是二娃</li>
                        <li>我是三娃</li>
                        <li>其他娃还没出来</li>
                    </ul>
                </td>

<td>
                    这里可以加个图片：
                    <img src="img.jpg" alt="这是图片" title="图片" style="display:block">
                    <!--其中的display：block样式是将图片行内元素强制转化为块级元素-->
                </td>
            </tr>

</table>

<!--带有thead、tbody、tfoot的表格，不加这三样表格也没有问题，加这三样是为了方便统一改变不同部分的样式-->

<!--加边框是不是好丑？！不加边框就不像表格了，怎么破怎么破！！下面就看看各种小东西吧-->

<table border=“1” style="margin-top:30px" rules="all" bordercolor="red">
            <!-- rules="rows"去掉竖线，rules="cols"去掉横线，rules="all"去掉双边匡，留下横竖线，rules="grounps"是每个单元格都显示边框,
            
                bordercolor="red"控制所有边框为红色
                border-collapse属性是合并边框，切只能写在style里面，他不是表格自带的属性，是样式属性
                -->

<thead>
                    <tr>
                        <th>页眉一</th>
                        <th>页眉二</th>
                    </tr>
            
                </thead>
                
                <tbody style="border:1px solid blue"><!--这里定义表格体部分的外边框颜色，把上面的border边框颜色覆盖掉了.注意：这个单独定义边框的必须写在样式中-->
                    <tr>
                        <td>这是内容</td>
                        <td>这是内容</td>
                
                    </tr>
                    <tr>
                        <td>这是内容</td>
                        <td>这是内容</td>
                    </tr>
                </tbody>

<tfoot bgcolor="pink"><!--bgcolor是表格自带的属性，用来设置表格背景颜色-->
                    <tr>
                        <td>这是底部</td>
                        <td>这是底部</td>
                    </tr>
                </tfoot>
            </table>
        
    </body>
</html>

第三天--html表格的更多相关文章

  1. Word中设置三栏式表格

    一般期刊要求三栏式表格,我原来是选中表格,用橡皮差擦去不必要的线,但是今天发现只能查去横线,竖线一插曲格式就乱了,我想起了上图,不选“内部竖框线”就好了.

  2. 实验三　HTML表格和表单的制作

    实验三 HTML表格和表单的制作 [实验目的] 1.掌握表格的创建.结构调整与美化方法: 2.熟悉表格与单元格的主要属性及其设置方法: 3.掌握通过表格来进行网页页面的布局方法. [实验环境] 连接互 ...

  3. 四则运算三+psp0级表格

    一.题目 在四则运算二的基础上,选择一个方向进行拓展,我选择的是增加了答题模块 二.设计思路 1.在上次的基础上,增加了答题模块,每出现一道四则运算题目,便提醒输入结果,如果结果错误,就会提示错误 2 ...

  4. C算法编程题（三）画表格

    前言 上一篇<C算法编程题(二)正螺旋> 写东西前还是喜欢吐槽点东西,要不然写的真还没意思,一直的想法是在博客园把自己上学和工作时候整理的东西写出来和大家分享,就像前面写的<T-Sq ...

  5. LaTeX常用篇(三)---矩阵与表格

    目录 1. 序言 2. 矩阵 2.1 复杂写法 2.2 简化写法 2.3 复杂矩阵 3. 表格 4. 对齐 更新时间:2019.10.02 1. 序言   矩阵是一个强大的工具,许多东西都能够用矩阵来 ...

  6. 第三次作业：结对编程--实现表格在APP的导入和显示

    031302517 031302319 ps:共同完成一篇随笔,文章中的第一人称我(517),队友(319) 一.功能分析+实现思路+结队讨论 这里我将功能分析和实现思路还有结对过程中的一些讨论结合在 ...

  7. 在Asp.Net中操作PDF – iTextSharp - 使用表格

    使用Asp.Net生成PDF最常用的元素应该是表格,表格可以帮助比如订单或者发票类型的文档更加格式化和美观.本篇文章并不会深入探讨表格,仅仅是提供一个使用iTextSharp生成表格的方法介绍 使用i ...

  8. Bootstrap CSS 栅格、代码和表格

    一.bootstrap栅格 Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. Bootstrap 网格系统(G ...

  9. css011 表格和表单的格式化

    css011 表格和表单的格式化 一.    让表格专司其职    Html中创建一个三行三列的表格 <table> <caption align="bottom" ...

随机推荐

  1. 冰冻三尺非一日之寒--Django框架【进阶篇】

    第十九章  Django进阶 到目前为止,当我们的程序涉及到数据库相关操作时,我们一般都会这么搞: 创建数据库,设计表结构和字段 使用 MySQLdb 来连接数据库,并编写数据访问层代码 业务逻辑层去 ...

  2. BZOJ 1711: [Usaco2007 Open]Dining吃饭

    1711: [Usaco2007 Open]Dining吃饭 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 902  Solved: 476[Submit ...

  3. Zabbix监控nginx-rtmp status（json版）

    与前面的文章 zabbix监控nginx-rtmp status(html版)区别只在于取值的页面不一样 http://127.0.0.1:81/control/get/all_streams sta ...

  4. Ubuntu下deb文件及tgz文件安装

    dpkg 是Debian Package的简写,是为Debian 专门开发的套件管理系统,方便软件的安装.更新及移除.所有源自Debian的Linux发行版都使用dpkg,例如Ubuntu.Knopp ...

  5. 美团大众点评服务框架Pigeon

    服务框架Pigeon架构 • Pigeon提供jar包接入 ,线上运行在tomcat里 • Monitor-CAT ,负责调用链路分析.异常监控告警等 • 配置中心-Lion ,负责一些开关配置读取 ...

  6. C3P0连接池配置和实现详解

    一.配置 <c3p0-config> <default-config> <!--当连接池中的连接耗尽的时候c3p0一次同时获取的连接数.Default: 3 --> ...

  7. UP board 漫谈(1)——从Atom到UP Board

    title: UP board 漫谈(1)--从Atom到UP Board date: 2016-12-26 12:33:03 tags: UP board categories: 开发板 perma ...

  8. GCD总结

    //用block只有两种:同步执行/异步执行(参数1:队列;参数二:任务) dispatch_async(dispatch_get_global_queue(0, 0),^{ });//异步在新的线程 ...

  9. 学习MySQL之数据类型（四）

    一.   整数类型: 整数类型 占用字节 最小值 最大值 TINYINT 1 有符号 -128 无符号0 有符号127 无符号255 SMALLINT 2 有符号-3 2768 无符号0 有符号3 2 ...

  10. hdu2014青年歌手大赛

    Problem Description 青年歌手大奖赛中,评委会给参赛选手打分.选手得分规则为去掉一个最高分和一个最低分,然后计算平均得分,请编程输出某选手的得分. Input 输入数据有多组,每组占 ...