- | Content categories |
- None |
+ A |
+ Alfa |
+ AL fah |
- | Permitted content |
- Zero or more {{HTMLElement("td")}} or {{HTMLElement("th")}} elements, or a mix of them |
+ B |
+ Bravo |
+ BRAH voh |
- | Tag omission |
- Start tag is mandatory. End tag may be omitted if the {{HTMLElement("tr")}} element is immediately followed by a {{HTMLElement("tr")}} element, or if the parent table group ({{HTMLElement("thead")}}, {{HTMLElement("tbody")}} or {{HTMLElement("tfoot")}}) element doesn't have any more content |
+ C |
+ Charlie |
+ CHAR lee |
- | Permitted parents |
- {{HTMLElement("table")}}, {{HTMLElement("thead")}}, {{HTMLElement("tbody")}} or {{HTMLElement("tfoot")}} element |
+ D |
+ Delta |
+ DELL tah |
+
+
+```
+
+#### CSS
+
+CSS {{cssxref(":nth-of-type")}} 伪类用于选择每一个“奇数”行，并将这些行的 {{cssxref("background-color")}} 设置为稍暗的色调，从而产生所谓的“斑马条纹”效果。这种交替的背景使表格中的数据行更容易解析和阅读——想象一下有许多行和列，并试图在某一行中找到一些数据的情景。此外，行标题单元格（{{HTMLElement("th")}} 元素）用 {{cssxref("background-color")}} 突出显示，以区别于数据单元格（{{HTMLElement("td")}} 元素）。
+
+```css
+tr:nth-of-type(odd) {
+ background-color: #eee;
+}
+
+tr th[scope="row"] {
+ background-color: #d6ecd4;
+}
+```
+
+```css hidden
+table {
+ border-collapse: collapse;
+ border: 2px solid rgb(140 140 140);
+ font-family: sans-serif;
+ font-size: 0.8rem;
+ letter-spacing: 1px;
+}
+
+th,
+td {
+ border: 1px solid rgb(160 160 160);
+ padding: 8px 10px;
+}
+```
+
+#### 结果
+
+{{EmbedLiveSample("基本行设置", 650, 140)}}
+
+### 标题行
+
+本示例扩展了[上一示例](#基本行设置)中的基本表格，在表格的第一行添加了标题行。
+
+#### HTML
+
+我们添加了额外的表格行（`