html05-创建表格

最新推荐文章于 2021-06-30 23:58:29 发布

zzj_android

最新推荐文章于 2021-06-30 23:58:29 发布

阅读量430

点赞数 1

分类专栏： Html

本文链接：https://blog.csdn.net/zzj_android/article/details/53197082

版权

Html 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.创建表格

1.1表格的基本构成--table,tr,td

表格是用于排列内容的最佳手段,在htm页面中,绝大多数页面都是使用的表格进行排版的,表格主要由表格标记<table>,行标记<tr>,单元格标记<td>

1.2表格的标题--caption

<caption>表格的标题</caption>,还可以通过caption来设置一种特殊的单元格---标题单元格,表格的标题一般是位于表格的第一行

1.3表格的表头--<th>

表格中还有一个特殊的单元格,称为表头,表头一般位于表格的第一行,用于表明该列的内容类别,用<th>标记,但是注意<th>标记的使用方法相同但是<th>标记中的内容是加粗显示的.

1.4设置表格基本属性

<table width="" height=""></table> 这个宽度和高度的值可以是具体的像素数,也可以是浏览器的百分比数

1.5设置表格的对齐方式--align

<table align="表格的对齐方式"> align参数可以是left,center,right

1.6设置表格的边框--border

代码例子:

<table align="center" width="600" border="1">
<caption>明日公司员工通讯录</caption>
<tr>
<th>姓名</th>
<th>地址</th>
<th>电话</th>
<th>电子邮件</th>
</tr>

<tr>
<td>赵志杰</td>
<td>滨州市</td>
<td>11213465477</td>
<td>8888888.com</td>
</tr>
<tr>
<td>牛志远</td>
<td>河南省</td>
<td>8956457</td>
<td>6622345.com</td>
</tr>
</table>

1.7表格内框的宽度--cellspaceing

表格的内框宽度表示的是表格内部各个单元格之间的宽度.语法:<table cellspaceing="宽度">

1.8表格内部文字与边框的宽度--cellpadding

表格内部文字会紧贴着表格的边框,这样会很拥挤,可以使用cellpadding参数来调整这一距离.注意的是这个值不能设置太大,因为这个值不单单是会对左右边框有效,同时会对上下边框有效.

1.9.表格背景的颜色--bgcolor

1.10表格的背景图像--background="背景图像的地址"

1.11表格的行的高度-height

1.12行的边框颜色--bordercolor

1.13行的背景颜色--bgcolor

1.14行文字的水平对齐方式--align <tr align="left">

2.表格的结构

2.1表格的表头标记--thead

除了表格的设计标记外,还有一些标记是用来明确表格结构的,通过对结构的设置而分别对表首和表主体以及表尾的样式进行设置,这些通过成对出现的标记应用到了表格里用于整个规划表格的行列属性,使用这个鞋标记可以对表格的一行或者是多行单元格来进行统一修改,从而省却了逐一修改单元格属性的麻烦.

2.2表格的表头标记--thead

<thead bg="颜色" align="水平对齐方式" valign="水平对齐方式"> 注意的是在<thead>标记中还可以包含<td><th><tr>而一个表元素只能有一个<thead>标记.

<body>
<table align="center" border="1" bordercolor="#FFCC99" cellpadding="3" width="550" height="180">
<caption>加联加物品管理表</caption>
<thead bgcolor="#FF0000" align="center" valign="middle">
<tr>
<th>物品名</th>
<th>类型</th>
<th>领取人</th>
<th>领取人所属部门</th>
<th>数量</th>
</tr>
</thead>
<tr>
<td>圆珠笔</td>
<td>文具</td>
<td>赵志杰</td>
<td>Android</td>
<td>10</td>
</tr>
<tr>
<td>手机</td>
<td>用品</td>
<td>牛志远</td>
<td>Ios</td>
<td>88</td>
</tr>
<tr>
<td>电脑</td>
<td>工具</td>
<td>孔斌</td>
<td>Php</td>
<td>50</td>
</tr>
</table>
</body>

2.3表格的表主体标记--tbody

与表头样式的标记功能类似,表主体样式用来同意设计表主体部分的样式,标记为<tbody>,同样是一个表元素只能有一个表元素只能有一个tbody.

2.4表格的表尾标记--tfoot

<tfoot>标记用于定义表尾样式.

<body>
<table align="center" border="1" bordercolor="#FFCC99" cellpadding="3" width="550" height="180">
<caption>加联加物品管理表</caption>

<thead bgcolor="#FF0000" align="center" valign="middle">
<tr>
<th>物品名</th>
<th>类型</th>
<th>领取人</th>
<th>领取人所属部门</th>
<th>数量</th>
</tr>
</thead>

<tbody bgcolor="#CC99CC" align="left" valign="botton">
<tr>
<td>圆珠笔</td>
<td>文具</td>
<td>赵志杰</td>
<td>Android</td>
<td>10</td>
</tr>

<tr>
<td>手机</td>
<td>用品</td>
<td>牛志远</td>
<td>Ios</td>
<td>88</td>
</tr>

<tr>
<td>电脑</td>
<td>工具</td>
<td>孔斌</td>
<td>Php</td>
<td>50</td>
</tr>

</tbody>

<tfoot bgcolor="00CCFF" align="right" valign="middle">
<tr>
<td colspan="5" >表格的创建日期: 2011-11-20</td>
</tr>
</tfoot>
</table>
</body>

3.综合实例:表格的嵌套

当然了在页面中,排版是通过表格的嵌套来完成的,即一个表格内部可以套入另一个表格,一般情况下需要使用一些可视化的工具来完成的但是这里我们用代码的形式来实现他.代码如下:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>表格的嵌套</title>
</head>
<body>
<table width="560" height="300" border="1" cellspacing="0" align="center">
<thead bgcolor="#66FFFF">
<tr height="70">
<td width="160">网站logo</td>
<td width="400">网站banner</td>
</tr>
</thead>

<tr valign="top" height="200">
<td width="160" align="center">
<table width="135" height="180" border="1" cellspacing="0" bgcolor="FFCCFF">
<tr>
<td>页面导航1</td>
</tr>
<tr>
<td>页面导航2</td>
</tr>
<tr>
<td>页面导航3</td>
</tr>
</table>
</td>
<td width="400" height="200">
<table width="380" height="160" border="1" cellspacing="2" cellpadding="5">
<tr>
<td>网站模块</td>
<td>网站模块</td>
</tr>
<tr>
<td>网站模块</td>
<td>网站模块</td>
</tr>
</table>

</td>
</tr>
<tfoot bgcolor="#66FFFF">
<tr align="center">
<td height="30" colspan="2">
版权信息
</td>
</tr>
</tfoot>
</table>
</body>
</html>