: The Table Data Cell element

¥Basic data cells

此示例使用 元素以及其他与表相关的元素来引入包含有关拼音字母表的数据的基本表。

¥This example uses elements along with other table-related elements to introduce a basic table with data about the phonetic alphabet.

HTML

某些表行（ 元素）包含标题单元格（ 元素）和数据单元格 元素。作为每行的第一个子元素的 元素形成表的第一列，每个 提供该行中数据单元格的行标题。每个相应的 元素包含与其各自的列标题和行标题单元格对齐的数据。

¥Some table rows ( elements) contain both header cells ( elements) and data cell elements. The element that is the first child of each row forms the first column of the table, with each providing the row header for the data cells within that row. Each corresponding element contains data aligned with its respective column header and row header cell.

注意：通常，会实现带有列标题的表头组，以便更容易理解列中的信息。 和 元素将用于将此类标题和数据行分组到相应的表头和正文部分。在此示例中未实现这一点，以专注于数据单元并降低该示例的复杂性。

¥Note: Normally, a table head group with column headers would be implemented to make it easier to understand the information in the columns. The and elements would be used to group such rows of headers and data into the respective table head and body sections. This is not implemented in this example to focus on the data cells and reduce the complexity of this example.

html

CSS

一些基本的 CSS 用于设置表格及其单元格的样式。CSS 属性选择器 和 :nth-of-type 伪类用于交替单元格的外观，以使表中的信息更易于理解和识别。

¥Some basic CSS is used to style the table and its cells. CSS attribute selectors and the :nth-of-type pseudo-class are used to alternate the appearance of the cells to make the information in the table easier to understand and identify.

csstd,

th {

border: 1px solid rgb(160 160 160);

padding: 8px 10px;

}

tr:nth-of-type(odd) td {

background-color: #eee;

}

tr th[scope="row"] {

background-color: #d6ecd4;

}

csstable {

border-collapse: collapse;

border: 2px solid rgb(140 140 140);

font-family: sans-serif;

font-size: 0.8rem;

letter-spacing: 1px;

}

结果

¥Result