html学习(二)表格的使用(table标签)

最新推荐文章于 2024-07-05 22:38:16 发布

野比带雄

最新推荐文章于 2024-07-05 22:38:16 发布

阅读量690

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/qq_36923376/article/details/98743270

版权

本文详细介绍了HTML中标签的使用，包括,

等元素，以及如何通过CSS样式来调整表格的边框、背景颜色、宽度和高度。文章还探讨了table-layout属性在固定表格布局和自动表格布局中的作用，并给出了一个实例来展示如何创建隔行不同背景色的表格。" 108228966,7329993,LeetCode编程实践：查找算法详解与应用,"['查找算法', '数据结构', 'LeetCode', 'Python'] 摘要由CSDN通过智能技术生成

下面介绍下table标签，还有通过它实现一些功能。

一、介绍

一个 HTML 表格包括 <table> 元素，一个或多个 <tr> 、<th> 以及<td> 元素。<tr> 元素定义表格行，<th> 元素定义表头，<td> 元素定义表格单元。
更复杂的 HTML 表格也可能包括 <caption> 、<col> 、<colgroup> 、<thead> 、<tfoot> 以及 <tbody> 元素。

二、常用的属性

以下属性的使用，不作说明，均使用在css样式中，即style标签里面。如：

#name {
border:1px solid #f00;
}

属性(不要换行啊，撑开不要换行啊，撑开)	使用方法(不要换行啊，撑开不要换行啊，撑开不要换行啊，撑开)	描述
background-color	backgorund-color:#f00;	表格的背景色，一般选择器为th、td、tr、table等
border	border:1px solid #f00;	设置表格边框的线条粗细、实虚、颜色，一般选择器为table、tr、td、th
width	width:100px;	设置表格的宽度或列的宽度，一般选择器为th、td、table
height	height:100px;	设置表格的高度或行的高度，一般选择器为tr、table
table-layout	table-layout:fixed;	用来显示表格单元格、行、列的算法规则,值一般有fixed、auto,下面有详解。
border-collapse	border-collapse;	设置表格的边框是否被合并为一个单一的边框,值一般有collapse和separate(默认)，一般选择器为table，下面有详解。
border-spacing	border-spacing:10px;	设置单元格之间的间距，只有border-collapse为separate时才有效，一般选择器为table。
padding	padding:5px;	可用于table选择器(前提是separate)，也可用于th、td选择器
text-align	text-align:center;	文字在单元格的水平位置，值为left、center、right等，选择器为td、th
vertical-align	vertical-align:middle;	文字在单元格的竖向位置，值为top、middle、bottom等,选择器为td、th
<col>	<col width=“50px”>	直接在table标签的下一行书写，直接规划好每个列宽，有多少列，写多少个
rowspan	<td rowspan=“2”>	声明这个单元格独占两行(列不变，向下延伸一行)，那就意味着，下一个<tr>标签里少一个<td>才能平衡
colspan	<td colspan=“2”>	声明这个单元格独占两列(向右延伸一列)，那就意味着这个<tr>标签里少一个<td>才能平衡

下面对上面的一些属性进行详细的说明：
首先要明白的是，table表格默认的式样是怎样的，如下图：
在这里插入图片描述
纯手画(哈哈)。表格整体分两部分，一是外面的四条边(table)，二是里面的单元格(td)。但是我们一般见的表格不是这样的，所以需要加入一些css样式改变一下，让单元格之间互相消除距离、外面四条边和单元格消除距离。即：
在这里插入图片描述
给table选择器加入border-collapse:collapse;即可合并。

border
这个属性可以加在table选择器，作用于外面的四条边，可以达到修改四条边的目的。当然，四条边还可以拆分为border-left、 border-top 、border-right、 border-bottom。当单元格和四条边合并了之后，其实没有必要给table选择器设置border了，因为单元格已经撑到四条边上了。
background-color
这个属性可以应用在table选择器，整个表格都统一背影颜色；应用在tr选择器，改变一行的背影颜色；应用在td选择器上，改变单元格的背影颜色。
width/table-out
height、width可以用在table选择器上，但这一般得和td选择器进行配合，因为单元格的高、宽某一程度上也决定了表格的高、宽。下面看个例子：

<html>
<head>
<style type="text/css">
table.one
{
    
table-layout: automatic
}
/*默认值就是automatic，其实可以不必写*/
table.two
{
    
table-layout: fixed
}
</style>
</head>
<body>

<table class="one" border="1" width="100%">
<tr>
<td width="20%">1000000000000000000000000000</td>
<td width="40%">10000000</td>
<td width="40%">100</td>
</tr>
</table>

<br />

<table class

最低0.47元/天解锁文章

野比带雄

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html学习(二)表格的使用(table标签)

下面介绍下table标签，还有通过它实现一些功能。一、介绍一个 HTML 表格包括 <table> 元素，一个或多个 <tr> 、<th> 以及<td> 元素。<tr> 元素定义表格行，<th> 元素定义表头，<td> 元素定义表格单元。更复杂的 HTML 表格也可能包括 <caption...
复制链接

扫一扫