<!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. Wpf usercontrol dispose

    窗口关闭时组件"析构": public UserControl()        {            InitializeComponent();               ...

  2. cocos2dx3.0的CCCallFunc、CCCallFuncN

    来源: http://blog.csdn.net/crayondeng/article/details/18767407 二.在cocos2d-x中,还有一个地方是需要大量使用到回调函数的,这就是回调 ...

  3. 练习JavaScript实现梯形乘法表

    效果: 表格用html中的table,tr,td,然后利用for语句实现,循环输出行和列,再根据行列的数量进行乘法运算,第一个for循环输出9行,然后内嵌一个for,在条件表达式中取第一个for循环的 ...

  4. bzoj 1391

    建图跑最小割,加当前弧优化. #include<iostream> #include<cstdio> #include<cstring> #include<q ...

  5. hibernate- Hibernate中多对多的annotation的写法（中间表可以有多个字段）

    http://blog.csdn.net/liuxianbing119/article/details/7283769

  6. Linux创建WiFi热点

    手机流量用完,需要开WiFi,由于是LinuxMint,感觉配置还算容易,找到一个不错的教程,收藏一下,以备后用.除了修改配置文件那步在我的电脑不需要外其他基本正确,而且Mint本来就衍生自Ubunt ...

  7. springMVC的bean注入方式

    POJO是多例模式,并不是单例模式. servlet是单例的,同一个实例可以同时有多个用户访问 用单例,是因为没必要每个请求都新建一个对象,这样子既浪费CPU又浪费内存:用多例,是为了防止并发问题:单 ...

  8. linux 7z 命令编译安装

    7zip是一个开源的压缩软件  7z格式是压缩率最高的格式 服务器备份 数据几个g 要是tar压缩下载的话 时间太长  7zip压缩出来体积很小 首先安装 我这是 centos的 直接可以  yum ...

  9. Linux 下 ---ThinkPHP 图片上传提示：上传根目录不存在！请尝试手动创建

    2016年11月15日11:15:47 Windows下如果碰到如此问题,要看文件保存根路径里的rootpath,比如ThinkPHP框架里config.php文件里的的参数配置: //文件上传相关配 ...

  10. github教程

    http://www.yangzhiping.com/tech/github.html