HTML表格

一,表格的基本标签

相关元素:
<table>:定义表格

<tr>:定义行,只能包含<td>或者<th>元素

<td>:定义列,也叫单元格,主要属性:clospan和rowspan

<caption>:定义表格的标题

<th>:定义表格页眉的单元格《列》

以下三个,是表格的格式,头,主体,脚

<thead>:定义表格头

<tbody>:定义表格的主体

<tfoot>:定义表格脚

<body>
     <table><!--表格-->
           <thead><!--表格头-->
                <tr><!--代表行-->
                   <td>1</td><!--代表列,也叫单元格-->
                   <td>2</td>
                   <td>3</td>
                </tr>
           </thead>
           <tbody><!--表格主体-->
                <tr><!--代表行-->
                   <td>1</td><!--代表列,也叫单元格-->
                   <td>2</td>
                   <td>3</td>
                </tr>
           </tbody>
           </thead>
           <tfood><!--表格脚-->
                <tr><!--代表行-->
                   <td>1</td><!--代表列,也叫单元格-->
                   <td>2</td>
                   <td>3</td>
                </tr>
           </tfood>
     </table>
</body>

以上表格的行分组解释:

HTML文档的表格按行分组是由表头标签<thead>,表格主体标签<tbody>和尾注标签<tfood>三个部分组成.

行分组的标签都是成对出现的,其标签内是由表头标签标识的表头元素,<tbody>标签用于规定表格主体部分的元素可以出现多次.

<thead>和<tbody>标签的属性和<th><td>标签是一样的.

二,table表格的属性

boder=:边框,值代表边框的大小

width=:宽度,值为数字,代表宽度的大小

height=:高度,值为数字,代表高度的大小

bgcolor=:背景颜色,颜色可以随意选

background=:引入背景图片,后面跟的是图片的路径(background="img/4.jpg")

align=:设置表格中文字的水平位置(取值:center居中,right右边,left左边(left为默认值,文字默认在表格的右边))

valign=:设置表格中文字垂直位置(取值:middle中间,tup上,bottom下)

bordercolor=:表格边框颜色,只有当border表格的大小>1时起作用

bordercolorlight=:表格边框明亮部分的颜色,要求如上

bordercolordark=:表格边框昏暗部分颜色,要求如上

cellspacing=:单元格之间的间距(外间距:每个表格格子与格子之间的距离)

cellpadding=:单元格之间的间距(内间距:内容与表格格子之间的距离)

三,设置分隔线的显示状态rules

语法格式:<table rules="值">以下为值: rules为显示table里面的分隔线

all:显示所有的分隔线

groups:只显示组与组的分隔线(需要显示出表格的头部,内容,尾部)

rows:只显示行与行的分隔线

cols:只显示列与列的分隔线

none:所有的分隔线都不显示

四,表格的边框显示状态frame

表格的边框分别有上,下,左,右,这四个边框都可以显示或者隐藏

语法格式:<table frame="边框的显示状态值">

frame的值:

box:显示整个表格的边框

void:不显示表格边框

hsides:只显示表格上下边框

vsides:只显示表格左右边框

above:只显示表格上边框

below:只显示表格的下边框

lhs:只显示表格的左边框

rhs:右边框

<想要将单元格的间距小至一条线可以用分隔线的显示状态rules="all",还可以用单元格外间距 cellspacing='0'来调节>

五,设定跨多行多列单元格

1,要创建跨多行,多列的单元格,只需要在<th>或者<td>中加入rowsoan或者colspan属性的属性值,默认值为1,表明了表格中要跨越的行或者列的个数.

<tr>
    <th rowspan="1"//colspan="1">表格头</th> 
    <th>表格头</th>
</tr>
<!--或者是在td上面添加属性-->
<tr>
    <td rowspan="1"//colspan="1">表格头</th> 
    <td>表格头</th>
</tr>

解释:

colspan表示跨越的列数,例如colspan=2表示这一格的宽度为两个列的宽度

<对应的,跨越几行/列就得删除相应的多出几行/列,不然会变形>

rowspan表示跨越的行数,例如rowspan=2就表示这一格跨越表格两个行的高度

在表格中,<caption></caption>标签代表表格得标题,(文字)紧挨着表格table标签,而且用到此标签时,还需要用到align="center"调整文字位置居中,而且因为caption是表格的大标题,紧挨着table表格标签.,

<table>
     <caption>这是表格标题标签</caption>
     <tr><!--行-->
          <th>这是表头,默认文字自动加粗</th><!--表头-->
          <th>这是表头,默认文字自动加粗</th>
     </tr>
     <tr><!--行-->
         <td>这是内容<td><!--列-->
         <td>这是内容<td>
     </tr>
</table>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值