<!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. js获取当前域名、Url、相对路径和参数以及指定参数

    一.js获取当前域名有2种方法 1.方法一 var domain = document.domain; 2.方法二 var domain = window.location.host; 3.注意问题 ...

  2. mvn-打jar运行包（含环境变量配置）

    前沿条件 maven下载:http://maven.apache.org/download.cgi 配置环境变量 MAVEN_HOME= D:\Softwares\apache-maven-3.2.2 ...

  3. xv6课本翻译之——第0章 操作系统接口

    Chapter 0 第0章 Operating system interfaces 操作系统接口 The job of an operating system is to share a comput ...

  4. 小猪cms微信二次开发之怎样分页

    $db=D('Classify'); $zid=$db->where(array('id'=>$this->_GET('fid'),'token'=>$this->tok ...

  5. 汇编实现点亮Led灯(2440)

    1.gboot.lds OUTPUT_ARCH(arm)ENTRY(_start)SECTIONS {    . = 0x30008000;        . = ALIGN(4);    .text ...

  6. JavaScript的Dom操作

    两个练习: 1.两个表单里面的数据相互移动: <style type="text/css"> select { width: 100px; position: rela ...

  7. php二维数组相同id的数量相加

    数组样式 $arr = array( array( , , , ), array( , , , ), array( , , , ), array( , , , ), ); 处理办法 $item=arr ...

  8. UITextField set placeholderColor and UITextField set clearButton Image

    self.usernameTextField.tintColor = [UIColor whiteColor]; [self.usernameTextField setValue:UIColorFro ...

  9. javascript闭包

    关于闭包的介绍,推荐两篇文章: 廖雪峰javascript教程-闭包: http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a ...

  10. vim 标签页 tabnew 等的操作命令

    对于vim这个 ide来说, 单纯的用 多子窗口 来操作, 感觉还是不够的, 还要结合标签页tab pages来,才能更好的操作. 所有关于标签 的 命令行 命令都是 以 :tab开始的, 可以用ta ...