表格HTML代码一览表
html特效代码 html表格制作
表格算不上什么特效，但在空间却很有用处。如果使用专门的工具，制作一张表格是轻而易举的事，但这类工具一下子不容易学会，下面介绍html表格如何手工制作。
1、最基本的表格
| ||||||||
代码：
<table width="300" border="1" bordercolor="#000000">
<tr>
<td>第1行第1列</td>
<td>第1行第2列</td>
</tr>
<tr>
<td>第2行第1列</td>
<td>第2行第2列</td>
</tr>
<tr>
<td>第3行第1列</td>
<td>第3行第2列</td>
</tr>
</table>
2、表格的代码非常整齐，也很有规律，我们只要学会使用并能够作一些简单修改就行了。上面是一张3行2列的表格，如果把它改成4行3列，怎么改呢？我们可以将代码通过复制、粘贴来添加行和列。修改后如下：
| |||||||||||||||
代码：
<table width="450" border="1" bordercolor="#000000">
<tr>
<td>第1行第1列</td>
<td>第1行第2列</td>
<td>第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>
<tr>
<td>新4行新1列</td>
<td>新4行新2列</td>
<td>新4行新3列</td>
</tr>
</table>
3、下面是一张4行4列的表格，请把它改成2行3列的表格，自己试一试吧。
| ||||||||||||||||||||
代码：
<table width="400" border="1" bordercolor="#000000">
<tr>
<td>第1行第1列</td>
<td>第1行第2列</td>
<td>第1行第3列</td>
<td>第1行第4列</td>
</tr>
<tr>
<td>第2行第1列</td>
<td>第2行第2列</td>
<td>第2行第3列</td>
<td>第2行第4列</td>
</tr>
<tr>
<td>第3行第1列</td>
<td>第3行第2列</td>
<td>第3行第3列</td>
<td>第3行第4列</td>
</tr>
<tr>
<td>第4行第1列</td>
<td>第4行第2列</td>
<td>第4行第3列</td>
<td>第4行第4列</td>
</tr>
</table>
4、我们发现上面的表格单元格里的文字偏左，这是默认对齐方式。怎样让文字居中对齐呢？还是通过添加代码来实现，添加居中代码就可以了。以第一张表格为例：
| ||||||||
代码：
<table width="300" border="1" bordercolor="#000000">
<tr>
<td><div align="center">第1行第1列</div></td>
<td><div align="center">第1行第2列</div></td>
</tr>
<tr>
<td><div align="center">第2行第1列</div></td>
<td><div align="center">第2行第2列</div></td>
</tr>
<tr>
<td><div align="center">第3行第1列</div></td>
<td><div align="center">第3行第2列</div></td>
</tr>
</table>
5、这是一张比较典型的表格样式。
表格名称表格名称
| ||||||||||||||||||||||||
代码：
<p align="center">表格名称表格名称</p>
<table width="600" border="1" align="center" cellpadding="4" cellspacing="0" bordercolor="#000000">
<tr>
<td><div align="center">第1行第1列</div></td>
<td><div align="center">第1行第2列</div></td>
<td><div align="center">第1行第3列</div></td>
<td><div align="center">第1行第4列</div></td>
</tr>
<tr>
<td><div align="center">第2行第1列</div></td>
<td><div align="center">第2行第2列</div></td>
<td><div align="center">第2行第3列</div></td>
<td><div align="center">第2行第4列</div></td>
</tr>
<tr>
<td><div align="center">第3行第1列</div></td>
<td><div align="center">第3行第2列</div></td>
<td><div align="center">第3行第3列</div></td>
<td><div align="center">第3行第4列</div></td>
</tr>
<tr>
<td><div align="center">第4行第1列</div></td>
<td><div align="center">第4行第2列</div></td>
<td><div align="center">第4行第3列</div></td>
<td><div align="center">第4行第4列</div></td>
</tr>
<tr>
<td><div align="center">第5行第1列</div></td>
<td><div align="center">第5行第2列</div></td>
<td><div align="center">第5行第3列</div></td>
<td><div align="center">第5行第4列</div></td>
</tr>
</table>
6、给表格添加背景颜，并把黑边框改成红边框。（表格的文字大小和颜可以在空间写新文章时自定）
表格名称表格名称
| ||||||||||||||||||||||||
代码：
<p align="center">表格名称表格名称</p>
<table width="600" border="1" align="center" cellpadding="4" cellspacing="0" bordercolor="#FF0000" bgcolor="#ECF5FF">
<tr>
<td><div align="center">第1行第1列</div></td>
<td><div align="center">第1行第2列</div></td>
<td><div align="center">第1行第3列</div></td>
<td><div align="center">第1行第4列</div></td>
</tr>
<tr>
<td><div align="center">第2行第1列</div></td>
<td><div align="center">第2行第2列</div></td>
<td><div align="center">第2行第3列</div></td>
<td><div align="center">第2行第4列</div></td>
</tr>
<tr>
<td><div align="center">第3行第1列</div></td>
<td><div align="center">第3行第2列</div></td>
<td><div align="center">第3行第3列</div></td>
<td><div align="center">第3行第4列</div></td>
</tr>
<tr>
<td><div align="center">第4行第1列</div></td>
<td><div align="center">第4行第2列</div></td>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论