【网站设计】Html5 表格详细教程

网站设计 2019-09-12 16:36120未知admin

表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

      例如: 

 

<h4>我是两行三列例子:</h4>

<table border="1">

<caption>我是标题</caption>

<tr>

  <td>姓名</td>

  <td>学号</td>

  <td>Web成绩</td>

</tr>

<tr>

  <td>张无忌</td>

  <td>10</td>

  <td>90</td>

</tr>

</table>

显示效果:

 

【网站设计】Html5 表格详细教程

表格具有许多标签: 

align

设置单元格内容的水平对齐位置

valign

设置单元格内容的垂直对齐位置

bgcolor

设置单元格的背景颜色

background

设置单元格的背景图像

width

设置单元格的宽度

height

设置单元格的高度

rowspan

设置单元格的水平跨度

colspan

设置单元格的垂直跨度

<table>标签的border属性设置表格边框。表格的宽度和高度根据内容自动调整,也可以手动设置表格的宽度和高度。

例如:<table border="3"height="200" width="400">

</table>

表格中通过设置属性align的值来设定表格的对齐方式,<table align ="right">

对齐方式可以取值为:left right center

bgcolor的值可以定义表格的背景颜色。

设置属性background的值可以为表格的背景加入一张背景图片。

通过设置bgcolor的属性单独为行设置背景颜色。

<tr bgcolor=value>

水平方向上,可以设定单元格的对齐方式:有居左、居中、居右3种

<td align=value>

水平方向上是跨过多个列,需要使用跨列属性colspan来合并单元格

<td colspan=value>

表首<thead>,用于定义表格最上端表首的样式,可以设置背景颜色、文本对齐方式、文字对齐方式、

文字的垂直对齐方式等

<thead  align=value1  bgcolor=color_value     valign=value2>

使用<tfoot>标签用于定义表尾的样式

<tfoot   align=value1   bgcolor=color_value    valign=value2>

 

  项目实践

需求:要做一个商品浏览界面

【网站设计】Html5 表格详细教程

 

前提具备:图片、css、javaScript

项目结构:

【网站设计】Html5 表格详细教程

参考代码

 

HTML代码:

<!DOCTYPE html">

<html>

<head>

<meta charset="utf-8" />

<title>运用结构标签布局商城页面</title>

<link rel="stylesheet" type="text/css" href="css/mr-style.css"></link>

</head>

<body>

<div class="mr-box">

<table class="mr-shop" cellspacing="12">

<thead bgcolor="#B2B2B2" align="center" valign="middle">

    <tbody tbody align="right" bgcolor="#fff">

<tr class="mr-th1">

        <th >潮流前沿</th>

        <th >手机酷玩</th>

        <th >品质生活</th>

        <th >国际海购</th>

        <th >个性推荐</th>

    </tr>

    </thead>

    <tr class="mr-th3">

     <td>品牌精选新品</td>

        <td>乐Pro三新品</td>

        <td>巨超值 卖疯了</td>

        <td>全球最热好货</td>

        <td>居家必备</td>

    </tr>

    <tr>

     <td><img src="images/1.jpg" alt=""></td>

        <td><img src="images/2.jpg" alt=""></td>

       <td><img src="images/3.jpg" alt=""></td>

        <td><img src="images/4.jpg" alt=""></td>

        <td><img src="images/5.jpg" alt=""></td>

    </tr>

    </tbody>

    <tfoot>

     <tr><td colspan="5" width="800"><img src="images/6.jpg"></td></tr>

    </tfoot>

</table>

</div>

</body>

</html>

 

其中css的代码如下

@charset "utf-8";

.mr-shop{

width:50%;

height:326px;

margin:0 auto;

}

.mr-shop tr th{

width:238px;

height:36px;

background:#DD2727;

}

.mr-shop tr td{

text-align:center;

}

 

.mr-th1 th{

text-align:center;

font-size:18px;

font-weight:700;

font-family:"黑体";

color:#fff;

}

 

.mr-th3{

height:10px;

}

.mr-th3 td{

font-size:14px;

color:#9688A5;

padding-top:5px;

}

.mr-box{

width: 1221px;

       height: 450px;

       border: 1px solid red;

      margin: 0 auto;

}

tfoot img{

 width:100%;

}

网站建设-网站制作-网站设计-武汉众成建站公司 Copyright © 2009-2019 DEDECMS. 武汉建站公司 版权所有 备案号:

联系QQ:326651279 邮箱地址:网站地图