HTML+CSS入门之基础入门(7)表格
从安 2019-06-21 来源 : 阅读 1162 评论 0

摘要:本篇文章主要讲述HTML+CSS入门之基础入门(7)表格,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入。

本篇文章主要讲述HTML+CSS入门之基础入门(7)表格,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入。

HTML+CSS入门之基础入门(7)表格

表格的基本结构

表格是网页上最常见的元素,它除了可以用来展示数据,还常常被用来排版。虽然现在提倡使用DIV+CSS完成页面布局,但表格框架简单明了,对于繁杂的数据,一个简洁的表格能让其展现的极有条理。

简单来说,表格是由行、列(单元格)组成。表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行又由若干单元格(即列,由 <td> 标签定义)组成。表格单元格里可以包含文本、图片、列表、段落、表单、水平线、表格(嵌套)等等。

别罗嗦,看代码。

下面的代码是一个两行两列的表格。

 

<!DOCTYPE html><html xmlns="//www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title></head><body>
    <table><!--表格开始-->        
        <tr><!--表格第一行-->
            <td>姓名</td><!--第一行第一个单元格-->
            <td>张三</td><!--第一行第二个单元格-->
        </tr>
        <tr><!--表格第二行-->
            <td>民族</td><!--第二行第一个单元格-->
            <td>汉族</td><!--第二行第二个单元格-->
        </tr>
    </table><!--表格结束--></body></html>

 

表格默认是没有边框的,下面的效果图加入了边框,目的是能让表格的结构更清晰。

 

表格的标准结构

表格除了行<tr>和单元格<td>,还可以有标题<caption>和表头<th>。另外,表格的语义化还将表格分为表格页眉<thead>、表格主体<tbody>、表格页脚<tfoot>三个部分。引入语义化,能够让表格结构更清晰、代码语义更良好。

下面的示例代码加入了标题和表头,同时引入了表格语义化,将表格分为页眉、主体。页脚三个部分,表格语义化是否添加不会影响到表格的显示效果。

 

<!DOCTYPE html><html xmlns="//www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title></head><body>
    <table><!--表格开始-->        
        <caption>第一学期学生成绩表</caption><!--表格标题-->
        <thead><!--表格页眉-->
            <tr><!--第一行-->
                <th>姓名</th><!--表头-->
                <th>语文</th>
                <th>数学</th>
                <th>物理</th>
            </tr>
        </thead>
        <tbody><!--表格主体-->
            <tr><!--第二行-->
                <td>张小明</td>
                <td>80</td>
                <td>90</td>
                <td>80</td>
            </tr>
            <tr><!--第三行-->
                <td>王小花</td>
                <td>90</td>
                <td>70</td>
                <td>80</td>
            </tr>
        </tbody>
        <tfoot><!--表格页脚-->
            <tr><!--第四行-->
                <td>平均分</td>
                <td>85</td>
                <td>80</td>
                <td>80</td>
            </tr>
        </tfoot>
    </table><!--表格结束--></body></html>

 

表格默认是没有边框的,下面的效果图加入了边框,目的是能让表格的结构更清晰。

 

表格的行、列合并

在表格的实际应用中,经常需要将表格相邻的两个或多个单元格合并,以满足不同长度或不同类型的数据展示。

<td>标签的【rowspan】属性可以实现合并行,<td rowspan="合并的行数">

<td>标签的【colspan】属性可以实现合并列,<td colspan="合并的列数">

示例代码:

 

<!DOCTYPE html><html xmlns="//www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        /*设置图片的宽和高,防止将表格撑变形*/
        img {width:76px; height:82px;}
    </style></head><body>
    <table>   
        <tr><!--第1行-->
            <td>姓名:</td>
            <td>小叮当</td><!--下面是合并两行-->
            <td rowspan="2"><img src="小叮当.jpg"/></td>
        </tr>
        <tr><!--第2行-->
            <td>作品:</td>
            <td>哆啦A梦</td>
        </tr>
        <tr><!--第3行-->
            <td>简介:</td><!--下面是合并两列-->
            <td colspan="2">来自一部漫画作品</td>
        </tr>
    </table></body></html>

表格默认是没有边框的,下面的效果图加入了边框,目的是能让表格的结构更清晰。

 

表格的CSS样式

表格默认是没有边框的,我们可以使用border属性为table设置边框。上面的代码都是加入边框,可以看到,表格都是双线条边框,这是由于 table、th 以及 td 元素都有独立的边框。【border-collapse】属性可以设置是否把表格边框合并为单一的边框,该属性的取值主要有两个,值【separate】为默认值,表示边框分开不合并,值【collapse】为合并边框。

当表格的边框属性【border-collapse】的值为默认值【separate】,即边框分开时,我们还可以利用属性【border-spacing】来设置相邻单元格的边框间的距离。该属性可以设置一个或两个像素值,当设置一个像素值时,表示水平和垂直间隔为同一值;如果设置了两个值,则第一个为水平间距,第二个为垂直间距。

示例代码:

 

<!DOCTYPE html><html lang="en" xmlns="//www.w3.org/1999/xhtml"><head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
         /*为表格设置边框样式*/
        table,th,td{border:1px solid red;}
        table.one
        {   /*设置第一个表格为合并边框*/
            border-collapse: collapse;
        }
        table.two
        {   /*设置第二个表格为分离边框,同时设置水平间距10px,垂直间距50px*/
            border-collapse: separate;
            border-spacing: 10px 30px
        }
    </style></head><body>
    <table class="one">
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
        </tr>
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
        </tr>
    </table>
    <br />
    <table class="two">
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
        </tr>
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
        </tr>
    </table></body></html>

 

本文由职坐标整理发布,学习更多的相关知识,请关注职坐标IT知识库!

本文由 @从安 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程