-
WEB前端
站-
热门城市 全国站>
-
其他省市
-
-
400-636-0069
沉沙
2018-10-25
来源 ：
阅读 1185
评论 0
摘要：本篇教程探讨了HTML小白初步学习教程7，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。
本篇教程探讨了HTML小白初步学习教程7，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。
<
关于表格
表格是用于排列内容的最佳手段，在HTML页面中，绝大多数页面都是表格排版，表格主要由 表格标<table>、行标记<tr>、单元格标记<td>构成
以下几点：
<!--表格宽度可调，高度同理 height ,不过宽度是总宽度。。。-->
<!--对齐方式可调，align=center, left,right,不过放在table这，就是整体位置，放在tr标签内，就是调整单行-->
<!--border——边框 bordercolor——边框颜色 cellspacing——内框宽度 cellpadding——文字和边框（上下左右）距离调整—>
<!--背景颜色用bgcolor="#XXXXXX" 背景图片用background—>
<!--上述的在table中的属性，在tr、td中也可以用(当然有些可能无效),当然，tr、td有特殊的valign用来调整行文字的垂直对齐方式—>
效果图1：
image
代码：
复制代码
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Table</title>
6 </head>
7 <body>
8 <!--表格宽度可调，高度同理 height ,不过宽度是总宽度。。。-->
9 <!--对齐方式可调，align=center, left,right,不过放在table这，就是整体位置，放在tr标签内，就是调整单行-->
10 <!--border————边框 bordercolor————边框颜色 cellspacing————内框宽度 cellpadding————文字和边框（上下左右）距离调整-->
11 <!--背景颜色用bgcolor="#XXXXXX" 背景图片用background-->
12 <!--上述的在table中的属性，在tr、td中也可以用(当然有些可能无效),当然，tr、td有特殊的valign用来调整行文字的垂直对齐方式-->
13 <table width="400" border="3" bordercolor="blue" cellspacing="10" cellpadding="10" background="images/2.jpg">
14 <caption align="bottom"><b>表格标题_下面</b></caption>
15 <tr align="center" height="80" bordercolor="white" valign="middle" >
16 <th>加粗的表头</th>
17 <th>第一项</th>
18 <th>第二项</th>
19 </tr>
20 <tr align="right">
21 <td>第一行</td>
22 <td>第一行-1</td>
23 <td>第一行-2</td>
24 </tr>
25 <tr align="left">
26 <td>第二行</td>
27 <td>第二行-1</td>
28 <td>第二行-2</td>
29 </tr>
30 </table>
31 </body>
32 </html>
复制代码
再加几点：
<!--跨行操作——colspan 当然，有行必有列，列用：rowspan—>
<!--有时候虽然是对单元格的单个操作，但是，往往调整一个会牵扯到别的,由于23行的91.1下面28行的77作废了,但是40使得整行发生了改变—>
<!--左上边框：bordercolorlight 右下边框 bordercolordark—>
<!--表头标记，一个表元素只能有一个<thead>标记—>
<!--tbody是用来统一设计表主体部分的样式—>
<!--最后表格的嵌套我就不说什么了，就是td标签里套table标签，没啥好说的—>
效果图：
代码：
image
复制代码
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Table2</title>
6 </head>
7 <body>
8 <!--表格宽度可调，高度同理 height ,不过宽度是总宽度。。。-->
9 <!--对齐方式可调，align=center, left,right,不过放在table这，就是整体位置，放在tr标签内，就是调整单行-->
10 <!--border————边框 bordercolor————边框颜色 cellspacing————内框宽度 cellpadding————文字和边框（上下左右）距离调整-->
11 <!--背景颜色用bgcolor="#XXXXXX" 背景图片用background-->
12 <!--上述的在table中的属性，在tr、td中也可以用(当然有些可能无效),当然，tr、td有特殊的valign用来调整行文字的垂直对齐方式-->
13 <table width="400" border="3" bordercolor="blue" cellspacing="5" cellpadding="5" background="images/man2.jpg">
14 <!--跨行操作——colspan 当然，有行必有列，列用：rowspan-->
15 <!--表头标记，一个表元素只能有一个<thead>标记-->
16 <thead bgcolor="#FFAAEE" valign="middle">
17 <tr align="center"bordercolor="#FDACAA"><td colspan="3"><b>单元格操作+表格结构</b></td></tr>
18 </thead>
19 <!--tbody是用来统一设计表主体部分的样式-->
20 <tbody bgcolor="#EEAAFF" align="right">
21 <tr align="center" height="49" bordercolor="#3CFED0" valign="middle">
22 <!--虽然是对单元格的单个操作，但是，往往调整一个会牵扯到别的,下面的77作废了,但是40使得整行发生了改变-->
23 <th width="91.1">加粗的表头</th>
24 <th>第一项</th>
25 <th>第二项</th>
26 </tr>
27 <tr bordercolorlight="#FA3433" bordercolordark="#3343AF">
28 <td width="77" height="40">第一行</td>
29 <td >第一行-1</td>
30 <td>第一行-2</td>
31 </tr>
32 <tr>
33 <td>第二行</td>
34 <td>第二行-1</td>
35 <td>第二行-2</td>
36 </tr>
37 </tbody>
38 <tfoot bgcolor="#FD3421">
39 <tr align="right">
40 <td colspan="3">我是表尾</td>
41 </tr>
42 <tfoot>
43 </table>
44 </body>
45 </html>
本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道！
喜欢 | 0
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
