With HTML you can create tables.
通过HTML你可以建立表格。

Examples
例子

Tables
表格
This example demonstrates how to create tables in an HTML document.
这个例子演示了怎么在一个HTML文档中建立表格。

Table borders
表格边框
This example demonstrates different table borders.
演示不同的表格边框。

(You can find more examples at the bottom of this page)
下面会有更多的例子。

Tables
表格

Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.
<table>标签用来定义表格。一个表格被划分为若干行(使用<tr>标签) 然后每个行可以被分成若干数据格（使用<td>标签）。td的意思就是"Table data"里面可以带数据，数据类型可以是文字、图象、列表、段落、表单、水平分割线、表格、等。

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

<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

How it looks in a browser:
在浏览器中的效果就是:

Tables and the Border Attribute
表格和其边框属性

If you do not specify a border attribute the table will be displayed without any borders. Sometimes this can be useful, but most of the time, you want the borders to show.
如果你不加以说明那表格的边框属性为不显示。有时候这是蛮有用的，但大多数时候你还是需要显示边框的。

To display a table with borders, you will have to use the border attribute:
如果你想要显示表格边框的话，就必须使用边框属性：

<table border="1">

<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

Headings in a Table
表格中的标题

Headings in a table are defined with the <th> tag.
一个表格中的标题是由<th> 标签定义的。

<table border="1">

<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>

<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>

</table>

How it looks in a browser:
显示的效果为：

Empty Cells in a Table
表格的空单元格

Table cells with no content are not displayed very well in most browsers.
大多数浏览器可以显示单元格不包含任何东西。

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

</tr>
<tr>
<td>row 2, cell 1</td>
<td></td>
</tr>
</table>

How it looks in a browser:
显示效果:

Note that the borders around the empty table cell are missing (NB! Mozilla Firefox displays the border).
注意包围空单元格的边框消失了（Mozilla Firefox浏览器则会显示）

To avoid this, add a non-breaking space (&nbsp;) to empty data cells, to make the borders visible: 
为了避免这个的话就得添加一个空格符号来让这个边框显示出来：

<table border="1">
<tr>

<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>&nbsp;</td>

</tr>
</table>

How it looks in a browser:
显示的效果：

Basic Notes - Useful Tips
实用提示

The <thead>,<tbody> and <tfoot> elements are seldom used, because of bad browser support. Expect this to change in future versions of XHTML. If you have Internet Explorer 5.0 or newer, you can view a working example in our XML tutorial.
<thead>,<tbody> and <tfoot>这些元素很少用到，因为它们不能很好的被浏览器支持，除非将来的XHTML版本改变这一现状。如果你的浏览器是IE5。0以上的你可以看看在我们的XML教程里一个效果的例子 。

More Examples
更多例子

Table with no border
没边框的表格
This example demonstrates a table with no borders.
这个案例展示了无边框的表格。

Headings in a table
表格中的标题
This example demonstrates how to display table headers.
这个案例展示了如何显示表格的标题。

Empty cells
空单元格
This example demonstrates how to use "&nbsp;" to handle cells that have no content.
这个案例展示了如何使用“&nbsp;”来处理无内容的单元格。

Table with a caption
表格起头
This example demonstrates a table with a caption.
这个案例展示了包含标题的表格。

Table cells that span more than one row/column
表格中单元格的多行或多列
This example demonstrates how to define table cells that span more than one row or one column.
这个案例展示了如和对跨行、跨列的单元格进行定义。

Tags inside a table
表格中使用标签
This example demonstrates how to display elements inside other elements.
这个案例展示了如何显示元素内的元素。

Cell padding
表格的内补丁
This example demonstrates how to use cellpadding to create more white space between the cell content and its borders.
这个案例展示了如何使用cellpadding在内容和表格之间设定更多留白。

Cell spacing
单元格之间的空隙
This example demonstrates how to use cellspacing to increase the distance between the cells.
这个案例展示了如何使用cellspacing增加单元格之间的距离。

Add a background color or a background image to a table
给整个表格添加背景颜色或者是图象
This example demonstrates how to add a background to a table.
这个案例展示了如何给表哥添加一个background[背景]属性。

Add a background color or a background image to a table cell
给单元格添加背景颜色或者是图象
This example demonstrates how to add a background to one or more table cells.
这个案例展示了如何给多个单元格添加background[背景]属性。

Align the content in a table cell
单元格的文字对齐
This example demonstrates how to use the "align" attribute to align the content of cells, to create a "nice-looking" table.
这个案例展示了如何使用“align[排列]”属性对单元格的内容进行排列。

The frame attribute
框架属性
This example demonstrates how to use the "frame" attribute to control the borders around the table.
这个案例展示了如何使用“frame”属性控制边框。

Table Tags
表格标签一览

HTML 框架 HTML 列表

评论 (0) All