随笔 - 54, 文章 - 0, 评论 - 0, 阅读 - 13105

使用 Cell spacing 增加单元格之间的距离

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>博客园</title>
</head>
<body>

<h4>没有单元格间距:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
        
<h4>单元格间距="0":</h4>
<table border="1" cellspacing="0">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
        
<h4>单元格间距="10":</h4>
<table border="1" cellspacing="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
        
</body>
</html>

使用 Cell padding 来创建单元格内容与其边框之间的空白

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>博客园</title>
</head>
<body>

<h4>没有单元格边距:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

<h4>有单元格边距:</h4>
<table border="1"
        cellpadding="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

</body>
</html>