<!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. ssh 登录慢？

    修改 /etc/ssh/sshd_config 文件中对应的配置为: GSSAPIAuthentication no UseDNS=no 修改 /etc/nsswitch.conf 文件中对应的配置为 ...

  2. OC与JavaScript的交互

    stringByEvaluatingJavaScriptFromString的用法,它的功能非常的强大,用起来非常简单,通过它我们可以很方便的操作uiwebview中的页面元素. UIWebView是 ...

  3. BZOJ 1221: [HNOI2001] 软件开发

    1221: [HNOI2001] 软件开发 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1428  Solved: 791[Submit][Stat ...

  4. Zabbix监控mysql performance

    介绍 zabbix监控mysql性能,使用zabbix自带的mysql监控模板,可以监控以下内容OPS(增删改查).mysql慢查询数量.mysql请求\响应流量带宽 配置 新建mysql监控用户 G ...

  5. 如何使用SQL SERVER数据库跨库查询

    SQL Server中内置了数据库跨库查询功能,下面简要介绍一下SQL Server跨库查询.首先打开数据源码:OPENDATASOURCE不使用链接的服务器名,而提供特殊的连接信息,并将其作为四部分 ...

  6. 5 Django系列之通过list_display展示多对多与外键内容在admin-web界面下

    list_display展示多对多关系的内容 表结构关系 表一 class Server(models.Model): asset = models.OneToOneField('Asset') cr ...

  7. 机器学习——AdaBoost元算法

    当做重要决定时,我们可能会考虑吸取多个专家而不只是一个人的意见.机器学习处理问题也是这样,这就是元算法(meta-algorithm)背后的思路. 元算法是对其他算法进行组合的一种方式,其中最流行的一 ...

  8. Oracle交易流水号问题

    需求:生成交易流水号,每次新增一条记录时都自动加1,且流水号形式为000000001形式的10位数字. 思路:利用序列可以生成自增的流水号,只需要在前面添加N个0即可,同时,由于数字的长度一定,因此可 ...

  9. 如何解决inline和linline-block在浏览器中的间距问题

    写页面时,如果想要元素从左到右排列,但又不想使用浮动,那么很多人都会用到display:inline或者display:inline-block. 但是每次一用到这个两个属性,浏览器中浏览的时候就会有 ...

  10. SpringMVC工作原理

    SpringMVC的工作原理图: SpringMVC流程 1.  用户发送请求至前端控制器DispatcherServlet. 2.  DispatcherServlet收到请求调用HandlerMa ...