android 基本表格_表格的基本HTML

android 基本表格

First, and most important, remember the Golden Rule: tables are for the use they were intended for, representing tabular data (lists of figures, etc). They are not for layout of graphics and text!

首先，也是最重要的一点，请记住“黄金法则”：表是用于表的用途(代表表格数据(图形列表等))。 它们不适用于图形和文本的布局！

That being said, tables are relatively easy to construct, so long as you remember that they are made up of rows, with each row of the table containing cells. It is vitally important that the cell count on each row is the same. If they are not, horrid results tend to happen.

话虽如此，只要您记住表是由行组成的，并且表的每一行都包含单元格，则表就相对容易构造。 每行的单元格计数必须相同，这一点至关重要。 如果不是这样，就会发生可怕的结果。

Tables start very simply, with a <table> tag. Each row in the table is signified by a <tr> tag, and each cell inside this row is listed in order with a <td> tag. All of these tags are nested, so the result looks something like this:

表非常简单，以<table>标记开头。 表中的每一行都用<tr>标记表示，并且该行内的每个单元格都用<td>标记依次列出。 所有这些标签都是嵌套的，因此结果看起来像这样：

<table>
	<tr>
		<td>This is the content of cell one</td>
		<td>This is the content of cell two</td>
	</tr>
</table>

Which produces a table that will look something like this:

产生的表将如下所示：

This is the content of cell one

This is the content of cell two

这是单元格一的内容

这是第二单元格的内容

The borders of the table are likely invisible in your browser, as this is the default UA style. Ironically, to make a table look the way we expect, we must use CSS: a solution is provided in an upcoming article.

表格的边框可能在您的浏览器中不可见，因为这是默认的UA样式 。 具有讽刺意味的是，要使表看起来像我们期望的那样，我们必须使用CSS ：即将在本文中提供一种解决方案。

Also note that closing tags for the table cells and rows are optional in HTML5, although it is good practice to include them.

还要注意，在HTML5中 ，表格单元格和行的结束标记是可选的，尽管包括它们是一种很好的做法。

This simple piece of code creates a simple one row, two cell table. Alternatively, you could think of it as a “one row, two column” table. If we add another row, it will alter the code of the table as follows:

这段简单的代码创建了一个简单的一行两单元格表。 或者，您可以将其视为“一行两列”表。 如果我们添加另一行，它将更改表的代码，如下所示：

<table>
	<tr>
		<td>This is the content of the first cell in the first row</td>
		<td>This is the content of the second cell in the first row </td>
	</tr>
	<tr>
		<td>This is the content of the first cell in the second row</td>
		<td>This is the content of the second cell in the second</td>
	</tr>
</table>

This code creates the table you see below (again, without any styles applied.)

此代码创建您在下面看到的表(再次，未应用任何样式。)

This is the content of the first cell in the first row	This is the content of the second cell in the first row
This is the content of the first cell in the second row	This is the content of the second cell in the second

这是第一行中第一个单元格的内容	这是第一行中第二个单元格的内容
这是第二行中第一个单元格的内容	这是第二个单元格中第二个单元格的内容

There are two cell-specific attributes that you should be aware of: rowspan and colspan. colspan makes one cell “equal to” two or more cells, such as the following example:

您应该了解两个特定于单元格的属性： rowspan和colspan 。 colspan使一个单元格“等于”两个或多个单元格，例如以下示例：

<table>
	<tr>
		<td colspan="2">This is the content of the first cell in the first row, spanning two cells</td>
		<td>This is the content of the second cell in the first row </td>
	</tr>
	<tr>
		<td>This is the content of the first cell in the second row</td>
		<td>This is the content of the second cell in the second</td>
		<td>This is the content of the third cell in the second row </td>
	</tr>
</table>

Note that the count of cells on each row is still the same: the first cell in the first row is now “worth” two cells, making a count of three cells on the first row, matching the second row.

请注意，每行的单元格计数仍然相同：第一行中的第一个单元格现在“值得”两个单元格，从而使第一行中的三个单元格的计数与第二行相匹配。

rowspan is similar, except working down through rows, rather than across columns. A cell that has been rowspanned “eats” cells in the rows below, meaning that those rows have fewer defined cells:

除了rowspan而不是跨列工作外， rowspan相似。 已被行跨过的单元格“吞噬”下面各行中的单元格，这意味着这些行中定义的单元格较少：

<table>
	<tr>
		<td rowspan="2">This is the content of the first cell in the first row, rowspanned into the second row </td>
		<td>This is the content of the second cell in the first row </td>
	</tr>
	<tr>
		<td>This is the content of the first cell in the second row</td>
	</tr>
</table>

Note that cells will automatically extend to their maximum width to accommodate whatever content is placed inside them. That limit is determined by the other cells, and the overall width of the table, determined by its associated style.

请注意，单元格将自动扩展到其最大宽度，以容纳其内部放置的所有内容。 该限制由其他单元格确定，表格的整体宽度由其关联样式确定。

翻译自: https://thenewcode.com/34/Basic-HTML-for-Tables

android 基本表格