简单搭建网站
从零开始学习

html表格

表格想必大家都是很熟悉的,因为我的文章很多都有用到表格来排版,用表格能用于很多的地方,如果你想简单一点布置你的网页的话那么用表格就足够了,在文章中我用表格基本都是用于把html标签和作用给大家排列出来,因为这样才能给大家一个直观的看到标签和对应标签的作用,用表格来排列出来的内容干净又好看

还不了解html是什么的请看下面文章了解框架

html表格

标签标签作用
<table>定义表格
<tr>定义表格的行
<th>定义表格的表头
<td>定义表格单元
<caption>定义表格标题
<colgroup>定义表格列的组
<col>定义表格列的属性
<thead>定义表格页眉
<tbody>定义表格内容
<tfoot>定义表格页尾

<clogroup>和<col>用于一个列的装饰效果,需要用到css样式,现在不讲这个

<thead><tbody><tfoot>也是用于css来装饰他们使用,所以现在也不会讲

最后五个标签都是用来css分别装饰效果的,如果没有css样式加持的话,你把标签放进去也不会有效果

基本表格

  • border:边框(按照自己喜好调节)
#基本表格#
<table border="1">
<tr>
<td>一行内容一</td><td>一行内容二</td>
</tr>
<tr>
<td>二行内容一</td><td>二行内容二</td>
</tr>
</table>

基本表格演示

提示:你可以先修改部分代码再运行。

带有表头和标题的表格

  • <caption>:标题
  • <th>:表头
#带有横向表头和标题的表格#
<table border="1">
<caption>这是表格的标题</caption>
<tr><th>表头一</th><th>表头二</th></tr>
<tr><td>内容一</td><td>内容二</td></tr>
</table>
#带有竖向表头和标题的表格#
<table border="1">
<caption>这是表格的标题</caption>
<tr><th>表头一</th><td>内容一</td></tr>
<tr><th>表头二</th><td>内容二</td></tr>
</table>

带有表头和标题的表格展示

提示:你可以先修改部分代码再运行。

跨行的表格

  • colspan:横向跨行
  • rowspan:竖向跨行

用过excel的可以用合并单元格来理解

#横向跨行表格#
<table border="1">
<tr><td>网站名字</td><td colspan="2">网站简介<td></tr>
<tr><td>零源博客</td><td>是一个发布前端教程的网站</td><td>主要是博主比较帅</td></tr>
</table>
#竖向跨行表格#
<table border="1">
<tr><td>网站名字</td><td>零源博客</td></tr>
<tr><td rowspan="2">网站简介</td><td>是一个发布前端教程的网站</td></tr>
<r><td>主要是博主比较帅</td></tr>
</table>

跨行表格演示

提示:你可以先修改部分代码再运行。

单元格边距与间距

  • cellpadding:单元格边距(内容和表格的距离)
  • cellspacing:单元格间距(表格和表格的距离)
#单元格边距与间距以及边框#
<table border="1" cellpadding="10" cellspacing="5">
<tr><td>一行一</td><td>一行二</td></tr>
<tr><td>二行一</td><td>二行二</td></tr>
</table>

单元格边距与间距演示

提示:你可以先修改部分代码再运行。

表格中插入标签

表格中是可以插入其它的标签的,图片段落,甚至你可以表格中再插入表格都是没有问题的,所以我前面才说为什么可以用表格简单规划一个简单的网页,因为它可以包含其它的标签

表格中插入标签演示

提示:你可以先修改部分代码再运行。

表格的宽度高是可以调节的,按照你的喜好可以调节为你想要的效果

<table width="宽度" height="高度">
#宽度和高度都是以像素为单位#

表格的用法有很多,怎么使用,在哪个地方用就看你们自己的了,效果自己决定。本篇文章内容可能比往常多,需要大家多花点时间消化一下

赞(2) 打赏梁某人
未经允许不得转载:每篇文章都是博主的心血,偷盗文章事最可耻的事情梁某人的个人网站 » html表格

发表评论 抢沙发

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

梁某人的个人网站

免费云存储免费云存储

靓仔!打赏一元试试看啊

支付宝扫一扫打赏

微信扫一扫打赏