表格

表格由 <table> 标签来定义。

每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。

字母 td 指表格数据（table data），即数据单元格的内容。

数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

例如，要画出如下表格：

分析：　1.分析行，每行是一个tr标签

　　　　2.从第一行开始，看每行有几个单元格，几个单元格就是几个td标签

　　　　3.如果是占用空间为1行1列，省略行数，直接为<td></td>。

上图的代码如下

     <body>

         <table width="400" height="400" border="2">

             <!-- 第1行 -->

             <tr>

                 <td colspan="4" bgcolor="aqua"></td>

             </tr>

             <!-- 第2行 -->

             <tr>

                 <td rowspan="4" bgcolor="antiquewhite"></td>

                 <td colspan="3" bgcolor="antiquewhite"></td>

             </tr>

             <!-- 第3行 -->

             <tr>

                 <td rowspan="3" bgcolor="aquamarine"></td>

                 <td colspan="2" bgcolor="aquamarine"></td>

             </tr>

             <!-- 第4行 -->

             <tr>

                 <td rowspan="2" bgcolor="bisque"></td>

                 <td bgcolor="bisque"></td>

             </tr>

             <!-- 第5行 -->

             <tr>

                 <td></td>

             </tr>

         </table>

     </body>

2018-07-30

HTML表格-table的更多相关文章

  1. jQuery动态对表格Table进行添加或删除行以及修改列值操作

    jQuery,不仅可以以少量的代码做很多操作,而且兼容性好(各种浏览器,各种版本). 下面用jQuery动态对表格Table进行添加或删除行以及修改列值操作 1.jQuery代码 <script ...

  2. BootStrap入门教程 (二) ：BASE CSS（排版(Typography),表格(Table),表单(Forms),按钮(Buttons)）

    上讲回顾:Bootstrap的手脚架(Scaffolding)提供了固定(fixed)和流式(fluid)两种布局,它同时建立了一个宽达940px和12列的格网系统. 基于手脚架(Scaffoldin ...

  3. html表格table设置边框

    对于很多初学HTML的人来说,表格<table>是最常用的标签了,但对于表格边框的控制,很多初学者却不甚其解. 一般我们用表格的时候总会给它个border属性,比如:<table b ...

  4. css列表list、表格table

    列表list,无序列表ul,有序列表ol 1.列表项样式list-style-type 无列表默认为dist实心圆,有序列表默认为decimal阿拉伯数字(前面不带0) 其他无序列表常用none无样式 ...

  5. 表格(Table)隔行变色

    在ASP.NET的Repeater控件,实现隔行变色,是极简单的事情.因为它有ListItemType.Item和ListItemType.AlternatingItem模版.如果在普通的表格(Tab ...

  6. pre,html转义，abbr缩写，表格table

    <pre></pre>预定义文本标签pre(保留换行和空格) <sdds>对html转义 <abbr title="sddsdsds"&g ...

  7. 表格Table宽度设置无效的解决方法

    表格Table宽度设置无效的解决方法 bootstrap中使用table时发现不管用width赋值方式都无法改变table>td的宽度 解决方法: 设置table:table-layout:fi ...

  8. 2017.9.15 HTML学习总结---表格table

    2.7 表格<table>的属性: 属性  用途 width         表格宽度 height        表格高度 align         表格水平对齐 border     ...

  9. jQuery 选择表格(table)里的行和列及改变简单样式

    本文只是介绍如何用jQuery语句对表格中行和列进行选择以及一些简单样式改变,希望它可以对jQuery表格处理的深层学习提供一些帮助jQuery对表格(table)的处理提供了相当强大的功能,比如说对 ...

  10. amazeui学习笔记--css（HTML元素5）--表格Table

    amazeui学习笔记--css(HTML元素5)--表格Table 一.总结 1.基本样式:am-table:直接模块名  <table class="am-table"& ...

随机推荐

  1. Mybatis学习第一天——Mybatis的安装配置以及基本CURD操作

    1.Mybatis下载 Mybatis是开源的持久层框架,能够度jdbc进行简单的封装,但其并不是完全的ORM(Object Relational Mapping,对象关系映射),无法脱离数据库进行适 ...

  2. Incorrect string value: '\xE8\xAF\xAD\xE6\x96\x87' for column 'name' at row 1

    报错的原因就是在执行插入时对Name这个字段被赋予了错误的字符串值:’\xE4\xB8\xAD\xE6\x96\x87’ 实际上就函数里面的变量接收到的值编码格式跟它定义的不一致. 使用navicat ...

  3. Installing TensorFlow on Ubuntu

    1.安装方法有4种,官方推荐是第一种. virtualenv(官方推荐)    "native" pip    Docker    Anaconda 2.基于virtualenv的 ...

  4. 【深入理解JAVA虚拟机】第三部分.虚拟机执行子系统.2.虚拟机类加载机制

    1.概述 虚拟机把描述类的数据从Class文件加载到内存,并对数据进行校验. 转换解析和初始化,最终形成可以被虚拟机直接使用的Java类型,这就是虚拟机的类加载机制. 2.类加载顺序 类从被加载到虚拟 ...

  5. kali配置ip,更新源,更新签名

    以下是我在简单玩kali时候碰到的一些问题,然后找到的解决办法,能成功解决我当时碰到的问题,如果你有疑问或者碰到不能解决的问题可以在下面评论 ############################# ...

  6. Html 列表实现展开和收起

    HTML中,点击列表元素,在其下展开更多的小选项.不点的时候是收起来的.就是实现路由器左边的菜单那样的功能.怎么实现,知道的指点一下,谢谢了!! 最常见的方法是通过Javascript控制某标签的CS ...

  7. Codeforces 962D - Merge Equals

    链接: http://codeforces.com/problemset/problem/962/D 题意: 给出一个整数序列.选择其中最小且出现两次(或以上)的数,把最左边的两个从序列中移除,然后把 ...

  8. 安装最新版的wampserver，可以兼容php5和php7

    本文介绍的wamp是Windows+Apache+MySQL+PHP+phpMyAdmin,主要应用于开发环境[一键安装包,简单好用]. 这是运行在Windows系统下的官方安装包,可以快速的搭建属于 ...

  9. springboot多数据源的配置与使用

    转自:https://www.jianshu.com/p/34730e595a8c 之前在介绍使用JdbcTemplate和Spring-data-jpa时,都使用了单数据源.在单数据源的情况下,Sp ...

  10. 浅谈sql之连接查询

    SQL之连接查询 一.连接查询的分类 sql中将连接查询分成四类: 内链接 外连接 左外连接 右外连接 自然连接 交叉连接 二.连接查询的分类 数据库表如下: 1.学生表 2.老师表 3.班级表 表用 ...