<!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. asp.net mvc4 简单的服务器监控开发之C#获取服务器CPU、RAM、TCP等系统信息（上）

    一.背景 前段时间服务器出了点问题,加上学业愈来愈紧张,写博文分享的时间越来越少.虽然不是第一次在博客园上写经验,但是近期分享的博文得到了不少的朋友支持和指正,在这里内心非常感激和开心.希望以后能认真 ...

  2. sql三维数据

    今天有个钢铁项目在导入数据时 存货规格各种缺 相吐血 原表结构是这样的 编码.规格.名称 三种存货 三种都有想同的规格 规格对分厚度和宽度 那么问题来了 简简单单的几个厚度宽度 三种商品 就到了 10 ...

  3. delphi 取硬盘号

    function GetVolumeID: string; var vVolumeNameBuffer: ..] of Char; vVolumeSerialNumber: DWORD; vMaxim ...

  4. Java的多线程机制系列：不得不提的volatile及指令重排序(happen-before)

    一.不得不提的volatile volatile是个很老的关键字,几乎伴随着JDK的诞生而诞生,我们都知道这个关键字,但又不太清楚什么时候会使用它:我们在JDK及开源框架中随处可见这个关键字,但并发专 ...

  5. 如何防止应用因获取IDFA被AppStore拒绝

    由于Appstore禁止不使用广告而采集IDFA的app上架,友盟提供IDFA版和不含IDFA版两个SDK,两个SDK在数据上并没有差异,采集IDFA是为了防止今后因为苹果可能禁止目前使用的openu ...

  6. C#调用百度高精度IP定位API通过IP获取地址

    API首页:http://lbsyun.baidu.com/index.php?title=webapi/high-acc-ip 1.申请百度账号,创建应用,获取密钥(AK) http://lbsyu ...

  7. Python学习笔记（1)

    001 #通过bat命令运行pyhon py文件,并将结果输出到txt文件.# D:\ResearchContent\Exercise_Programm\Start\Start.py>C:\Us ...

  8. php中双冒号::的用法

    注:本篇博客系转载,出处不可考(至少对我来说不可考...) 双冒号操作符即作用域限定操作符Scope Resolution Operator可以访问静态.const和类中重写的属性与方法. 在类定义外 ...

  9. 【转】[Intel/Nvidia]Ubuntu 16.04 LTS Intel/Nvidia双显卡切换

    1.在Unity中搜索 "Additional Drivers" 2.打开并选择以下选项 3.打开终端并输入 sudo apt-get install nvidia-361 4.安 ...

  10. MongoDB笔记

    mongodb简介 MongoDB 是一个基于分布式文件存储的数据库.存储的是Bson结构的文档(二进制的JSON),内部执行引擎为JS解释器,把文档存储为BSON结构,在查询时,转换为JS对象,可以 ...