存在即是合理的。 表格的现在还是较为常用的一种标签,但不是用来布局,常见处理、显示表格式数据。

表格的应用场景:

1 创建表格

在HTML网页中,要想创建表格,就需要使用表格相关的标签。创建表格的基本语法格式如下:

 <table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>

在上面的语法中包含三对HTML标签,分别为 <table></table>、<tr></tr>、<td></td>,他们是创建表格的基本标签,缺一不可,下面对他们进行具体地解释

 1.table用于定义一个表格。
 ​
 2.tr 用于定义表格中的一行,必须嵌套在 table标签中,在 table中包含几对 tr,就有几行表格。
 ​
 3.td /td:用于定义表格中的单元格,必须嵌套在<tr></tr>标签中,一对 <tr> </tr>中包含几对<td></td>,就表示该行中有多少列(或多少个单元格)。

注意:

 1. <tr></tr>中只能嵌套<td></td>
 2. <td></td>标签,他就像一个容器,可以容纳所有的元素

2 带表头的表格

表头一般位于表格的第一行或第一列,其文本加粗居中,如下图所示,即为设置了表头的表格。设置表头非常简单,只需用表头标签<th></th>替代相应的单元格标签<td></td>即可。

3 带标题的表格

caption 元素定义表格标题。

 <table>
<caption>我是表格标题</caption>
</table>

caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

4 带结构的表格(了解) ​

5 表格属性

tr标签属性:

 

td和th标签属性:

thead、tbody和tfoot标签属性:

6 合并单元格(难点)

跨行合并:rowspan 跨列合并:colspan

合并单元格的思想:

将多个内容合并的时候,就会有多余的东西,把它删除。 例如 把 3个 td 合并成一个, 那就多余了2个,需要删除。

公式: 删除的个数 = 合并的个数 - 1

合并的顺序 先上 先左

例子:

<table width="300" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan="3"> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table> 

7 表格嵌套

说明:完整表格结构 + 放到td标签中。

HTML——表格标签的更多相关文章

  1. H5 表格标签的其它标签

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  2. H5 表格标签基本使用

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. HTML常用标签与表格标签

    超链接标签: <a href="超链接地址" target="_blank">超链接的文字</a> _blank或new是在新网页中打开 ...

  4. 9月6日表格标签(table、行、列、表头)(补)

    一.<table> <table>代表表格标签.   <table></table> 1.width  表示表格宽度,宽度表达方式有像素和百分比两种.网 ...

  5. PHP入门 - - 06-->HTML的表格标签

    表格标签<table> <table>的属性: Align: left, center, right          (表格的)位置 Border:              ...

  6. 透明、圆角、阴影效果、背景色渐变、<a></a>去外层虚线、!!!表格标签<table>

    表格标签 <table> 代表表格 width:指表格的宽度           一种是像素 (浏览器缩小的时候出现滚动条)           一种是百分比(跟着浏览器的大小而大小) b ...

  7. HTML的表格标签

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. HTML表格标签

    table标签的用途: 在表格中放图片,或用于布局(已经淘汰掉了),存放数据 table制作过程: 1.先分析表格有多少行 2.分析有多少列 3.做好表格的基本之后再添加表格需要的一些属性 table ...

  9. html系列教程--span style 及表格标签 title video

    <span> 标签:非块状元素,用于文本描述 <style> 标签:内联样式表标签定义样式信息,必须写明type类型为text/css,建议写在head中,不是必须 demo: ...

  10. HTML表格标签的使用-&lt;table&gt;

    <html> <head> <title> 表格标签 </title> <!-- 标签名:table 定义一个表格 子标签:<caption ...

随机推荐

  1. Application.mk语法解释(转)

    转自:http://blog.csdn.net/roland_sun/article/details/46318893 Application.mk是用来描述你的应用程序需要哪些模块,以及这些模块所要 ...

  2. Java对象什么时候可以被垃圾回收?JVM的永久代中会发生垃圾回收么?

    当对象对当前使用这个对象的应用程序变得不可触及的时候,这个对象就可以被回收了.垃圾回收不会发生在永久代,如果永久代满了或者是超过了临界值,会触发完全垃圾回收(Full GC).如果你仔细查看垃圾收集器 ...

  3. Qt:代码里存在中文时带来的问题

    一.报错: 常量中有换行符 方法1: 把文本文件转化为unicode或者utf-8, 同是还要带上QString::fromLocal8Bit() 还有其他方法,感觉不靠谱 二.显示异常:乱码 QSt ...

  4. HTML5 worker计数器简单示例

    效果图: index.html var w; // 开始 function startWorker() { if (typeof (Worker) !== "undefined") ...

  5. K8S集群安装部署

    K8S集群安装部署   参考地址:https://www.cnblogs.com/xkops/p/6169034.html 1. 确保系统已经安装epel-release源 # yum -y inst ...

  6. IDEA工具,配置相关笔记

    1.修改背景颜色(黑/白)File -> settings -> Editor -> Color Scheme -> General -> (Scheme选择Defaul ...

  7. Dart编程实例 - 相等和关系操作符

    Dart编程实例 - 相等和关系操作符 void main() { var num1 = 5; var num2 = 9; var res = num1>num2; print('num1 gr ...

  8. go变量和声明

    go变量和声明 这将是美好的开始和结束,通过写下x = 4,我们查看变量,可以说声明了一个变量并赋值,但是很不幸,go语言变量声明和赋值比这更复杂.通过学习一些简单的示例开始学习变量声明和赋值.然后在 ...

  9. delphi 给程序加托盘图标

    一些程序运行时,会在桌面的右下角显示一个图标(任务栏的右边),这类图标称为 托盘.托盘是一个PNotifyIconDataA类型的结构,要增加托盘图标其实就是对结构PNotifyIconDataA的操 ...

  10. linux python3 venv 虚拟环境报错 [-Im', 'ensurepip', '--upgrade', '--default-pip']' returned non-zero exit status 2.

    解决办法: 先创建没有pip的虚拟环境,然后启动虚拟环境后,再安装pip 办法一: 亲测失败了... python3 -m venv --without-pip py36env 办法二 sudo ap ...