木子屋
 

标题: 打造个性表格

作者: admin

日期: 2006-06-27 05:12 PM

分类: HTML/CSS

内容: 一、一个象素宽的分隔线
<table width="100%" cellspacing="0" border="0" bgcolor="#000000" height="1" cellpadding="0">
<tr>
<td></td>
</tr>
</table>
二、利用“cellspacing”属性制作边框为1px的表格：
<table width="160" cellspacing="1" border="0" bgcolor="#000000" height="40">
<tr>  
<td bgcolor="#FFFFFF">
<div align="center">表格B</div>
</td>
</tr>
</table>
三、利用“cellpadding”属性制作等间距细线表格
<table width="420" border="0" cellspacing="2" cellpadding="1" height="10">
<tr>  
<td bgcolor="#000000">  
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">
<tr>  
<td bgcolor="#FFFFFF"> </td>
</tr>
</table>
</td>
<td bgcolor="#000000">  
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">
<tr>  
<td bgcolor="#FFFFFF"> </td>
</tr>
</table>
</td>
<td bgcolor="#000000">  
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">
<tr>  
<td bgcolor="#FFFFFF"> </td>
</tr>
</table>
</td>
<td bgcolor="#000000">  
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">
<tr>  
<td bgcolor="#FFFFFF"> </td>
</tr>
</table>
</td>
<td bgcolor="#000000">  
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">
<tr>  
<td bgcolor="#FFFFFF"> </td>
</tr>
</table>
</td>
<td bgcolor="#000000">  
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">
<tr>  
<td bgcolor="#FFFFFF"> </td>
</tr>
</table>
</td>
</tr>
</table>
　　代码好象很多，但理清它的结构后会发现其实并不复杂，它主要利用了表格的嵌套以及表格的“cellpadding”属性。在一个一行六列表格的每个单元格里又插入了一个这样一个表格：
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">
<tr>
<td> </td>
</tr>
</table>

+ 查看当前日志评论 (0)

 

登录

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.039 ms

标题: 打造个性表格

你没有权限发表评论

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.039 ms

暂无评论

返回

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.047 ms