免费资源
享你所想

从零开始自学HTML(5):HTML表格

excel是office办公三大利器之一,可以说没有表格的办公室不是好单位。各种数据,行与列的交错,感官上刺激着人,让人可以一目了然。
那网页端可以制作表格吗?很显然是可以的,不过对于新手而言可能会觉得标签有点多、有点乱,会不会太复杂,难学?
其实与前面的标签一样,表格也很简单,主要包含三个元素,层次分明,只要耐心多看几次,就会觉得不过如此。

HTML表格

html表格用<table>标签来定义,<tr>定义表格中的行,<td>定义的是表格数据。也就是具体的内容。我们来看下面的代码:

<table>
<tr>
<td colspan="1" rowspan="1">中国</td>
<td colspan="1" rowspan="1">美国</td>
<td colspan="1" rowspan="1">日本</td>
</tr>
<tr>
<td colspan="1" rowspan="1">北京</td>
<td colspan="1" rowspan="1">纽约</td>
<td colspan="1" rowspan="1">东京</td>
</tr>
<tr>
<td colspan="1" rowspan="1">北京烤鸭</td>
<td colspan="1" rowspan="1">好莱坞</td>
<td colspan="1" rowspan="1">成人大片</td>
</tr>
</table>

效果展示:

中国 美国 日本
北京 纽约 东京
北京烤鸭 好莱坞 成人大片

下面我们详细说说创建表格的三个基本标签:

  • table标签表示表格的开始与结束。
  • tr全拼是”table row”,用于表示一行的开始与结束。
  • td是”table data”的缩写,表示的则是每一个单元格的数据。

每tr行包含的td数据一般数量一致,少一个td数据将以空格显示。

表格属性

表格有很多属性,不过常用的只有几个,其他的可以在需要的时候查询。

border用于设置表格边框的宽度。

我们给上方的table表格设置border:

<table border="6">

效果如下:

中国 美国 日本
北京 纽约 东京
北京烤鸭 好莱坞 成人大片

大家自己试试看!

赞(0) 打赏
未经允许不得转载:无梦博客 » 从零开始自学HTML(5):HTML表格
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

无梦博客

币池塘关于本站

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏