一、table表格的完整写法

<!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8">

	<title>title</title>

</head>

<body>

	<!-- 一个table表格 -->

	<table>

		<!-- 表头部分thead -->

		<thead>

			<!-- 表头行tr -->

			<tr>

				<!-- 表头的列th -->

				<th></th>

				<th></th>

				<th></th>

				<th></th>

			</tr>

		</thead>

		<!-- 表格内容部分tbody -->

		<tbody>

			<!-- 表格内容的第一行tr -->

			<tr>

				<!-- 列td -->

				<td></td>

				<td></td>

				<td></td>

				<td></td>

			</tr>

			<!-- 表格内容的第二行tr -->

			<tr>

				<!-- 列td -->

				<td></td>

				<td></td>

				<td></td>

				<td></td>

			</tr>

			<!-- 表格内容的第三行tr -->

			<tr>

				<!-- 列td -->

				<td></td>

				<td></td>

				<td></td>

				<td></td>

			</tr>

		</tbody>

	</table>

</body>

</html>

　　

二、表格标签的简写方式

<!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8">

	<title>title</title>

</head>

<body>

	<!-- 一个table表格 -->

	<table>

		<!-- 表头部分tr th -->

		<tr>

			<th></th>

			<th></th>

			<th></th>

		</tr>

		<!-- 内容部分tr td -->

		<tr>

			<td></td>

			<td></td>

			<td></td>

		</tr>

		<!-- 内容部分tr td -->

		<tr>

			<td></td>

			<td></td>

			<td></td>

		</tr>

		<!-- 内容部分tr td -->

		<tr>

			<td></td>

			<td></td>

			<td></td>

		</tr>

	</table>

</body>

</html>

　　

三、table的属性

属性 值 描述
width px、% 规定表格的宽度。
height px、% 规定表格的高度。
align left、center、right 规定表格相对周围元素的对齐方式。
bgcolor rgb(x,x,x)、#xxxxxx、colorname 规定表格的背景颜色。
background url 规定表格的背景图片。
border px 规定表格边框的宽度。
cellpadding px、% 规定单元格边框与其内容之间的空白。
cellspacing px、% 规定单元格之间的空隙。

四、td的属性

表格中除了行元素以外，还有单元格，单元格的属性和行的属性类似。td和th都是单元格。

属性 值 描述
height px、% 规定单元格的高度。
width px、% 规定单元格的宽度。
align left、center、right 规定单元格内容的对齐方式。
valign top、middle、bottom 规定单元格内容的垂直对齐方式。
bgcolor rgb(x,x,x)、#xxxxxx、colorname 规定单元格的背景颜色。
background url 规定单元格的背景图片。
rowspan number 规定单元格合并的行数
colspan number 规定单元格合并的列数
 
 
五、合并单元格
 
和 Excel 类似，HTML 也支持单元格的合并，包括跨行合并和跨列合并两种。

—— rowspan：表示跨行合并。在 HTML 代码中，允许我们使用 rowspan 特性来表明单元格所要跨越的行数。

—— colspan：表示跨列合并。同样的，在 HTML 中，允许我们使用 colspan 特性来表明单元格所要跨越的列数。

具体格式如下：

<td rowspan="n">单元格内容</td>

<td colspan="n">单元格内容</td>

n 是一个整数，表示要合并的行数或者列数。

注意：不论是 rowspan 还是 colspan 都是 <td> 标签的属性。

例子：将表格第 1 列的第 3、4 行单元格合并（跨行合并），将第 4 行的第 2、3 列合并（跨列合并）

<table border="1" style="border-collapse: collapse;">

      <tr>

           <th>名称</th>

           <th>官网</th>

           <th>性质</th>

      </tr>

      <tr>

            <td>C语言中文网</td>

            <td>http://c.biancheng.net/</td>

            <td>教育</td>

      </tr>

      <tr>

            <td rowspan="2">百度</td>

            <td>http://www.baidu.com/</td>

            <td>搜索</td>

      </tr>

      <tr>

            <td colspan="2">http://www.dangdang.com/</td>

      </tr>

</table>

　　

合并后的效果：

　　

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

  1. html-3,table 表格标签 tr th td caption thead tbody tfoot 的简单使用

    <!-- table border='1' style="border-collapse:collapse;" border 表格的像素宽度 border-collapse: ...

  2. table表格标签的属性

    table标签目前前端主流推荐HTML.CSS.JS三者分离,实际使用table标签的CSS样式代码还是采用table的style的属性和值来进行外观样式控制. 习惯样式: 1 table { 2 d ...

  3. h5标签基础 table表格标签

    一.表格的定义:用于有规范的显示数据. 二.基本组成: 行<tr>/列<td>/表头<caption>/表标题<th> eg: <table> ...

  4. [转]CSS如何设置html table表格边框样式

    原文地址:http://www.divcss5.com/wenji/w503.shtml 对table设置css样式边框,分为几种情况: 1.只对table设置边框 2.对td设置边框 3.对tabl ...

  5. HTML表格标签

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

  6. HTML高级标签之表格标签

    前面学习了一下HTML的经常使用标签, 今天開始高级标签之路! 一.表格标签 1.作用: 创建一张表格 2.各属性作用: <table cellspacing="0" cel ...

  7. 9月6日表格标签（table、行、列、表头）（补）

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

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

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

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

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

  10. 前端 HTML body标签相关内容 常用标签 表格标签 table

    表格标签 table 表格由<table> 标签来定义.每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由<td>标签定义).字母 td 指表 ...

随机推荐

  1. 官方直播丨“Hello Ability：从页面跳转开始”周三晚不见不散

    12月8日 19:00-20:30,Hello HarmonyOS系列课程的第四期"Hello Ability:从页面跳转开始"线上直播,将带你学习如何快速通过JS page间.A ...

  2. Spark3.0 Standalone模式部署

    之前介绍过Spark 1.6版本的部署,现在最新版本的spark为3.0.1并且已经完全兼容hadoop 3.x,同样仍然支持RDD与DataFrame两套API,这篇文章就主要介绍一下基于Hadoo ...

  3. 【笔记】问题控制与管理&故障、问题、已知错误、变更请求之间的逻辑关系&问题管理流程

    [笔记]问题控制与管理&故障.问题.已知错误.变更请求之间的逻辑关系 问题控制与管理 与故障管理的尽可能快地恢复服多的目标不同,问题管理是要防止再次发生故障 例如你制作了一个报表,用户填写了问 ...

  4. 力扣357(java)-统计各位数字都不同的数字个数（中等）

    题目: 给你一个整数 n ,统计并返回各位数字都不同的数字 x 的个数,其中 0 <= x < 10n . 示例 1: 输入:n = 2输出:91解释:答案应为除去 11.22.33.44 ...

  5. OpenKruise v1.1：功能增强与上游对齐，大规模场景性能优化

    简介:在 v1.1 版本中,OpenKruise 对不少已有功能做了扩展与增强,并且优化了在大规模集群中的运行性能.以下对 v1.1 的部分功能做简要介绍. 作者:酒祝(王思宇) 云原生应用自动化管理 ...

  6. WinUI 3 修复非打包应用运行提示缺少 Windows App Runtime 环境

    本文将告诉大家如何修复 WinUI 3 非打包的应用,在分发给到客户时,在客户的机器上运行提示缺少 Windows App Runtime 环境 在用户的机器上提示的 Windows App Runt ...

  7. 聊聊 dotnet 7 对 bool 与字符串互转的底层性能优化

    本文也叫 跟着 Stephen Toub 大佬学性能优化系列.大家都知道在 .NET 7 有众多的性能优化,其中就包括了对布尔和字符串互转的性能优化.在对布尔和字符串的转换的性能优化上,有着非常巧妙的 ...

  8. Docker镜像基本原理

    前言 Docker系列文章: 如果没有安装过Docker请参考本文最后部分,大家从现在开始一定要按照我做的Demo都手敲一遍,印象会更加深刻的,加油! 为什么学习Docker Docker基本概念 什 ...

  9. 中国ITSM研发创新之路

    沿着 itil v3+java流程引擎 的老套路没办法搞出新的名堂了,所以必须要创新1. 理论创新关于ITIL辩证分析的文章我已经写了很多,不一一赘述.我的观念是与其坐等洋和尚来洗脑宣贯,不如自己主动 ...

  10. 《最新出炉》系列入门篇-Python+Playwright自动化测试-43-分页测试

    1.简介 分页测试,这种一般都是公共的方法系统中都写好了,这种一般出现是数据展示比较多的时候,会采取分页的方法,而且比较固定,一般是没有问题的,因此它非常适合自动化测试,但是如何使用playwrigh ...