HTML 表格

最新推荐文章于 2025-05-14 18:18:51 发布

原创最新推荐文章于 2025-05-14 18:18:51 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #Html #HTML #合并单元格 #背景 #表格

java web 专栏收录该内容

16 篇文章

订阅专栏

1.HTML简单表格

<html>
<body>
<p>
构建表格Tag用法：整个表格开始用table；每一行开始用tr；每一单元开始用td。
</p>
<h4>一行一列的表格</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
<h4>一行三列的表格</h4>
<table border="1">
<tr>
<td>100</td> <td>200</td> <td>300</td>
</tr>
</table>
<h4>两行三列的表格</h4>
<table border="1">
<tr>
<td>100</td> <td>200</td> <td>300</td>
</tr>
<tr>
<td>100</td> <td>200</td> <td>300</td>
</tr>
</table>
  </body>
</html>

2.HTML表格的表头

<html>
<body>
<h4>横向表头的表格</h4>
<table border="1">
<tr>
<th>name</th> <th>gender</th> <th>age</th>
</tr>
<tr>
<td>Christy</td> <td>female</td> <td>22</td>
</tr>
</table>
<h4>竖向表头的表格</h4>
<table border="1">
<tr>
<th>name</th> <td>Christy</td>
</tr>
<tr>
<th>gender</th> <td>female</td>
</tr>
<tr>
<t h>age</th> <td>22</td>
</tr>
</table>
  </body>
</html>

3.带标题的表格

<html>
<body>
<table border="1">
<caption>标题</caption>
<tr>
<td>100</td> <td>200</td> <td>300</td>
</tr>
<tr>
<td></td> <td>200</td> <td>300</td>
</tr>
</table>

  </body>
</html>

4.包含多行或多列的表格单元格

<html>
<body>
<h4>用colspan属性，设置包含多列的单元格</h4>
<table border="1">
<tr>
<th>name</th> <th colspan="3">courses</th>
</tr>
<tr>
<td>Christy</td> <td>phycology</td> <td>math</td> <td>chemistry</td>
</tr> 
</table>
<h4>用rowspan属性，设置包含多行的单元格</h4>
<table border="1">
<tr>
<th>name</th> <td>Christy</td>
</tr>
<tr>
<th rowspan="3">courses</th> <td>phycology</td> 
</tr>
<tr>
<td>math</td>
</tr>
<tr> 
<td>chemistry</td>
</tr>
</table>
  </body>
</html>

5.一个表格单元格里嵌套各种内容

<html>
<body>
<table border="1">
<tr>
<td>
<p>这是一段</p>
<p>这是另一段</p>
</td>
<td>这个单元格里包含一个表格：
<table border="1">
<tr> <td>A</td> <td>B</td> </tr>
<tr> <td>C</td> <td>D</td> </tr>
</table>
</td>
</tr>
<tr>
<td>这个单元格包含一张图片：
<img src="http://www.blabla.cn/images/icons/go.gif">
</td>
</tr>
</table>
  </body>
</html>

6.表格的cellpadding属性

<html>
<body>
<h4>未设置cellpadding的表格</h4>
<table border="1">
<tr>
<td>100</td> <td>200</td> <td>300</td>
</tr>
<tr>
<td>100</td> <td>200</td> <td>300</td>
</tr>
</table>
<p>cellpadding:单元格内容和单元格边界的距离</p>
<h4>cellpadding值为10的表格</h4>
<table border="1" cellpadding="10">
<tr>
<td>100</td> <td>200</td> <td>300</td>
</tr>
<tr>
<td>100</td> <td>200</td> <td>300</td>
</tr>
</table>

  </body>
</html>

7.表格cellspacing属性

<html>
<body>
<p>cellspacing：单元格之间的距离。未设置cellspacing，默认值为1</p>

<h4>未设置cellspacing的表格</h4>
<table border="1">
<tr>
<td>100</td> <td>200</td> <td>300</td>
</tr>
<tr>
<td>100</td> <td>200</td> <td>300</td>
</tr>
</table>

<h4>cellspacing值为0的表格</h4>
<table border="1" cellspacing="0">
<tr>
<td>100</td> <td>200</td> <td>300</td>
</tr>
<tr>
<td>100</td> <td>200</td> <td>300</td>
</tr>
</table>

<h4>cellspacing值为10的表格</h4>
<table border="1" cellspacing="10">
<tr>
<td>100</td> <td>200</td> <td>300</td>
</tr>
<tr>
<td>100</td> <td>200</td> <td>300</td>
</tr>
</table>

  </body>
</html>

8.表格加背景颜色或背景图片

<html>
<body>

<h4>表格加背景图片</h4>
<table border="1" background="http://www.blabla.cn/images/icons/go.gif">
<tr>
<td>100</td> <td>200</td> <td>300</td>
</tr>
<tr>
<td>100</td> <td>200</td> <td>300</td>
</tr>
</table>

<h4>表格加背景颜色</h4>
<table border="1" bgcolor="red">
<tr>
<td>100</td> <td>200</td> <td>300</td>
</tr>
<tr>
<td>100</td> <td>200</td> <td>300</td>
</tr>
</table>

  </body>
</html>

9.表格单元格背景颜色或背景图片

<html>
<body>

<table width="190" border="1" >
<tr>
<td bgcolor="red">100</td> 
<td background="http://www.blabla.cn/images/icons/go.gif">200</td> 
<td >300</td>
</tr>
<tr>
<td>100</td> <td>200</td> <td>300</td>
</tr>
</table>

  </body>
</html>

10．表格单元格对齐方式（align）

<html>
<body>

<table width="350" border="1" >
<tr>
<td align="center">100</td> <td align="left">200</td> <td align="right">300</td>
</tr>
<tr>
<td>100</td> <td>200</td> <td>300</td>
</tr>
</table>

  </body>
</html>