整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML 表格标签

格语法:

注意:颜色使用格式有三种:rgb(x,x,x) #xxxxxx colorname

<table width=""></table>指定表格的宽度大小(使用数字pixel或%)

<table border=""></table>设定表格边框大小(使用数字pixel)

<table align=""></table>表格位置,置左,为默认值

align属性:left(左对齐表格,默认值)、right(右对齐表格)、center(居中对齐表格)

<table bgcolor=""></table>设定表格的背景颜色

<table cellpadding=""></table>指定内容与网格线之间的间距(使用数字pixel或%)

<table cellspacing=""></table>指定网格线与网格线之间的距离(使用数字pixel或%)

<table border="1" cellspacing="0" cellpadding="0">

通常表格, 这两个参数都设置为 0 。

<table rules="rows"></table>规定内侧边框的哪个部分是可见的。(兼容性差)

rules属性:none 没有线条。

groups 位于行组和列组之间的线条。

rows 位于行之间的线条。

cols 位于列之间的线条。

all 位于行和列之间的线条。


<table summary="Monthly savings for the Flintstones family"></table>

定义了表格内容的摘要:

表格结构:

在使用表格进行布局时, 可以将表格划分为头部、主体和页脚, 具体如下所示:

<thead></thead>:用于定义表格的头部, 必须位于<table></table>标记中, 一般包含网页的logo和导航等头部信息。

<tfoot></tfoot>:用于定义表格的页脚, 位于<table></table>标记中<thead></thead>标记之后, 一般包含网页底部的企业信息等。

<tbody></tbody>:用于定义表格的主体, 位于<table></table>标记中<tfoot></tfoot>标记之后, 一般包含网页中除头部和底部之外的其他内容。

注意:在没有<tbody></tbody>比较的情况下, 浏览器会自动添加<tbody></tbody>标记。

<table bordercolor=""></table>设定表格边框的颜色

<table cols=""></table>指定表格的栏数

<table height=""></table>指定表格的高度大小(使用数字)

<table background=""></table>背景图片的URL=就是路径网址(默认是repeat:水平和垂直方向重复)

<table bordercolordark=""></table>设定表格暗边框的颜色

<table bordercolorlight=""></table>设定表格亮边框的颜色

<tr align=""></tr> 定义表格行的内容对齐方式。

align属性值:right、left、center、justify、char

<tr bgcolor=""></tr> 规定表格行的背景颜色。

<tr valign=""></tr> 规定表格行中内容的垂直对齐方式。

valign属性值right、left、center、justify、char

<td colspan=""></td>指定储存格合并栏的栏数(使用数字)

<td rowspan=""></td>指定储存格合并列的列数(使用数字)

<td align=""></td> 调整表格字段之左右对齐

<td bgcolor=""></td> 设定表格字段之背景颜色

<td colspan="" rowspan=""></td> 表格字段的合并

<td valign=""></td> 调整表格字段之上下对齐

<td width=""></td> 调整表格字段宽度

<td nowrap="nowrap"></td> 规定表格单元格中的内容不换行(注意只有一个值:nowrap)

<caption></caption>为表格加上标题

<caption align="">设定表格标题位置

align属性:left, center(默认值), right

<th></th> 定义表头(粗体居中)

细表格边框

<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="158" height="68">
<tr>
<td width="158" height="68"></td>
</tr>
</table>

表格创建后浏览器会自动添加<tbody>标签

lt;html>

<head>

<title>实现表格</title>

<head>

<body >

<table border="1px" align="center" width="477"><!--border为边框-->

<tr><!--行标签-->

<td >学</td ><!--表示一个单元格-->

<td >习</td >

<td >HTML</td >

</tr>

<tr>

<td >学</td >

<td >习</td >

<td >HTML</td >

</tr>

<tr>

<td >关</td >

<td >注</td >

<td >我</td >

</tr>

</table>

</body>

</html>

.表格的宽度 高度 边框 <width> <height> <border>

2.表格的背景颜色和图片 <colcr>颜色背景图片颜色可通过<background> <bgcolor>背景颜色

3.表格以及单元格内容的对齐方式 <aligh>分为<right>右对齐 <center>居中对齐 <left>左对齐

4.单元格的填充和间距 <cellspacing>间距 <cellpadding>填充

5.<font>标签可以设置字体字号以及颜色


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>优化表格</title>

</head>

<body>

<table border="0" width="395" cellpadding="0" cellspacing="0">

<tr>

<td colspan="4" background=""><font color="white"></font><b>&nbsp;&nbsp;&nbsp;&nbsp;本周畅销笔记本排名top3<font></font></b></td>

</tr>

</table>

<table>

<tr>

<td>

<table>

<tr>

<td colspan="2">京东超市/td>

</tr>

<tr>

<td colspan="2">< img src="img/1.jpg" alt=""></td>

</tr>

<tr>

<td>< img src="img/人.png" alt=""></td>

<td>< img src="img/罗宾.jpg" alt=""></td>

</tr>

</table>

</td>

</tr>

</table>

</body>

</html>