表格

表示一种格式化的数据，如课程表，银行对账单... ...

在网页中，使用 table 创建一个表格。

html代码：

<!doctype html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>表格</title>

        <link rel="stylesheet" type="text/css" href="css/table.css" />

    </head>

    <body>

        Hello Web!`    <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        可以发现：

            table 是<b>块元素</b>，独占一行。

        <table id="tb_one">

            <tr>

                <td>第1行，第1格</td>

                <td>第1行，第2格</td>

                <td>第1行，第3格</td>

            </tr>

            <tr>

                <td>第2行，第1格</td>

                <td>第2行，第2格</td>

                <td>第2行，第3格</td>

            </tr>

            <tr>

                <td>第3行，第1格</td>

                <td>第3行，第2格</td>

                <td>第3行，第3格</td>

            </tr>

        </table>

        <hr />

        就算某个格子是空的，也不会被已有格子占据。

        <table id="tb_two">

            <tr>

                <td>第1行，第1格</td>

                <td>第1行，第2格</td>

                <td>第1行，第3格</td>

            </tr>

            <tr>

                <td>第2行，第1格</td>

                <td>第2行，第2格</td>

            </tr>

            <tr>

                <td>第3行，第1格</td>

                <td>第3行，第2格</td>

            </tr>

        </table>

        <hr />

        需要告诉浏览器，    <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        colspan是<b>横向合并单元格</b>    <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        rowspan是<b>纵向合并单元格</b>    <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        且是<b>往右边</b>，<b>往下边</b>的单元格合并。

        <table id="tb_three">

            <tr>

                <td>第1行，第1格</td>

                <td>第1行，第2格</td>

                <td rowspan="2">第1行，第3格</td>

            </tr>

            <tr>

                <td>第2行，第1格</td>

                <td>第2行，第2格</td>

            </tr>

            <tr>

                <td>第3行，第1格</td>

                <td colspan="2">第3行，第2格</td>

            </tr>

        </table>

    </body>

</html>

css代码：

@charset "utf-8";

*{

    margin: 0px;

    padding: 0px;

}

body{

    background-color: #3e4e54;

}

table{

    margin: 0px auto;

    width: 40%;

    border: 1px red solid;

}

#tb_one td{

}

#tb_two td{

    border: 1px black solid;

}

#tb_three td{

    border: 1px black solid;

}

__x__(39)0909第五天__ 表格 table的更多相关文章

  1. __x__(40)0909第五天__表格 table 的 css 样式 美化

    如果就向下面的代码那样,不写 tbody , 则浏览器自添加 tbody , 并将所有的 tr 移入 tbody 意味着 tr 并非 table 的子元素,而是 tbody 的子元素. 所以 以后编写 ...

  2. __x__(41)0909第五天__长表格

    长表格 银行流水,表格很长... 则需要将表格分为 表头 thead ,主体数据 tbody , 表格底部 tfoot 三个标签无顺序要求,易于维护:thead → tfoot → tbody 如果没 ...

  3. __x__(37)0909第五天__背景图按钮

    link,hover,active三种按键状态,存放三张图片 缺点: 资源只有在被使用时,才会被加载. 页面第一次加载时,会出现短暂的延迟闪烁,造成一次不佳的用户体验. 图片整合技术 CSS-Spri ...

  4. __x__(38)0909第五天__雪碧图的制作

    1. 用ps打开目标图片若干. 2. 调整合适的画布大小. 3. 将图片拖曳到一张里. 4. 存储为Web所用格式,选择 png24 .

  5. __x__(29)0908第五天__高度塌陷 问题

    高度塌陷 在文档流中,父元素的高度默认是被子元素撑开的. 但是当为 子元素 设置 float 时,子元素会完全脱离文档流,无法再撑开父元素,导致父元素高度塌陷...以致于布局混乱 变成 BFC块级格式 ...

  6. __x__(30)0908第五天__导航条的练习 <div>版本

    效果图:  html源代码: <!doctype html> <html> <head> <meta charset="utf-8" /& ...

  7. __x__(31)0908第五天__导航条的练习 <ul> 版本

    效果图:  html代码: <!doctype html> <html> <head> <meta charset="utf-8" /&g ...

  8. __x__(34)0908第五天__ 定位 position

    position 定位 指将原始摆放到页面的任意位置. 继承性:no 默认值:static        没有定位,原始出现在正常的文档流中 可选值: static :    默认值,元素没有开启定位 ...

  9. __x__(35)0908第五天__ 层级 z-index

    如果三个 div 全部设置 position: absolute; 绝对定位,且未设置 z-index,  则从代码结构上    下面的元素 会盖住 上面的元素. z-index 层级: 通过 z-i ...

随机推荐

  1. solr的域

    solrhom相当于存放数据的地方,里面一个个文件相当于数据库,每个数据库里面有两个文件夹,一个data,一个conf,conf下有一个schema.xml文件,配置域,相当于表的字段. solr中内 ...

  2. 第六节：SignalR完结篇之依赖注入和分布式部署

    一. SignalR中DI思想的应用 DI,即依赖注入,它是一种不负责创建其自己的依赖项对象的一种模式,通常用来降低代码之间的耦合性,广泛应用于架构设计,是必不可少的一种思想. 下面结合一个需求来说一 ...

  3. 利用git提交代码

    一.首先需要下载git 查看电脑是否安装git,打开终端,输入git,回车如果输出如下,则代表已安装了git 如果未安装,则会输出: 按照提示输入:sudo apt-get install git即可 ...

  4. Beamer中左边画图, 右边文字解释

    \begin{columns} \column{.4\textwidth} \begin{figure} \centering % Requires \usepackage{graphicx} \in ...

  5. ASP.NET Web API 2 之路由配置

    Ø  简介 ASP.NET Web API 路由配置也是必须掌握的技术点之一,要真正的完全掌握和理解它也是需要一定的过程的.不过,在平常的开发过程中,对它有基本的了解就足够了.因为我们主要关注点并不在 ...

  6. luogu 2154 离散化+杨辉三角+树状数组

    将纵向固定,每次在横向找两个点,计算其中间墓地的贡献答案,离散化后同一行的预处理个数, 树状数组内存储C[up[i]][k] * C[down[i][k] 的值,每次更新时 down[横坐标]++; ...

  7. windows的git的安装和配置

    下载并安装git(安装过程中采用默认选项) 进入gitbash(gitbash集成了windows和linux的命令) 使用git --version查看是否安装成功: 用vim .gitconfig ...

  8. 「luogu2486」[SDOI2011] 染色

    https://www.luogu.org/problemnew/show/P2486 轻重链剖分后,问题转化为一个链上的问题: 线段树维护区间内的颜色段数量,左端点.右端点的颜色: 线段树注意事项 ...

  9. 肺结节CT影像特征提取（三）——肺结节CT影像特征提取系统软件设计

    肺结节的特征提取在临床中有着重要应用,在上篇文章已经对肺结节的基本特征和CT影像特征提取算法有了介绍,提出了三类肺结节CT影像特征提取算法.本文重点介绍肺结节CT影像特征提取系统的功能介绍及使用,利用 ...

  10. 一文掌握 Linux 性能分析之内存篇

    本文首发于我的公众号 Linux云计算网络(id: cloud_dev),专注于干货分享,号内有 10T 书籍和视频资源,后台回复「1024」即可领取,欢迎大家关注,二维码文末可以扫. 前面我们已经学 ...