表格

表格由 <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. How to solve problems

    练习是为了帮助你成长 0.Don't panic! 1.What are the inputs? 2.What are the outputs? 3.Work through some example ...

  2. Word 2010 去除文字或段落背景色

    在复制网页文本到Word时,有时会带有网页上的背景颜色.下面采用两种方法解决这种问题,可根据不同需要进行选择. 方法一:清除样式 此种方法适用于只需要网页文字,而不想要网页任何样式信息,如字体大小,段 ...

  3. 异步nodejs代码的同步样子写法样例

    异步nodejs代码的同步样子写法样例 js的异步嵌套太深代码将不好看.尤其在用node的时候这种情况会大量出现. 这里用node连接redis,做一个用户注册的简单例子来说明.例如用redis做存储 ...

  4. Suse LAMP setup

    This page will describe the steps you have to take to install LAMP, which stands for Linux Apache Ma ...

  5. 关于单一网络适配器拓扑TMG

    单网络适配器拓扑的功能 在单网络适配器拓扑中可以实现有限的 Forefront TMG 功能,其中包括: 针对 HTTP.HTTPS 和 CERN 代理 FTP 的正向 (CERN) 代理(仅限下载) ...

  6. .net 面向对象程序设计深入]（3）UML

    1.活动图简介 定义:是阐明了业务用例实现的工作流程. 业务工作流程说明了业务为向所服务的业务主角提供其所需的价值而必须完成的工作. 业务用例由一系列活动组成,它们共同为业务主角生成某些工件. 工作流 ...

  7. Last_SQL_Error: Error 'Can't drop database 'ABC'; database doesn't exist' on query. Default database: 'ABC'. Query: 'drop database ABC'

    查看从库状态发现报错: show slave status\G; 发现是主库上删除了一个数据库,但是从库上面没有,从库执行这个语句的时候失败报错. 解决方法: 停止从库 stop slave; 创建语 ...

  8. ZT ANDROID jni 中的事件回调机制JNIenv的使用 2012-09-10 12:53:01

    ANDROID jni 中的事件回调机制JNIenv的使用 2012-09-10 12:53:01 分类: 嵌入式 android framework 里java调用native,使用JNI机制,ja ...

  9. 一直在用的一个javascript网站

    http://www.dottoro.com/ 很不错,例子丰富,解释详细,全面:非常好的参考资料站.

  10. mongoDB 固定集合(capped collection)

    固定集合(Capped Collection)是一种尺寸固定的“循环”集合,可提供高效的创建.读取.删除等操作.这里所指的“循环”的意思是,当分配给集合的文件尺寸耗尽时,就会自动开始删除最初的文档,不 ...