HTML 表格

HTML 表格包含的内容有表格、行、单元格、表头和合并行、合并列等内容。

标签描述
<table>表格
<caption>标题
<th>表头
<tr>
<td>单元格
<thead>表头组合
<tbody>主体内容组合
<tfoot>页脚组合

表格属性

属性描述
border边框(css合并边框
colspan合并列
rowspan合并行
cellpadding单元格内边距
cellspacing单元格外边距

HTML - 表格

一个表格的基本组成是 <table>(表格)、<tr>(行)、<td>(单元格)。
单元格可以包含文本、图片、段落、等其他 HTML 元素。

<table>
	<tr>
		<td>行1,列1</td><td>行1,列2</td>
	</tr>
	<tr>
		<td>行2,列1</td><td>行2,列2</td>
	</tr>
</table>

HTML - 表格边框属性

border为表格的边框属性。如果不定义边框属性,表格将不显示边框。有时这很有用,但是大多数时候,我们希望显示边框。

<table border="1">
	<tr>
		<td>行1,列1</td><td>行1,列2</td>
	</tr>
	<tr>
		<td>行2,列1</td><td>行2,列2</td>
	</tr>
</table>
注:1 代表 1像素

HTML - 带有标题的表格

<caption>定义表格标题,水平居中。

<table border="1">
  <caption>我的标题</caption>
  <tr>
		<th>表头1</th><th>表头2</th>
  </tr>
  <tr>
		<td>行1,列1</td><td>行1,列2</td>
  </tr>
  <tr>
		<td>行2,列1</td><td>行2,列2</td>
  </tr>
</table>

htmltable3.jpg

图一

HTML - 表格表头

<th>定义表头,通常写在第一个 <tr> 里面。大多数浏览器会把表头显示为粗体居中的文本。

HTML - 合并单元格

colspan 属性的作用是合并列。colspan=2 表示合并2列。如:

<table border="1">
  <tr>
		<th>姓名</th>
		<th colspan="2">联系方式</th>
  </tr>
  <tr>
		<td>pangugl 教程</td>
		<td>QQ:2624342267</td>
		<td>微信号:pangugle</td>
  </tr>
</table>

htmltable4.jpg

图二

rowspan 属性的作用是合并行。rowspan=2 表示合并2行。如下:

<table border="1">
  <tr>
	<td>姓名</td>
	<td>pangugl 教程</td>
  </tr>
  <tr>
	<td rowspan="2">联系方式</td>
	<td>QQ:2624342267</td>
  </tr>
  <tr>
	<td>微信号:pangugle</td>
  </tr>
</table>

htmltable5.jpg

图三
注:可以用 <td> 代替 <th> 。colspan 属性和 rowspan 属性都能写在 <th> 或 <td> 里面。

HTML - 单元格边距

cellpadding 创建单元格内容与其边框之间的空白,称内边距。cellpadding="20"表示20像素。如下:

<table border="1" cellpadding="20">
  <tr>
		<td>姓名</td>
		<td>pangugl 教程</td>
  </tr>
  <tr>
		<td rowspan="2">联系方式</td>
		<td>QQ:2624342267</td>
  </tr>
  <tr>
		<td>微信号:pangugle</td>
  </tr>
</table>

htmltable6.jpg

图四

cellspacing 增加单元格之间的距离。cellspacing="20"表示20像素。如下:

<table border="1" cellspacing="20">
  <tr>
	<td>姓名</td>
	<td>pangugl 教程</td>
  </tr>
  <tr>
	<td rowspan="2">联系方式</td>
	<td>QQ:2624342267</td>
  </tr>
  <tr>
	<td>微信号:pangugle</td>
  </tr>
</table>

htmltable7.jpg

图五

HTML - css合并边框

只设置border="1" 会让表格的边框看起来很粗,那可以使用css样式来合并边框。css有关教程将在后续文章中讲解。如下:

css :

<style type="text/css">
  table{
    border-collapse:collapse;
  }
</style>

html :

<table border="1" cellpadding="20">
  <tr>
		<td>姓名</td>
		<td>pangugl 教程</td>
  </tr>
  <tr>
		<td rowspan="2">联系方式</td>
		<td>QQ:2624342267</td>
  </tr>
  <tr>
		<td>微信号:pangugle</td>
  </tr>
</table>

htmltable8.jpg

图六

HTML - 带有 thead、tbody 以及 tfoot 元素的 HTML 表格

<table border="1" cellpadding="10">
  <caption>每月开销记录</caption>
  <thead>
    <tr>
      <th>月份</th>
      <th>花销/元</th>
    </tr>
  </thead>

  <tfoot>
    <tr>
      <td>总开销</td>
      <td>5500</td>
    </tr>
  </tfoot>

  <tbody>
    <tr>
      <td>3月份</td>
      <td>2500</td>
    </tr>
    <tr>
      <td>4月份</td>
      <td>3000</td>
    </tr>
  </tbody>
</table>

htmltable9.jpg

图七

<thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容,应该与 tbody 和 tfoot 元素结合起来使用。
<tbody> 元素用于对 HTML 表格中的主体内容进行分组。
<tfoot> 元素用于对 HTML 表格中的表注(页脚)内容进行分组。

注:如果使用 thead、tfoot 以及 tbody 元素,就必须使用全部的元素。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。

添加 css(样式)后的表格