怎么用CSS设置html中的表格边框样式

html-css013

怎么用CSS设置html中的表格边框样式,第1张

用CSS设置html中的表格边框样式，要设计的样式非常多，下面举例说明

工具：

记事本

浏览器

方法如下：

CSS代码：

table-a table{border:1px solid #F00}

<!--关键代码：设置表格边框为1像素，实体，红色-->

HTML代码：

<div class="table-a">

<table width="400" border="0" cellspacing="0" cellpadding="0">

<tr>

<td width="105">站名</td>

<td width="181">网址</td>

<td width="112">说明</td>

</tr>

<tr>

<td>网站名称</td>

<td>具体网址</td>

<td>网站说明</td>

</tr>

<tr>

<td>网站名称</td>

<td>具体网址</td>

<td>网站说明</td>

</tr>

</table>

</div>

效果图如下：

<table width="100%" border="0" cellspacing="1" cellpadding="4" align="center" bgcolor="#dedede" class='writetable'>

<form method="post" action="guestbook.php" name="form1">

<input type='hidden' name='action' value='save' />

<tr>

<td colspan='4' class='writetd'><b>发布留言：</b><a name='write'></a></td>

</tr>

<tr bgcolor="#ffffff">

<td width="10%" align="center" nowrap><font color="#FF0000">*</font>标题：</td>

<td width="40%"><input type="text" maxlength="50" name="title" size="30" class="ipt-txt"/></td>

<td width="10%" align="center" nowrap>验 证 码：</td>

<td><table border="0" cellspacing="0" cellpadding="0">

<tr>

<td width="70"><input name="validate" type="text" id="vdcode2" class="ipt-txt" style="width:60px" /></td>

<td><img src='../include/vdimgck.php' width='50' height='20' /></td>

</tr>

</table></td>

</tr>

<tr bgcolor="#ffffff">

<td width="10%" align="center" nowrap><font color="#FF0000">*</font>你的姓名：</td>

<td width="40%"><input type="text" maxlength="10" name="uname" size="30" value="<?php echo $g_name?>" class="ipt-txt"/></td>

<td width="10%" align="center" nowrap>OICQ号码：</td>

<td width="40%"><input maxlength="20" type="text" name="qq" size="20" class="ipt-txt" /></td>

</tr>

<tr bgcolor="#ffffff">

<td align="center" nowrap>电子邮件：</td>

<td><input maxlength="80" type="text" name="email" size="30" class="ipt-txt"/></td>

<td align="center" nowrap height="12">个人主页：</td>

<td height="12"><input maxlength="80" type="text" name="homepage" size="20" class="ipt-txt" /></td>

</tr>

<tr bgcolor="#ffffff">

<td ><font color="#FF0000">*</font>留言内容：<br />

(1000字内) </td>

<td colspan="3" ><textarea name="msg" cols="38" rows="5" class="textarea ipt-txt"></textarea></td>

</tr>

<tr bgcolor="#ffffff">

<td colspan="4" align="center" nowrap><input maxlength="1000" type="submit" name="Submit" value="提 交" class="btn-2" />

<input type="reset" name="Submit2" value="取 消" class="btn-2" /></td></tr>

</form>

</table>

复制我这些运行下吧，加了一个<td colspan="3" ><textarea name="msg" cols="38" rows="5" class="textarea ipt-txt"></textarea></td>

colspan="3"