Ascine

HTML/CSS学习记录（4）

HTML表格

表格

表格由

标签来定义。每个表格均有若干行（由标签定义），每行被分割为若干单元格（由

标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。
例如：

<html>

<body>

<p>每个表格由 table 标签开始。p>
<p>每个表格行由 tr 标签开始。p>
<p>每个表格数据由 td 标签开始。p>

<h4>一列：h4>
<table border="1">
<tr>
  <td>100td>
tr>
table>

<h4>一行三列：h4>
<table border="1">
<tr>
  <td>100td>
  <td>200td>
  <td>300td>
tr>
table>

<h4>两行三列：h4>
<table border="1">
<tr>
  <td>100td>
  <td>200td>
  <td>300td>
tr>
<tr>
  <td>400td>
  <td>500td>
  <td>600td>
tr>
table>

body>
html>

这个表格是有边框的，即

`表格和边框属性`

如果不定义边框属性，表格将不显示边框，如何显示表格边框：

表格边框从 1 开始依次变粗，上面所示的代码显示的是带有普通边框的表格。

`表格表头`

表格的表头使用

标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本：

<table border="1">
<tr>
<th>Headingth>
<th>Another Headingth>
tr>
<tr>
<td>100td>
<td>200td>
tr>
<tr>
<td>300td>
<td>400td>
tr>
table>

在浏览器显示出来就是：

Heading	Another Heading
100	200
300	400

表格中的空单元格

如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。

<table border="1">
<tr>
<td>row 1, cell 1td>
<td>row 1, cell 2td>
tr>
<tr>
<td>td>
<td>row 2, cell 2td>
tr>
table>

在浏览器中很可能这个空的单元格的边框不会被显示出来，所以一般在空单元格中添加一个空格占位符，就可以将边框显示出来。

<table border="1">
<tr>
<td>row 1, cell 1td>
<td>row 1, cell 2td>
tr>
<tr>
<td> td>
<td>row 2, cell 2td>
tr>
table>

表格的标题

表格的标题由使用元素：

<html>
<body>
<h4>这个表格有一个标题：h4>
<table border="1">
<caption>我的标题caption>
<tr>
  <td>100td>
  <td>200td>
  <td>300td>
tr>
<tr>
  <td>400td>
  <td>500td>
  <td>600td>
tr>
table>

body>
html>

显示出来是：

这个表格有一个标题：

我的标题
100	200	300
400	500	600

向表格或表格单元格添加背景颜色或背景图像

向表格添加：

向表格单元格添加：

在表格单元排列内容

可以使用align属性来排列内容，如：

<html>

<body>

<table width="400" border="1">
 <tr>
  <th align="left">消费项目th>
  <th align="right">一月th>
  <th align="right">二月th>
 tr>
 <tr>
  <td align="left">衣服td>
  <td align="right">$241.10td>
  <td align="right">$50.20td>
 tr>
 <tr>
  <td align="left">化妆品td>
  <td align="right">$30.00td>
  <td align="right">$44.45td>
 tr>
 <tr>
  <td align="left">食物td>
  <td align="right">$730.40td>
  <td align="right">$650.00td>
 tr>
 <tr>
  <th align="left">总计th>
  <th align="right">$1001.50th>
  <th align="right">$744.65th>
 tr>
table>

body>
html>

除此之外，表格还能在不同的元素里显示元素：

<html>

<body>

<table border="1">
<tr>
  <td>
   <p>这是一个段落。p>
   <p>这是另一个段落。p>
  td>
  <td>这个单元包含一个表格：
   <table border="1">
   <tr>
     <td>Atd>
     <td>Btd>
   tr>
   <tr>
     <td>Ctd>
     <td>Dtd>
   tr>
   table>
  td>
tr>
<tr>
  <td>这个单元包含一个列表：
   <ul>
    <li>苹果li>
    <li>香蕉li>
    <li>菠萝li>
   ul>
  td>
  <td>HELLOtd>
tr>
table>

body>
html>

显示出来是：

表头	内容

这是一个段落。

这是另一个段落。

这个单元包含一个表格：

A	B
C	D

这个单元包含一个列表：

苹果
香蕉
菠萝

HELLO

HTML列表

HTML 支持有序、无序和定义列表。

无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（小黑圆圈）进行标记。
无序列表始于

。
例如：
```
<ul>
<li>Coffeeli>
<li>Milkli>
ul>
```
显示：
- Coffee
- Milk
标记也可以通过元素进行改变