HTML表格

最新推荐文章于 2021-06-07 18:47:07 发布

DH520HW520

最新推荐文章于 2021-06-07 18:47:07 发布

阅读量276

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/DH520HW520/article/details/87942275

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一，表格的基本标签

相关元素：
<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>

DH520HW520

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML表格

一，表格的基本标签相关元素：&lt;table&gt;：定义表格&lt;tr&gt;：定义行，只能包含&lt;td&gt;或者&lt;th&gt;元素&lt;td&gt;：定义列，也叫单元格，主要属性：clospan和rowspan&lt;caption&gt;:定义表格的标题&lt;th&gt;：定义表格页眉的单元格《列》以下三个，是表格的格式，头，主体，脚&amp
复制链接

扫一扫