前端学习笔记--table表格的使用

最新推荐文章于 2024-08-01 11:11:00 发布

小胡同的诗

最新推荐文章于 2024-08-01 11:11:00 发布

阅读量4.5k

点赞数 2

分类专栏：前端学习

本文链接：https://blog.csdn.net/calculate23/article/details/88623487

版权

前端学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前言

表格，顾名思义就是通过语法画出像excel那样的表格，只不过html中表格除了可
以嵌套文字，还可以嵌图片、链接等等，有一些类似于商品的布局运用了表格
（那种在前端开发中似乎形容成盒子，很形象，不过这个盒子可以装各种各样的
东西）。其实个人理解，表格应该是应用在各种不同元素之间的排版！强迫症的
一大福音啊，不然让攻城狮调这种类似于绝对布局的每个数值的话...细思极恐。

其实表格就是在页面上的一个行向量容器

语法笔记

通过<table> ... </table>标签绘制表格
1，在这个标签中border可以设置表格边框的粗细，默认是0，相当于只有一条线。
2，height,width设置表格高度和宽度。
3，bordercolor设置边框颜色，默认黑色好像。
4，align设置整个表格在页面中的对齐方式，left、center、right。
5，bgcolor设置表格的背景颜色
6，background设置表格的背景图片，常用！

通过<tr> ... </tr>来绘制表格的行属性(行标签)
表格能设置的各种属性外（语法也一样）align，valign水平位置，垂直位置（top、middle、bottom）

通过<td> ... </td>table data,其实就是每一行中的各个格子的内容
同样的，他也能够设置各种背景宽、高，还有一个很重要的东西：colspan设置该格子的水平跨度，可以理解成合并单元格，rolspan设置该格子的垂直跨度，相当于纵向的合并单元格。
如果行中设置了背景，单元格又设置了，以单元格的为准，就近原则…（Ps：话说英语是不是也有这东西（就近原则）来着？）

通过<th> ... </th>标签绘制表格的表头，自动加粗。当然那些通用的属性这个标签也能用。

通过cellpadding，cellspacing来设置单元格的内边距和单元格之间的间距

通过<caption>...</caption>设置标题同样的也可以设置是放在表头还是底部

html中还规定了<thead>、<tbody>、<tfoot>用来统一的设置表格属性，以免更改困难。相当于开个全局变量。
value1水平对齐方式
color_value颜色
value2垂直对齐方式

标签	描述
align	水平对齐方式
valign	垂直对齐方式
bgcolor	设置背景颜色
background	设置背景图像
width	宽度
height	长度
rowspan	水平跨度，水平合并单元格
colspan	垂直合并单元格

#### 以上是利用html画的表格

<table align="center">
	<tr align="center">
		<th>标签</th>
		<th>描述</th>
	</tr>
	<tr align="center">
		<td>align</td>
		<td>水平对齐方式</td>
	</tr>
	<tr align="center">
		<td>valign</td>
		<td>垂直对齐方式</td>
	</tr>
	<tr align="center">
		<td>bgcolor</td>
		<td>设置背景颜色</td>
	</tr>
	<tr align="center">
		<td>background</td>
		<td>设置背景图像</td>
	</tr>
	<tr align="center">
		<td>width</td>
		<td>宽度</td>
	</tr>
	<tr align="center">
		<td>height</td>
		<td>长度</td>
	</tr>
	<tr align="center">
		<td>rowspan</td>
		<td>水平跨度，水平合并单元格</td>
	</tr>
	<tr align="center">
		<td>colspan</td>
		<td>垂直合并单元格</td>
	</tr>	
</table>

实验代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Table</title>
</head>
<body>
<table height="260" border="" width="600" cellspacing="0" align="center" cellpadding="">
    <caption>水果订单表</caption>
    <tr>
        <th >水果</th>
        <th>价格</th>
        <th>数量</th>
    </tr>
    <tr background="img/apple.JPG">
        <td>苹果</td>
        <td>￥6.50/斤</td>
        <td>2</td>

    </tr>
    <tr>
        <td>香蕉</td>
        <td>￥3.50/斤</td>
        <td>10</td>
    </tr>
    <tr>
        <td align="right">合计</td>
        <td colspan="2" align="right">￥48</td>
    </tr>
</table>
</body>
</html>