如何使用表格

首页 > HTML基础知识 > 如何使用表格

目录

最基本的表格

制作表格主要使用下列标签。

<table border=1>
<tr><td>●</td><td>■</td><td>▲</td></tr>
<tr><td>○</td><td>□</td><td>△</td></tr>
</table>

在浏览器里显示的效果如下。

连接单元格

使用<td colspan=n> 可以横向连接 n 个单元格。

<table border=1>
<tr><td colspan=2>●</td><td>▲</td></tr>
<tr><td>○</td><td>□</td><td>△</td></tr>
</table>

在浏览器里显示的效果如下。

使用<td rowspan=n> 可以垂直连接 n 个单元格。

<table border=1>
<tr><td rowspan=2>●</td><td>■</td><td>▲</td></tr>
<tr><td>□</td><td>△</td></tr>
</table>

在浏览器里显示的效果如下。

有立体感的表格

使用 border=n 可以把表格的边框变得有立体感。

<table border=8>
<tr><td>●</td><td>■</td><td>▲</td></tr>
<tr><td>○</td><td>□</td><td>△</td></tr>
</table>

在浏览器里显示的效果如下。

没立体感的表格

使用 cellspacing=0 可以把表格的边框变得没有立体感。

<table border=1 cellspacing=0>
<tr><td>●</td><td>■</td><td>▲</td></tr>
<tr><td>○</td><td>□</td><td>△</td></tr>
</table>

在浏览器里显示的效果如下。

有颜色的表格

使用 bordercolor= 可以设置表格的边框色,bgcolor= 可以设置表格的背景色。

<table border=1 bordercolor=red>
<tr bgcolor=yellow><td>●</td><td>■</td><td>▲</td></tr>
<tr><td bgcolor="#ccccff">○</td><td>□</td><td>△</td></tr>
</table>

在浏览器里显示的效果如下。

使表格横向排列

把表格嵌套在其他的表格里,可以实现表格的横向排列。这个技巧也可以运用在文本位置的设置等其他地方。

<table>
 <tr>
  <td>
   <table border=1>
    <tr><td>●</td><td>■</td></tr>
    <tr><td>○</td><td>□</td></tr>
   </table>
  </td>
  <td>
   <table border=1>
    <tr><td>●</td><td>■</td></tr>
    <tr><td>○</td><td>□</td></tr>
   </table>
  </td>
 </tr>
</table>

在浏览器里显示的效果如下。