首页 > Web开发 > 详细

Html中的表格

时间:2014-06-26 07:14:33      阅读:510      评论:0      收藏:0      [点我收藏+]

 在说起表格之前,先看几幅通过Html做出来的效果图。

 bubuko.com,布布扣

Html表格

      接着进入正题,其实上图实现的过程很简单,只需要掌握Html表格的属性就OK了。然后就是通过Html表格的属性来拼接出表格,然后通过更改表格的颜色最终出现了上述所示的图形。

 

Html表格的基本结构

  <table>…</table>:定义表格

  <tr>…</tr>:定义表行

  <td>…</td>:定义表列

  <th>…</th>:定义标题栏(文字加粗)

 

Html表格属性

     

属性

用途

<table bgcolor=””>

设置表格的背景色

<table background=””>

设置背景的图片

<table border=””>

设置边框的宽度,默认为0

<table cellpadding=””>

设置单元格边框与其内部之间空间大小,默认为2

<table cellpacing=””>

设置表格单元格之间空间的大小,默认为2

<table bordercolor=””>

设置表格边框的颜色

<table bordercolorlight=””>

设置边框亮部分的颜色

<table bordercolordark=””>

设置边框暗部分的颜色

<table align=””>

设置表格对齐方式

<table width=””>

设置表格的宽度

 

 

列单元格的属性

属性

用途

<td width=””>

设置单元格的宽度

<td height=””>

设置单元格的高度

<td bgcolor=””>

设置单元格的背景色

<td align=””>

设置单元格的水平对齐方式

<td rowspan=””>

设置单元格行合并的数目

<td colspan=””>

设置单元格列合并的数目

<td nowarp=”nowrap”>

设置在单元格中不换行

 

 

源代码

  好了经过上述讲解Html表格的一些属性,通过练习一下Demo就可以轻松掌握了。

 

  <html>
    <head>
	<title>
        排序列表练习一
	</title>
    </head>
<body>
<li>复杂表格1:</li>
<table border="1" width="500" cellpadding="5" bordercolor="blue">
<tr>
<td>1.1</td>
<td colspan="2">1.2 <br/>1.3</td>

</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>


<br/>
<li>复杂表格2:</li>
<table border="1" width="500" cellpadding="5" bordercolor="blue">
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
<td>第一行第三列</td>


</tr>
<tr>
<td colspan="2">第二行第一列</td>

<td rowspan="2">第二行第三列</td>
</tr>
<tr>
<td>第三行第一列</td>
<td>第三行第二列</td>

</tr>
</table>

<br/>
<li>凸起表格:</li>
<table border="1" width="500" cellpadding="5" bordercolor="blue" bgcolor="gray">
<tr>
<td bordercolorlight="black" bordercolordark="white">第一行第一列</td>
<td bordercolorlight="black" bordercolordark="white">第一行第二列</td>
<td bordercolorlight="black" bordercolordark="white">第一行第三列</td>
</tr>
<tr>
<td bordercolorlight="black" bordercolordark="white">第二行第一列</td>
<td bordercolorlight="black" bordercolordark="white">第二行第二列</td>
<td bordercolorlight="black" bordercolordark="white">第二行第三列</td>
</tr>
<tr>
<td bordercolorlight="black" bordercolordark="white">第三行第一列</td>
<td bordercolorlight="black" bordercolordark="white">第三行第二列</td>
<td bordercolorlight="black" bordercolordark="white">第三行第三列</td>
</tr>

</table>
</body>
  </html>


 

总结:

      通过最近学习Html,发现比编程语言要容易多,只要基本上熟悉下语法,略微练习一下就OK了,并且不知细心的朋友注意到没有,上面的单词也都非常的easy,看一下就基本上明白是什么意思了,再不懂的话,查一下Html手册就可以了。但是Html也是一个细心的工作,就好比我们经常见到的网页,需要美工、各个标题栏之间的行距的设置等,需要耐心细致的美化网页,所以在以后的学习中要多加练习,多点耐心,就一定可以把Html学习好。

 

Html中的表格,布布扣,bubuko.com

Html中的表格

原文:http://blog.csdn.net/luckyzhoustar/article/details/34523159

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!