标签：style class blog code http ext
在说起表格之前，先看几幅通过Html做出来的效果图。
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学习好。
标签：style class blog code http ext
原文地址：http://blog.csdn.net/luckyzhoustar/article/details/34523159
