×

打开微信“扫一扫”,打开网页后点击屏幕右上角分享按钮

×

打开微信“扫一扫”,关注我们官方微信^_^

爱站云官方微信

【本站通知】:推荐站点30元/月 顶部三栏广告80一个月,买一个月送一个月,其他广告位请联系QQ客服☞ 点击这里给我发消息 欢迎加入站长之家官方QQ交流群
高流量 图文广告位出售
无限流量卡免费送
福利看片神器,高清免费无需翻墙
爱站云广告位招租 爱站云广告位招租

网站首页 爱站云资源网 技术教程 正文

第10课:表格

奇迹博客 2019-03-14 技术教程 0 评论

表格用来显示“表列数据(tabular data)”,也就是那些逻辑上以行和列显示的信息。


表格难学吗?

对于初学者来说,在HTML中创建表格似乎比较复杂,不过只要耐心细致地观察,你就会发现表格实际上与其它HTML元素相似,也具有严格的逻辑结构。


例1:



<table>

<tr>

<td>单元格1</td>

<td>单元格2</td>

</tr>

<tr>

<td>单元格3</td>

<td>单元格4</td>

</tr>

</table>



该例在浏览器中将显示如下:


单元格1 单元格2 

单元格3 单元格4


<tr>和<td>有什么区别?

上例可能是到目前为止你见过的最复杂的HTML例子,现在让我们来逐一解释其中的各个标签的含义:


用于创建表格的3个基本元素是:


首标签<table>和尾标签</table>分别表示一个表格的开始与结束。这是不难理解的。 

tr是“table row(表格行)”的缩写,用于表示一行的开始和结束。这也容易理解。 

td是“table data(表格数据)”的缩写,用于表示行中各个单元格(cell)的开始和结束。这些都是容易理解的。 

下面是对例1的详细解释。表格以<table>开始,其后的<tr>表明一个新行的开始,这一行中有两个单元格:<td>单元格1</td>和<td>单元格2</td>。该行以</tr>结束,然后紧接着以<tr>另起一行。该行也包含两个单元格,最后整个表格以</table>结束。


直观地讲:行是横向的单元格,列是从纵向的单元格:


单元格1 单元格2 

单元格3 单元格4


在该表格中,单元格1和单元格2构成一行,单元格1和单元格3构成一

列。


虽然上例中的表格只有两行和两列,但实际上,一个表格的行列数是没有限制的。


例2:



<table>

<tr>

<td>单元格1</td>

<td>单元格2</td>

<td>单元格3</td>

<td>单元格4</td>

</tr>

<tr>

<td>单元格5</td>

<td>单元格6</td>

<td>单元格7</td>

<td>单元格8</td>

</tr>

<tr>

<td>单元格9</td>

<td>单元格10</td>

<td>单元格11</td>

<td>单元格12</td>

</tr>

</table>



该例在浏览器中将显示如下:


单元格1 单元格2 单元格3 单元格4 

单元格5 单元格6 单元格7 单元格8 

单元格9 单元格10 单元格11 单元格12


表格有可用的属性吗?

表格当然有属性。比如属性border用于指定表格四周边框的厚度:


例3:



<table border=“1“>

<tr>

<td>单元格1</td>

<td>单元格2</td>

</tr>

<tr>

<td>单元格3</td>

<td>单元格4</td>

</tr>

</table>



该例在浏览器中将显示如下:


单元格1 单元格2 

单元格3 单元格4


表格边框的厚度是以象素(pixels)(参见第九课)为单位来指定的。


与设定图像的显示宽度类似,象素和屏幕百分比也可以用于设定表格宽度:


例4:



<table border=“1“ width=“30%“>



该例将在浏览器中显示一个表格,其宽度是屏幕宽度的30%,你可以自己试一下。


表格还有其它属性吗?

表格有很多属性,比如下面这两个:


align:指定整个表格、某行或某个单元格里内容的水平对齐方式,比如左对齐、居中或右对齐。 

valign:指定某个单元格里内容的垂直对齐方式,比如靠上、置中或靠下。 

例5:



<td align=“right“ valign=“top“>单元格1</td>



可以往表格中插入什么?

理论上,你可以往表格中插入任何东西,诸如文本(text)、链接(links)和图像(images)等等。但是,表格是用来显示表列数据的 (也就是那些以行和列显示来体现意义的数据),因此,不要仅仅因为你想把某些内容放在一起而使用表格。


在因特网的初期(也就是几年以前),表格经常被用作网页布局的工具。但是,如果你要控制文本和图像的显示,还有更酷的方式(提示:即CSS),有关内容将在后面作详细介绍。


现在,该是你动手实践刚才所学内容的时候了,试试看设计几个具有不同尺寸、属性和内容的表格。这也许要令你忙上几个小时.



猜你喜欢

本文暂时没有评论哦(●'◡'●)

欢迎 发表评论:


温馨提示:(登陆后才可以评论哦!点我QQ登录哦,若已登录请忽略)。
搜索
标签列表
关于我们
本人提供网站SEO优化、SEM推广营销(百度/360/搜狗收录优化)、企业建站、搜索引擎教学等服务。
联系我们:给我发QQ消息  加入QQ群

ABOUT US

爱站云网络科技有限公司成立于2017年
创始人:Johnny Kun 由95后的小青年创建
目前公司服务于云计算、网站建设、SEO优化等
团队成员平均3年以上从业经验,核心团队正在不断扩展。

Contact information

QQ:2126245521
Phone:15684092120
E-mail:kf@heikw.com
Website:www.heikw.cn

爱站云博客

Copyright © 2016-2018 www.heikw.cn Reserved.备案号:鲁ICP备16035655号

本站采用 Z-BLOG 核心程序 感谢 爱站云 赞助北京云服务器

爱站云安全认证