表格简单介绍

0tx 2018-02-19


表格：table
thead：表头
tbody：主体内容
tfoot：表尾
tr：表格的一行
td：表格的一列。
th：表格的一列，但是此列字体会加粗、居中。
虽然在表格中区分了表头、主体和尾部，但是在实际使用时就省略了，直接写tr、td和th
如果没有写thead、tbody、tfoot，那么浏览器会自动添加tbody

border：定义表格的边框宽度，直接写在table标签上，直接写数字即可。
td/th会有一个默认的padding,大小为1

table在没有定义宽度的情况下，默认由内容撑开；写了宽高后每一列平分。
如果当前列某一个单元格(td/th)宽度变化，则整列都会发生变化。

margin无法实现表格单元格之间的间隔。


表格样式：
border-collapse：边框合并。
    取值：collapse-->合并
         separate(默认值)-->分离。在表格定义了边框时会出现双边框现象。

单元格属性：
colspan：单元格横跨的列数。
rowspan：单元格纵跨的行数。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			table{
				border-collapse: collapse;
				width: 800px;
				height: 200px;
			}
			td,th{
				padding: 0;
			}
		</style>
	</head>
	<body>
		<table border="1">
			<tr>
				<th>周一</th>
				<th>周二</th>
				<th>周三</th>
				<th>周四</th>
				<th>周五</th>
			</tr>
			<tr>
				<td colspan="2">张三</td>
				<td rowspan="2">李四</td>
				<td>王五</td>
				<td>赵六</td>
			</tr>
			<tr>
				<td>张三</td>
				<td>李四</td>
				<td>王五</td>
				<td>赵六</td>
			</tr>
		</table>
	</body>
</html>

    效果如下所示：
   表格简单介绍
 


    

0tx

0tx

相关推荐

js实现表格单列按字母排序

本文实例为大家分享了js实现表格单列按字母排序的具体代码，供大家参考，具体内容如下。<link href="../css/表格数据搜索.css" rel="stylesheet">. <input

移动开发与培训 / 0评论 2020-08-16

js实现表格数据搜索

<input type="text" placeholder="搜索..." id="myInput" onkeyup="myFunction()">

ReunionIsland / 0评论 2020-08-16

表格标签的使用

在HTML网页中，要想创建表格，就需要使用表格相关的标签。表格包含三对HTML标签，分别为<table></table>、<tr></tr>、<td></td>，他们是创建表格的基本标

行吟阁 / 0评论 2020-08-09

HTML5标签2

表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。在HTML网页中，要想创建表格，就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...

gufudhn / 0评论 2020-08-09

Asp.net Form 动态产生表格核心后台代码

<asp:Button ID="btnProTable" runat="server" Text="产生表格" />

swiftwwj / 0评论 2020-07-05

HTML-表格

表格由<table>标签来定义，其中行由<tr>标签定义，列由<td>标签定义。快速写行和列的方法为：eg:6行7列可以写成：tr*6>td*7然后按enter键。表头由<th>标签定义，设置行高的属性

pythonclass / 0评论 2020-06-25

html学习

图像标签　　<img src="图像url" alt= “图像显示不出来显示此文字” title=“鼠标在图片上提示的文字” width="宽度" heigth="heigth" borde

nercon / 0评论 2020-06-14

通过css润色html表格

--th和td都是单元格，th里的内容会默认加粗并且居中 -->. 这样是不是高档了很多。

coulder / 0评论 2020-06-09

html table表格斜线表头的实现方法总汇

在html中给table加一个斜线的表头有时是很有必要的，但是到底该怎么实现这种效果呢？总结了以下几种方法：。其实了解css3的朋友，一看到这个效果，脑子中瞬间出现的就是transform这个属性，是的，这个确实可以，也很简单，就是有一个问题要注意浏览器的

玫瑰小妖 / 0评论 2020-06-07

2020/6/3 JS 对表格元素进行增删改操作和事件监听

　　insertRow：在指定索引位置插入一行。　　createCaption()：为该表格创建标题。　　deleteRow：删除表格中index索引处的行。　　使用返回值改变HTML元素的默认行为：HTML元素大都包含了自己的默认行为，例如：超链接、提交

pythonclass / 0评论 2020-06-03

html table表格标签内容如何居中显示？表格的align属性的用法介绍

本篇文章主要的介绍了关于HTML 表格table标签的居中使用，还有关于align属性在table表格标签中的使用方法，可以帮助表格对齐和表格中的文本对齐。接下来让我们来看看这篇文章吧。align 属性规定表格相对于周围元素的对齐方式。通过运用align属

lyg0 / 0评论 2020-05-28

基于JavaScript实现表格隔行换色

我们商品分类的信息太多，如果每一行都显示同一个颜色的话会让人看的眼花，为了提高用户体验，减少用户看错的情况，需要对表格进行隔行换色。table对象 集合 cells[]：返回包含表格中所有单元格的一个数组。确定事件: 文档加载完成 onload 2. 事件

huzijia / 0评论 2020-05-08

HTML &lt;thead&gt; 标签

<thead> 标签仅得到所有主流浏览器的部分支持。<thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。thead 元素应该与tbody和tfoot元素结合起来使用。它们的出现次序是：thead、tfoot

行吟阁 / 0评论 2020-05-11

HTML &lt;tfoot&gt; 标签

<tfoot> 标签仅得到所有主流浏览器的部分支持。<tfoot> 标签定义表格的页脚。tfoot 元素应该与thead和tbody元素结合起来使用。thead 元素用于对 HTML 表格中的表头内容进行分组，而 tbody 元素用

黎豆子 / 0评论 2020-05-11

HTML &lt;tbody&gt; 标签

<tbody> 标签仅得到所有主流浏览器的部分支持。<tbody> 标签表格主体（正文）。该标签用于组合 HTML 表格的主体内容。tbody 元素应该与thead和tfoot元素结合起来使用。它们的出现次序是：thead、tfoo

玫瑰小妖 / 0评论 2020-05-11

HTML表单

--表格头，内容居中，加粗显示-->. <input>标签:<input type="类型属性" name="名称" ……<div>标签是一个区块容器标记，<div>&

HSdiana / 0评论 2020-05-10

el-table 表格循环多张图片

-- 图片有多张的情况 先分隔为数组 然后利用v-for 遍历得到 src -->. <el-image style="width: 50px; height: 50px; margin-right: 10px;" :sr

黎豆子 / 0评论 2020-05-08

html表格显示

<table border="1" height="300" width="300"> <tr> <td>朱仁贵</td>

haocxy / 0评论 2020-04-11

demo48-表格标签

th:表头,t是table的意思,h是header的意思.所以th合起来就是表格头标签.简称表头标签

黎豆子 / 0评论 2020-03-28

demo49-表格合并

<!DOCTYPE html>. width: 1000px;height: 50px;border: 1px solid black;border: 1px solid black;<!--表格合并-->. <!--. &l

haocxy / 0评论 2020-03-28

table边框表头单元格空间合并等设置

表格由<table>标签来定义,每个表格均有若干行，每行被分割为若干单元格。字母 td 指表格数据，即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。HTML 表格和边框属性,如果不定义边框属性，表格将不显示

HSdiana / 0评论 2020-03-28

第八节 HTML表格

<td rowspan="5" width="20%"><img src="图片1.png" alt="人物"></td>

lyg0 / 0评论 2020-03-05

HTML基础标签图片文本超链接列表表格表单介绍

图片路径地址分为本地图片和网络图片，本地图片中分为绝对路径和相对路径，相对路径属于平级关系，如果图片相对于上一级，表现形式为"../"在<imgsrc="图片路径地址"alt="属性名" t

行吟阁 / 0评论 2020-02-12

1.8、html表格

传统的布局方式就是使用table来做整体页面的布局，布局的技巧归纳为如下几点：。border-collapse:collapse 设置边框合并，制作一像素宽的边线的表格

行吟阁 / 0评论 2020-02-03

jQuery---表格删除案例

$("#j_tb").empty();});$(this).parent().parent().remove();});$(‘<tr> <td>jQuery111</td> <td>传智播

黎豆子 / 0评论 2020-02-01

HTML基本标签（下）

表格主要用于显示，展示数据，因为它可以让数据显示的非常完整，提高数据的可读性，特别是后台展示数据的时候，能够熟练地运用表格就显得非常重要。一个清爽简约的表格能够把繁杂的数据显示得很有条理。<table> <tr>

pythonclass / 0评论 2020-01-23

table sorter插件，对表格进行排序

table sorter插件可以将带有THEAD和TBODY标签的标准HTML表转化成可排序表，而无需刷新页面。Table sorter可以成功地解析多种类型的数据并进行排序。

srchange / 0评论 2013-05-31

JS表格的动态操作完整示例

本文实例讲述了JS表格的动态操作。分享给大家供大家参考，具体如下：。ta.deleteRow; //进行删除操作时，我们用父类对象删除子类对象，innerHTML是对其内部的内容进行重写。--align可以直接把整个表格居中-->

madewobadan / 0评论 2020-01-13

表格树形结构

ztree插件不是树形的；领导说layui 树形结构，可以参考下。搜索看了下html结构，是通过margin-left来区分层级的；所有节点都是同级的tr；通过javascript配合父级菜单的span图标进行控制展开和折叠；折叠式隐藏作为子级的tr；展开

swiftwwj / 0评论 2020-01-08

JS动态添加删除表格数据

<!

pythonclass / 0评论 2019-12-29

HTML表格模板

HTML表格1.<table>标签：声明一个表格，它的常用属性如下：border属性：定义表格的边框，设置值是数值cellpadding属性：定义单元格内容与边框的距离，设置是数值cellspacing属性：定义单元格与单元格之间的距离，设置值

玫瑰小妖 / 0评论 2019-12-23

前端杂项

display：none|inline|block| list-item |inline-block|table| inline-table | table-caption | table-cell | table-row | table-row-grou

qsdnet我想学编程 / 0评论 2019-12-16

JS实现控制表格行内容垂直对齐的方法

本文实例讲述了JS实现控制表格行内容垂直对齐的方法。分享给大家供大家参考。I need a long text for this example.希望本文所述对大家的javascript程序设计有所帮助。

eboyhaining / 0评论 2015-03-30

表格中的colspan colspan

<!DOCTYPE html>. <meta name="viewport" content="width=device-width, initial-scale=1.0">. <met

swiftwwj / 0评论 2019-12-06

HTML表格中各元素标签的位置对style属性有效性的影响

开发了一个动态表格制作程序，用的是谷歌浏览器。发现几个现象，记录如下：。</tfoot> //技术文档说，要放在这里。但<thead></thead>里面的表头宽度不受影响。如果删除<tbody>和</

nercon / 0评论 2019-12-06

HTML基础——表格的应用

　　每个表格数据由 td 标签开始。cellspacing:是表格里单元格之间的距离。cellpadding:表格里单元格内的空白部分。bgcolor:规定表格的背景颜色。规定表格现象对周围元素的对齐方式。<h4>表格边框属性：设置为borde

玫瑰小妖 / 0评论 2019-12-07

基于templatejs的html片段动态生成

本人由于一直从事。开发，因此在页面中编写。就越来越多，随着。的流行，在页面中以。）页面呈现，也越来越多样和复杂。在以前，我一直是通过如下代码创建一个表格。在单元格内插入内容：。上述代码看上去不是很复杂，但是在实际应用中，要想适用千变万化的表格展现形式，就。

勤能补拙孰能生巧 / 0评论 2013-09-11

Js 动态修改表格内容、对齐表格内的内容

Js 动态修改表格内容、对齐表格内的内容，主要是控制表格的TableRow对象属性，使其左对齐、右对齐、向上对齐等，大家可以根据代码进行扩展，例如学习添加向下对齐等。<input type="button" onclick=&qu

勤能补拙孰能生巧 / 0评论 2014-01-28

php+layui数据表格实现数据分页渲染代码

<button class="layui-btn layui-btn-xs layui-btn-primary spu_detail" artnum="{{d.artnum}}" value="{{d

别告诉我有Bug / 0评论 2019-10-26

HTML中的表格标签

表格是网页制作中使用最多的工具之一，在制作网页时，使用表格可以更清晰地排列数据。但是在实际制作过程中，表格更多用在网页布局的定位上。这是因为表格在文本和图像的位置控制方面都有很强的功能。表格由行、列、和单元格3部分组成，一般通过3个标记来创建，分别是表格标

玫瑰小妖 / 0评论 2019-11-21

HTML表格的使用 与 跨行跨列

<table> 　　<tr> 　　　　<th>第一个单元格的内容</th> 　　　　<th>第二个单元格的内容</th> 　　</tr&g

玫瑰小妖 / 0评论 2019-11-10

CSS 表格

使用 CSS 可以使 HTML 表格更美观。这是因为表和th/ td元素有独立的边界。为了显示一个表的单个边框，使用 border-collapse属性。Width和height属性定义表格的宽度和高度。表格中的文本对齐和垂直对齐属性。设置表格标题的位置这

swiftwwj / 0评论 2019-11-10

HTML中的table标签制作表格

HTML中有一个重要的标签table,常用于构建表格，如果你要用HTML做一张课表，那么它的table标签就可以大显身手了。下面分享出一份某小学生课表的完整HTML代码，不足的地方欢迎指正！<td rowspan="3" bgco

nercon / 0评论 2019-11-08

Ext.Net GridPanel (属性|方法|配置|详细介绍)

2、Ext.NET.Column主要配置项：id：列idheader：表头文字dataIndex：设置列与数据集中数据记录的对应关系，值为数据记录中的字段名称。

pythonclass / 0评论 2019-11-07

js动态表格

用js实现动态增加表格行数。

HSdiana / 0评论 2019-11-04

jQuery实现表格隔行换色

<table id="tbl" border="1" border-collapse="collapse" align="center" cellspacing=&quo

gunnery / 0评论 2018-09-01

免费表格手机版的4大人性化特点，友好指数爆表！

世界已经改变，一切都在移动化。移动应用的发展让移动办公成为可能，人们可以借助手机、平板电脑等终端，突破时间空间的限制。下面我们来看看免费表格手机版有哪些人性化的特点。在用户中评价比较高的FineReport，它的免费表格手机版采用原生渲染技术，专为移动处理

WebVincent / 0评论 2019-10-30

HTML常用标签三

表格主要用于显示、展示数据，因为他们可以让数据显示的非常规整，可读性非常好，特别是后台展示数据的时候，能够熟练运用表格就先的很重要，一个清爽简约的表格能够把繁杂的数据表现的很有条理。<ol> </ol> 中只能嵌套<li>

pythonclass / 0评论 2019-10-28

初始HTML_表格

<td>姓名</td><td></td><td>性别</td><td></td><td></td><td></td&g

HSdiana / 0评论 2019-10-23

原生PHP和MYSQL练习登陆验证和查询数据到表格

$sql="select * from admin where username=‘".$username."‘";echo "<table border=1><tr><td&

玫瑰小妖 / 0评论 2019-10-21