010day（表格及其相关属性）

最新推荐文章于 2023-09-26 21:56:11 发布

w296932099

最新推荐文章于 2023-09-26 21:56:11 发布

阅读量65

点赞数

分类专栏：如何从一个前端小白逆袭成为大佬

本文链接：https://blog.csdn.net/w296932099/article/details/119045934

版权

如何从一个前端小白逆袭成为大佬专栏收录该内容

38 篇文章 2 订阅

订阅专栏

一、表格

1.表格是什么：页面中用来显示数据

2.课表/日历/成绩单/oa系统

3.语法结构：

<table>

<tr>

...

</tr>

...

但是：如果没有加特殊的属性每一行中的单元格数量必须一致

</table>

4.表格的属性

加到table里面的：border设置边框 cellspcaing边框与边框之间的距离【默认为1px】 width/height align【设置table的位置】

bgcolor【背景颜色】 cellpadding【文字与边框之间的距离】

加到tr里面的：height="200px" align="center" bgcolor="yellow" 需要注意从te中无法设置宽度

加到td里面的:width="300px" height="300px" align="left" bgcolor="green"

colspan/rowspan

colspan:跨列成行在同一行中进行操作，他后面的属性值等于删除掉【同一行中的】的单元个数+1

rowspan:跨行成列在同一列中进行操作，他后面的属性值等于删除掉【同一列中的】的单元个数+1

二、表格相关的css属性

1、border-spacing:20px;单元格间距单元格间距(该属性必须给table添加) 表示单元格边框之间的距离，不可取负值

2、border-collapse:separate/collapse;合并相邻单元格边框合并相邻单元格边框 (该属性必须给table添加) separate(边框分开)默认值； collapse(边框合并)

3、empty-cells:show/hide;无内容时单元格的设置定义当单元格无内容时，是否显示该单元格的边框区域；show：显示；hide：隐藏；

4、table-layout:auto/fixed;是否固定单元格的宽度fixed：固定宽，没有定义时则宽度会平均分配，高度则会随内容变化

5、caption-side:top/right/bottom/left表格标题位置left,right位置只有火狐识别，top,bottom IE7上版本支持，ie7以下版本不支持其它属性值，只识别top

三、表格相关的HTML标签和属性

1、表格标题<caption>标题内容</caption>

2、表格列分组

意义：A.<colgroup span="数字"></colgroup>

B.<col span="数字" />

C.如果用rules添加组分割线的话，列分组必须用colgroup

说明：A.col和colgroup元素会根据从左到右的顺序依次对数据表格进行分组

B.span属性显示指定相邻几列组成一组，span属性值默认为1

3、表格行分组

A.<thead></thead> 表头

B.<tbody></tbody> 表体

C.<tfoot></tfoot> 表尾

4、添加组分隔线rules="groups/rows/cols/all/none"必须给table标签添加属性

四、做表格基本思路如下表

附注1、

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<tr>

<!-- <td></td>

</tr>

<tr>

</tr>

<tr>

<!-- <td></td>

</tr>

<tr>

<!-- <td></td>

</tr>

<tr>

<!-- <td></td>

</tr>

<tr>

<!-- <td></td>

</tr>

</table>

</body>

</html>

附注2、

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<table>

</colgroup>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

附注3、

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

thead{

background-color: red;

}

tfoot{

background-color: green;

}

table,th,td{

border: 1px solid yellowgreen;

border-collapse: collapse;

}

</style>

</head>

<body>

<table>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

<tfoot>

<tr>

<td colspan="4">拼搏到无能为力，奋斗感动自己，加油小老弟小老妹们</td>

</tr>

</tfoot>

</table>

</body>

</html>

附注4、

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

table{

border-color: #FBBFD9;

}

td{

color: #FBBFD9; font-weight: 900;

}

</style>

</head>

<body>

</tr>

</tr>

</tr>

</tr>

</tr>

</table>

</body>

</html>

附注5、

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</tr>

<td colspan="3" width="230px">维修项目及更换配件</td>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

<tr>

<td colspan="4">配件费用小记：</td>

<td colspan="5">工时费用小记:</td>

</tr>

</table>

</tr>

</table>

</body>

</html>

附注6、

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.qu{

border-right: none;

}

.ququ{

border-left: none;

}

</style>

</head>

<body>

</tr>

</tr>

</tr>

</tr>

<td>市内交通费</td>

</tr>

</tr>

</tr>

</tr>

<td class="ququ" colspan="8">千   百   

十   元

   分💰：</td>

</tr>

</table>

</body>

</html>

w296932099

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
010day（表格及其相关属性）

一、表格1.表格是什么：页面中用来显示数据2.课表/日历/成绩单/oa系统3.语法结构：<table><tr><td></td>...</tr>...但是：如果没有加特殊的属性每一行中的单元格数量必须一致</table>4.表格的属性加到table里面的：border设置边框 cellspcaing边框与边框之间的距离【默认为1px】 width/height align【设置tabl
复制链接

扫一扫