码迷,mamicode.com
首页 > Web开发 > 详细

HTML(二):表格元素

时间:2017-02-10 11:34:02      阅读:274      评论:0      收藏:0      [点我收藏+]

标签:16px   alt   nbsp   色值   enter   示例   背景   ble   技术分享   

表格元素的作用:用来格式化显示数据。

一、表格的基本结构

技术分享

表格的基本语法:
<TABLE border="设置表格边框尺寸大小" width="" cellpadding="" cellspaning="">
   <TR align="对齐方式">
      <TD align="">
         单元格内容
      </TD>
      ......
   </TR>
   ......
</TABLE>

<TABLE></TABLE>:定义表格
<TR></TR>:定义行
<TD></TD>:定义列

示例:

技术分享

主要属性:
border:边框的宽度,单位是像素(缺省值是0)
width:表格的宽度,可以用百分比(表示该表格占父标记的宽度),也可以是绝对值
cellpadding:单元格内容与单元格之间的空隙
cellspacing:单元格与单元格之间的空隙
align:对齐方式,值有"center","right","left"
colspan:水平方向延伸单元格,值为一正整数,代表此单元格水平延伸的单元格数
rowspan:垂直方向延伸单元格,值为一正整数,代表此单元格垂直延伸的单元格数。


<caption>表格的题注:caption元素必须包含在table元素中,而且必须紧跟在<table>的开始标记之后,默认居中显示。

语法
    开始标记:必须
    内容:行内标记
    结束标记:必需
主要属性:
    align属性:用以确定题注的位置,可以有五种取值
               bottom、center、laft、right、top

二、表格美化
1、设置表格的尺寸和边框
width:用来设置表格的宽度
height:用来设置表格的高度
border:用来设置表格边框尺寸大小
bordercolor:用来设置表格边框颜色
<table width="400" height="200" border="15" bordercolor="red">
    <tr>
      <td colspan="4" align="center">品牌商城</td>
    </tr>
    <tr>
      <td colspan="2">笔记本电脑</td>
   <td colspan="2">办公设置、文具、耗材</td>
    </tr>
    <tr>
      <td>惠普</td>
   <td>华硕</td>
   <td>打印机</td>
   <td>刻录盘</td>
    </tr>
 </table>

示例:

技术分享

2、设置背景图片和背景色
background:属性用来设置表格的背景图片
bgcolor:属性用来设置表格、行、列的背景色。“#EBEFFF”是用RGB表示的一种颜色值,RGB指的是红绿蓝
<table width="360" height="120" border="2" background="Images\img.jpg">
    <tr>
       <td colspan="6">&nbsp;</td>
    </tr>
    <tr>
       <td colspan="3">笔记本电脑</td>
    <td colspan="3" bgcolor="yellow">办公设备、文具、耗材</td>
    </tr>
    <tr>
       <td>IBM</td>
    <td>惠普</td>
    <td>华硕</td>
    <td>打印机</td>
    <td>刻录盘</td>
    <td>墨盒</td>
    </tr>
 </table>

示例:

技术分享

3、设置对齐方式
align:属性用来设置表格、行、列的对齐方式。


有三种取值
left:居左对齐 默认
right:居右对齐
center:居中对齐

示例:

技术分享

4、填充属性和间距属性
cellpadding:单元格填充,用来设置表格内填充距离,表示每一个单元格的厚度,值越大,单元格内容离单元格距离就越大
cellspacing:单元格间距,用来设置表格内框宽度,表示两个单元格之间的距离。值越大,单元格与单元格之间的距离就越大

填充属性和间距属性:

技术分享
<body>
    <table border="20" cellpadding="30" cellspacing="40" bordercolor="red">
   <tr bordercolor="green">
     <td colspan="4">品牌商城</td>
   </tr>
   <tr>
     <td colspan="2">笔记本电脑</td>
  <td colspan="2">办公设备、文具、耗材</td>
   </tr>
   <tr>
     <td>惠普</td>
  <td>华硕</td>
  <td>打印机</td>
  <td>刻录盘</td>
   </tr>
 </table>
 </body>

示例:

技术分享

设置表格的填充属性示例:

技术分享

5、设置跨行、跨列的表格

colspan:水平方向延伸单元格,值为一正整数,代表此单元格水平延伸的单元格数
rowspan:垂直方向延伸单元格,值为一正整数,代表此单元格垂直延伸的单元格数。

设置跨多列的表格:

技术分享

设置跨多行的表格:

技术分享

设置跨多行多列的表格:

技术分享

HTML(二):表格元素

标签:16px   alt   nbsp   色值   enter   示例   背景   ble   技术分享   

原文地址:http://www.cnblogs.com/dotnet261010/p/6385584.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!