diff --git a/files/en-us/web/html/element/caption/index.md b/files/en-us/web/html/element/caption/index.md index 9d51c72442386d8..d3bc4f1dd3d6d60 100644 --- a/files/en-us/web/html/element/caption/index.md +++ b/files/en-us/web/html/element/caption/index.md @@ -21,35 +21,30 @@ The following attributes are deprecated and should not be used. They are documen - `align` {{deprecated_inline}} - - : This [enumerated](/en-US/docs/Glossary/Enumerated) attribute indicates how the caption must be aligned with respect to the table. It may have one of the following values: + - : Specifies on which side of the table the caption should be displayed. The possible {{Glossary("enumerated", "enumerated")}} values are `left`, `top`, `right`, or `bottom`. Use the {{cssxref("caption-side")}} and {{cssxref("text-align")}} CSS properties instead, as this attribute is deprecated. - - `left` - - : The caption is displayed to the left of the table. - - `top` - - : The caption is displayed above the table. - - `right` - - : The caption is displayed to the right of the table. - - `bottom` - - : The caption is displayed below the table. +## Usage notes - > **Warning:** Do not use this attribute, as it has been deprecated. The {{HTMLElement("caption")}} element should be styled using the [CSS](/en-US/docs/Web/CSS) properties {{cssxref("caption-side")}} and {{cssxref("text-align")}}. +- If included, the `` element must be the first child of its parent {{htmlelement("table")}} element. +- When a `` is nested within a {{HTMLElement("figure")}} as the figure's only content, it should be captioned via a {{HTMLElement("figcaption")}} for the `
` instead of as a `
`. +Grouped columns can be used to visually highlight the structure using CSS: + +```css +table { + border-collapse: collapse; + border: 2px solid rgb(140 140 140); +} + +caption { + caption-side: bottom; + padding: 10px; +} + +th, +td { + border: 1px solid rgb(160 160 160); + padding: 8px 6px; + text-align: center; +} + +.weekdays { + background-color: #d7d9f2; +} + +.weekend { + background-color: #ffe8d4; +} +``` + +```css hidden +table { + font-family: sans-serif; + font-size: 0.8rem; + letter-spacing: 1px; +} +``` + +#### Result + +{{EmbedLiveSample('Example', 650, 170)}} ## Technical summary @@ -106,11 +194,11 @@ Please see the {{HTMLElement("table")}} page for examples on ``. @@ -142,8 +230,12 @@ Please see the {{HTMLElement("table")}} page for examples on ``. ## See also -- CSS properties and [pseudo-classes](/en-US/docs/Web/CSS/Pseudo-classes) that may be specially useful to style the `` element: - - - the {{cssxref("width")}} property to control the width of the column; - - the {{cssxref(":nth-child")}} pseudo-class to set the alignment on the cells of the column; - - the {{cssxref("text-align")}} property to align all cells content on the same character, like '.'. +- [Learn: HTML tables](/en-US/docs/Learn/HTML/Tables) +- {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}}: Other table-related elements +- {{cssxref("background-color")}}: CSS property to set the background color of each column group cell +- {{cssxref("border")}}: CSS property to control borders of column group cells +- {{cssxref("text-align")}}: CSS property to horizontally align each column group cell content +- {{cssxref("vertical-align")}}: CSS property to vertically align each column group cell content +- {{cssxref("visibility")}}: CSS property to hide (or show) cells of a column group +- {{cssxref("width")}}: CSS property to control the default width for each column in a column group +- {{cssxref(":nth-of-type")}}, {{cssxref(":first-of-type")}}, {{cssxref(":last-of-type")}}: CSS pseudo-classes to select the desired column cells diff --git a/files/en-us/web/html/element/index.md b/files/en-us/web/html/element/index.md index 84326492d9bcc6e..452075752b7d106 100644 --- a/files/en-us/web/html/element/index.md +++ b/files/en-us/web/html/element/index.md @@ -170,18 +170,18 @@ These elements let you provide indications that specific parts of the text have The elements here are used to create and handle tabular data. -| Element | Description | -| --------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{HTMLElement("caption")}} | Specifies the caption (or title) of a table. | -| {{HTMLElement("col")}} | Defines a column within a table and is used for defining common semantics on all common cells. It is generally found within a {{HTMLElement("colgroup")}} element. | -| {{HTMLElement("colgroup")}} | Defines a group of columns within a table. | -| {{HTMLElement("table")}} | Represents tabular data — that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data. | -| {{HTMLElement("tbody")}} | Encapsulates a set of table rows ({{HTMLElement("tr")}} elements), indicating that they comprise the body of the table ({{HTMLElement("table")}}). | -| {{HTMLElement("td")}} | Defines a cell of a table that contains data. It participates in the _table model_. | -| {{HTMLElement("tfoot")}} | Defines a set of rows summarizing the columns of the table. | -| {{HTMLElement("th")}} | Defines a cell as a header of a group of table cells. The exact nature of this group is defined by the `scope` and `headers` attributes. | -| {{HTMLElement("thead")}} | Defines a set of rows defining the head of the columns of the table. | -| {{HTMLElement("tr")}} | Defines a row of cells in a table. The row's cells can then be established using a mix of {{HTMLElement("td")}} (data cell) and {{HTMLElement("th")}} (header cell) elements. | +| Element | Description | +| --------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| {{HTMLElement("caption")}} | Specifies the caption (or title) of a table. | +| {{HTMLElement("col")}} | Defines one or more columns in a column group represented by its implicit or explicit parent {{HTMLElement("colgroup")}} element. The `` element is only valid as a child of a {{HTMLElement("colgroup")}} element that has no [`span`](/en-US/docs/Web/HTML/Element/colgroup#span) attribute defined. | +| {{HTMLElement("colgroup")}} | Defines a group of columns within a table. | +| {{HTMLElement("table")}} | Represents tabular data—that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data. | +| {{HTMLElement("tbody")}} | Encapsulates a set of table rows ({{HTMLElement("tr")}} elements), indicating that they comprise the body of a table's (main) data. | +| {{HTMLElement("td")}} | A child of the {{HTMLElement("tr")}} element, it defines a cell of a table that contains data. | +| {{HTMLElement("tfoot")}} | Encapsulates a set of table rows ({{HTMLElement("tr")}} elements), indicating that they comprise the foot of a table with information about the table's columns. This is usually a summary of the columns, e.g., a sum of the given numbers in a column. | +| {{HTMLElement("th")}} | A child of the {{HTMLElement("tr")}} element, it defines a cell as the header of a group of table cells. The nature of this group can be explicitly defined by the [`scope`](/en-US/docs/Web/HTML/Element/th#scope) and [`headers`](/en-US/docs/Web/HTML/Element/th#headers) attributes. | +| {{HTMLElement("thead")}} | Encapsulates a set of table rows ({{HTMLElement("tr")}} elements), indicating that they comprise the head of a table with information about the table's columns. This is usually in the form of column headers ({{HTMLElement("th")}} elements). | +| {{HTMLElement("tr")}} | Defines a row of cells in a table. The row's cells can then be established using a mix of {{HTMLElement("td")}} (data cell) and {{HTMLElement("th")}} (header cell) elements. | ## Forms diff --git a/files/en-us/web/html/element/table/index.md b/files/en-us/web/html/element/table/index.md index f458f0b9d209fc2..f78e1b5ee362d2d 100644 --- a/files/en-us/web/html/element/table/index.md +++ b/files/en-us/web/html/element/table/index.md @@ -7,71 +7,9 @@ browser-compat: html.elements.table {{HTMLSidebar}} -The **`
` nested within the ``. +- Any {{cssxref("background-color")}} applied to a table will not be applied to its caption. Add a `background-color` to the ``. +.weekdays { + background-color: #d7d9f2; +} + +.weekend { + background-color: #ffe8d4; +} +``` + +```css hidden +table { + font-family: sans-serif; + font-size: 0.8rem; + letter-spacing: 1px; +} +``` + +#### Result + +{{EmbedLiveSample('Example', 650, 170)}} ## Technical summary @@ -131,8 +222,12 @@ Please see the {{HTMLElement("table")}} page for examples on ``. ## See also -- CSS properties and pseudo-classes that may be specially useful to style the `` element: - - - the {{cssxref("width")}} property to control the width of the column; - - the {{cssxref(":nth-child")}} pseudo-class to set the alignment on the cells of the column; - - the {{cssxref("text-align")}} property to align all cells content on the same character, like '.'. +- [Learn: HTML tables](/en-US/docs/Learn/HTML/Tables) +- {{HTMLElement("caption")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}}: Other table-related elements +- {{cssxref("background-color")}}: CSS property to set the background color of each column cell +- {{cssxref("border")}}: CSS property to control borders of column cells +- {{cssxref("text-align")}}: CSS property to horizontally align each column cell content +- {{cssxref("vertical-align")}}: CSS property to vertically align each column cell content +- {{cssxref("visibility")}}: CSS property to hide cells of a column +- {{cssxref("width")}}: CSS property to control the default width for each column +- {{cssxref(":nth-of-type")}}, {{cssxref(":first-of-type")}}, {{cssxref(":last-of-type")}}: CSS pseudo-classes to select the desired column cells diff --git a/files/en-us/web/html/element/colgroup/index.md b/files/en-us/web/html/element/colgroup/index.md index ed8a73b5470f728..95a3e5af604c5b5 100644 --- a/files/en-us/web/html/element/colgroup/index.md +++ b/files/en-us/web/html/element/colgroup/index.md @@ -13,13 +13,13 @@ The **``** [HTML](/en-US/docs/Web/HTML) element defines a group of col ## Attributes -This element's attributes include the [global attributes](/en-US/docs/Web/HTML/Global_attributes). +This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attributes). - `span` - - : This attribute contains a positive integer indicating the number of consecutive columns the `` element spans. If not present, its default value is `1`. + - : Specifies the number of consecutive columns the `` element spans. The value must be a positive integer greater than zero. If not present, its default value is `1`. - The `span` attribute is not permitted if there are one or more {{HTMLElement("col")}} elements within the ``. + > **Note:** The `span` attribute is not permitted if there are one or more {{HTMLElement("col")}} elements within the ``. ### Deprecated attributes @@ -27,50 +27,138 @@ The following attributes are deprecated and should not be used. They are documen - `align` {{deprecated_inline}} - - : This [enumerated](/en-US/docs/Glossary/Enumerated) attribute specifies how horizontal alignment of each column cell content will be handled. Possible values are: + - : Specifies the horizontal alignment of each column group cell. The possible {{Glossary("enumerated")}} values are `left`, `center`, `right`, `justify`, and `char`. When supported, the `char` value aligns the textual content on the character defined in the [`char`](#char) attribute and the offset defined by the [`charoff`](#charoff) attribute. Note that the descendant {{HTMLElement("col")}} elements may override this value using their own [`align`](/en-US/docs/Web/HTML/Element/col#align) attribute. Use the {{cssxref("text-align")}} CSS property on the {{htmlelement("td")}} and {{htmlelement("th")}} elements instead, as this attribute is deprecated. - - `left`, aligning the content to the left of the cell - - `center`, centering the content in the cell - - `right`, aligning the content to the right of the cell - - `justify`, inserting spaces into the textual content so that the content is justified in the cell - - `char`, aligning the textual content on a special character with a minimal offset, defined by the [`char`](/en-US/docs/Web/HTML/Element/col#char) and [`charoff`](/en-US/docs/Web/HTML/Element/col#charoff) attributes. - - If this attribute is not set, the `left` value is assumed. The descendant {{HTMLElement("col")}} elements may override this value using their own [`align`](/en-US/docs/Web/HTML/Element/col#align) attribute. - - > **Note:** Do not try to set the {{cssxref("text-align")}} property on a selector giving a {{HTMLElement("colgroup")}} element. Because {{HTMLElement("td")}} elements are not descendant of the {{HTMLElement("colgroup")}} element, they won't inherit it. + > **Note:** Setting `text-align` on the `` element has no effect as {{HTMLElement("td")}} and {{HTMLElement("th")}} elements are not descendants of the `` element, and therefore they do not inherit from it. > - > If the table doesn't use a [`colspan`](/en-US/docs/Web/HTML/Element/td#colspan) attribute, use one `td:nth-child(an+b)` CSS selector per column, where 'a' is the total number of the columns in the table and 'b' is the ordinal position of this column in the table. Only after this selector the `text-align` property can be used. + > If the table does not use a [`colspan`](/en-US/docs/Web/HTML/Element/td#colspan) attribute, use the `td:nth-of-type(an+b)` CSS selector per column, where `a` is the total number of the columns in the table and `b` is the ordinal position of the column in the table, e.g. `td:nth-of-type(7n+2) { text-align: right; }` to right-align the second column cells. > > If the table does use a [`colspan`](/en-US/docs/Web/HTML/Element/td#colspan) attribute, the effect can be achieved by combining adequate CSS attribute selectors like `[colspan=n]`, though this is not trivial. -- `bgcolor` {{Deprecated_inline}} - - - : The background color of the table. It is a [6-digit hexadecimal RGB code](/en-US/docs/Web/CSS/hex-color), prefixed by a '`#`'. One of the predefined [color keywords](/en-US/docs/Web/CSS/named-color) can also be used. +- `bgcolor` {{deprecated_inline}} - To achieve a similar effect, use the CSS {{cssxref("background-color")}} property. + - : Defines the background color of each column group cell. The value is an HTML color; either a [6-digit hexadecimal RGB code](/en-US/docs/Web/CSS/hex-color), prefixed by a '`#`', or a [color keyword](/en-US/docs/Web/CSS/named-color). Other CSS {{cssxref("color_value", "<color>")}} values are not supported. Use the {{cssxref("background-color")}} CSS property instead, as this attribute is deprecated. - `char` {{deprecated_inline}} - - : This attribute specifies the alignment of the content in a column group to a character. Typical values for this include a period (.) when attempting to align numbers or monetary values. If [`align`](#align) is not set to `char`, this attribute is ignored, though it will still be used as the default value for the [`align`](/en-US/docs/Web/HTML/Element/col#align) of the {{HTMLElement("col")}} which are members of this column group. + + - : Specifies the alignment of the content to a character of each column group cell. Typical values for this include a period (`.`) when attempting to align numbers or monetary values. If [`align`](#align) is not set to `char`, this attribute is ignored, though it will still be used as the default value for the [`align`](/en-US/docs/Web/HTML/Element/col#align) of the {{HTMLElement("col")}} elements which are members of this column group. + - `charoff` {{deprecated_inline}} - - : This attribute is used to indicate the number of characters to offset the column data from the alignment character specified by the `char` attribute. -- `valign` {{deprecated_inline}} - - : This attribute specifies the vertical alignment of the text within each cell of the column. Possible values for this attribute are: + - : Specifies the number of characters to offset the column group cell content from the alignment character specified by the [`char`](#char) attribute. + +- `valign` {{deprecated_inline}} - - `baseline`, which will put the text as close to the bottom of the cell as it is possible, but align it on the [baseline](https://en.wikipedia.org/wiki/Baseline_%28typography%29) of the characters instead of the bottom of them. If characters are all of the size, this has the same effect as `bottom`. - - `bottom`, which will put the text as close to the bottom of the cell as it is possible; - - `middle`, which will center the text in the cell; - - and `top`, which will put the text as close to the top of the cell as it is possible. + - : Specifies the vertical alignment of each column group cell. The possible {{Glossary("enumerated")}} values are `baseline`, `bottom`, `middle`, and `top`. Note that the descendant {{HTMLElement("col")}} elements may override this value using their own [`valign`](/en-US/docs/Web/HTML/Element/col#valign) attribute. Use the {{cssxref("vertical-align")}} CSS property on the {{htmlelement("td")}} and {{htmlelement("th")}} elements instead, as this attribute is deprecated. - > **Note:** Do not try to set the {{cssxref("vertical-align")}} property on a selector giving a `` element. Because {{HTMLElement("td")}} elements are not descendant of the `` element, they won't inherit it. + > **Note:** Setting `vertical-align` on the `` element has no effect as {{HTMLElement("td")}} and {{HTMLElement("th")}} elements are not descendants of the `` element, and therefore they do not inherit from it. > - > If the table doesn't use a [`colspan`](/en-US/docs/Web/HTML/Element/td#colspan) attribute, use the `td:nth-child(an+b)` CSS selector per column, where 'a' is the total number of the columns in the table and 'b' is the ordinal position of the column in the table. Only after this selector the `vertical-align` property can be used. + > If the table does not use a [`colspan`](/en-US/docs/Web/HTML/Element/td#colspan) attribute, use the [`td:nth-of-type()`](/en-US/docs/Web/CSS/:nth-of-type) CSS selector per column, e.g. `td:nth-of-type(2) { vertical-align: middle; }` to center the second column cells vertically. > > If the table does use a [`colspan`](/en-US/docs/Web/HTML/Element/td#colspan) attribute, the effect can be achieved by combining adequate CSS attribute selectors like `[colspan=n]`, though this is not trivial. -## Examples +- `width` {{deprecated_inline}} + + - : Specifies a default width for each column in the current column group. In addition to the standard pixel and percentage values, this attribute can take the special form `0*`, which means that the width of each column spanned should be the minimum width necessary to hold the column's contents. Relative widths such as `5*` can also be used. Note that the descendant {{HTMLElement("col")}} elements may override this value using their own [`width`](/en-US/docs/Web/HTML/Element/col#width) attribute. Use the {{cssxref("width")}} CSS property instead, as this attribute is deprecated. + +## Usage notes + +- The `` should appear within a {{HTMLElement("table")}}, after any {{HTMLElement("caption")}} element (if used), but before any {{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, and {{HTMLElement("tr")}} elements. +- Only a limited number of CSS properties affect ``: + - {{cssxref("background")}} : The various `background` properties will set the background for cells within the column group. As the column group background color is painted on top of the table, but behind background colors applied to the columns ({{HTMLElement("col")}}), the row groups ({{htmlelement("thead")}}, {{htmlelement("tbody")}}, and {{htmlelement("tfoot")}}), the rows ({{htmlelement("tr")}}), and the individual cells ({{htmlelement("th")}} and {{htmlelement("td")}}), backgrounds applied to table column groups are only visible if every layer painted on top of them has a transparent background. + - {{cssxref("border")}}: The various `border` properties apply, but only if the `
` element as well if you want the same color to be behind both. -## Usage notes +## Example -If used, the `` element must be the first child of its parent {{htmlelement("table")}} element. +See {{HTMLElement("table")}} for a complete table example introducing common standards and best practices. -When the `` element that contains the ``** [HTML](/en-US/docs/Web/HTML) element defines a column within a table and is used for defining common semantics on all common cells. It is generally found within a {{HTMLElement("colgroup")}} element. +The **``** [HTML](/en-US/docs/Web/HTML) element defines one or more columns in a column group represented by its parent {{HTMLElement("colgroup")}} element. The `` element is only valid as a child of a {{HTMLElement("colgroup")}} element that has no [`span`](/en-US/docs/Web/HTML/Element/colgroup#span) attribute defined. {{EmbedInteractiveExample("pages/tabbed/col.html","tabbed-taller")}} -`` allows styling columns using CSS, but only a few properties will have an effect on the column ([see the CSS 2.1 specification](https://www.w3.org/TR/CSS21/tables.html#columns) for a list). - ## Attributes This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attributes). - `span` - - : This attribute contains a positive integer indicating the number of consecutive columns the `` element spans. If not present, its default value is `1`. + - : Specifies the number of consecutive columns the `` element spans. The value must be a positive integer greater than zero. If not present, its default value is `1`. ### Deprecated attributes @@ -26,52 +24,145 @@ The following attributes are deprecated and should not be used. They are documen - `align` {{deprecated_inline}} - - : This [enumerated](/en-US/docs/Glossary/Enumerated) attribute specifies how horizontal alignment of each column cell content will be handled. Possible values are: - - - `left`, aligning the content to the left of the cell - - `center`, centering the content in the cell - - `right`, aligning the content to the right of the cell - - `justify`, inserting spaces into the textual content so that the content is justified in the cell - - If this attribute is not set, its value is inherited from the [`align`](/en-US/docs/Web/HTML/Element/colgroup#align) of the {{HTMLElement("colgroup")}} element this `` element belongs too. If there are none, the `left` value is assumed. + - : Specifies the horizontal alignment of each column cell. The possible {{Glossary("enumerated")}} values are `left`, `center`, `right`, `justify`, and `char`. When supported, the `char` value aligns the textual content on the character defined in the [`char`](#char) attribute and on offset defined by the [`charoff`](#charoff) attribute. Note that this attribute overrides the specified [`align`](/en-US/docs/Web/HTML/Element/colgroup#align) of its {{HTMLElement("colgroup")}} parent element. Use the {{cssxref("text-align")}} CSS property on the {{htmlelement("td")}} and {{htmlelement("th")}} elements instead, as this attribute is deprecated. - > **Note:** To achieve the same effect as the `left`, `center`, `right` or `justify` values, do not try to set the {{cssxref("text-align")}} property on a selector giving a `` element. Because {{HTMLElement("td")}} elements are not descendant of the `` element, they won't inherit it. + > **Note:** Setting `text-align` on the `` element has no effect as `` has no descendants, and therefore no elements inherit from it. > - > If the table doesn't use a [`colspan`](/en-US/docs/Web/HTML/Element/td#colspan) attribute, use the `td:nth-child(an+b)` CSS selector. Set `a` to zero and `b` to the position of the column in the table, e.g. `td:nth-child(2) { text-align: right; }` to right-align the second column. + > If the table does not use a [`colspan`](/en-US/docs/Web/HTML/Element/td#colspan) attribute, use the `td:nth-of-type(an+b)` CSS selector. Set `a` to zero and `b` to the position of the column in the table, e.g. `td:nth-of-type(2) { text-align: right; }` to right-align the second column cells. > > If the table does use a [`colspan`](/en-US/docs/Web/HTML/Element/td#colspan) attribute, the effect can be achieved by combining adequate CSS attribute selectors like `[colspan=n]`, though this is not trivial. -- `bgcolor` {{Deprecated_inline}} +- `bgcolor` {{deprecated_inline}} - - : The background color of the table. It is a [6-digit hexadecimal RGB code](/en-US/docs/Web/CSS/hex-color), prefixed by a '`#`'. One of the predefined [color keywords](/en-US/docs/Web/CSS/color_value#named_colors) can also be used. - - To achieve a similar effect, use the CSS {{cssxref("background-color")}} property. + - : Defines the background color of each column cell. The value is an HTML color; either a [6-digit hexadecimal RGB code](/en-US/docs/Web/CSS/hex-color), prefixed by a '`#`', or a [color keyword](/en-US/docs/Web/CSS/named-color). Other CSS {{cssxref("color_value", "<color>")}} values are not supported. Use the {{cssxref("background-color")}} CSS property instead, as this attribute is deprecated. - `char` {{deprecated_inline}} - - : This attribute sets the character to align the cells in a column on. Typical values for this include a period (.) when attempting to align numbers or monetary values. If [`align`](#align) is not set to `char`, this attribute is ignored. + + - : Specifies the alignment of the content to a character of each column cell. Typical values for this include a period (`.`) when attempting to align numbers or monetary values. If [`align`](#align) is not set to `char`, this attribute is ignored, though it will still override the specified [`char`](/en-US/docs/Web/HTML/Element/colgroup#char) of its {{HTMLElement("colgroup")}} parent element. + - `charoff` {{deprecated_inline}} - - : This attribute is used to indicate the number of characters to offset the column data from the alignment characters specified by the `char` attribute. -- `valign` {{deprecated_inline}} - - : This attribute specifies the vertical alignment of the text within each cell of the column. Possible values for this attribute are: + - : Specifies the number of characters to offset the column cell content from the alignment character specified by the [`char`](#char) attribute. - - `baseline`, which will put the text as close to the bottom of the cell as it is possible, but align it on the [baseline](https://en.wikipedia.org/wiki/Baseline_%28typography%29) of the characters instead of the bottom of them. If characters are all of the size, this has the same effect as `bottom`. - - `bottom`, which will put the text as close to the bottom of the cell as it is possible; - - `middle`, which will center the text in the cell; - - and `top`, which will put the text as close to the top of the cell as it is possible. +- `valign` {{deprecated_inline}} - > **Note:** Do not try to set the {{cssxref("vertical-align")}} property on a selector giving a `` element. Because {{HTMLElement("td")}} elements are not descendant of the `` element, they won't inherit it. + - : Specifies the vertical alignment of each column cell. The possible {{Glossary("enumerated")}} values are `baseline`, `bottom`, `middle`, and `top`. Note that this attribute overrides the specified [`valign`](/en-US/docs/Web/HTML/Element/colgroup#valign) of its {{HTMLElement("colgroup")}} parent element. Use the {{cssxref("vertical-align")}} CSS property on the {{htmlelement("td")}} and {{htmlelement("th")}} elements instead, as this attribute is deprecated. + + > **Note:** Setting `vertical-align` on the `` element has no effect as `` has no descendants, and therefore no elements inherit from it. > - > If the table doesn't use a [`colspan`](/en-US/docs/Web/HTML/Element/td#colspan) attribute, use the `td:nth-child(an+b)` CSS selector where 'a' is the total number of the columns in the table and 'b' is the ordinal position of the column in the table. Only after this selector the `vertical-align` property can be used. + > If the table does not use a [`colspan`](/en-US/docs/Web/HTML/Element/td#colspan) attribute, use the `td:nth-of-type(an+b)` CSS selector. Set `a` to zero and `b` to the position of the column in the table, e.g. `td:nth-of-type(2) { vertical-align: middle; }` to center the second column cells vertically. > > If the table does use a [`colspan`](/en-US/docs/Web/HTML/Element/td#colspan) attribute, the effect can be achieved by combining adequate CSS attribute selectors like `[colspan=n]`, though this is not trivial. - `width` {{deprecated_inline}} - - : This attribute specifies a default width for each column in the current column group. In addition to the standard pixel and percentage values, this attribute might take the special form `0*`, which means that the width of each column in the group should be the minimum width necessary to hold the column's contents. Relative widths such as `5*` also can be used. -## Examples + - : Specifies a default width for each column. In addition to the standard pixel and percentage values, this attribute can take the special form `0*`, which means that the width of each column spanned should be the minimum width necessary to hold the column's contents. Relative widths such as `5*` can also be used. Note that this attribute overrides the specified [`width`](/en-US/docs/Web/HTML/Element/colgroup#width) of its {{HTMLElement("colgroup")}} parent element. Use the {{cssxref("width")}} CSS property instead, as this attribute is deprecated. + +## Usage notes + +- The `` element is used within a {{HTMLElement("colgroup")}} element that doesn't have a `span` attribute. +- The `` elements do not structurally group columns together. This is the role of the {{HTMLElement("colgroup")}} element. +- Only a limited number of CSS properties affect ``: + - {{cssxref("background")}} : The various `background` properties will set the background for cells within the column. As the column background color is painted on top of the table and column groups ({{HTMLElement("colgroup")}}), but behind background colors applied to the row groups ({{htmlelement("thead")}}, {{htmlelement("tbody")}}, and {{htmlelement("tfoot")}}), the rows ({{htmlelement("tr")}}), and the individual cells ({{htmlelement("th")}} and {{htmlelement("td")}}), backgrounds applied to table columns are only visible if every layer painted on top of them has a transparent background. + - {{cssxref("border")}}: The various `border` properties apply, but only if the `
` is the only descendant of a {{HTMLElement("figure")}} element, you should use the {{HTMLElement("figcaption")}} element instead of ``. +This example demonstrates a basic table that includes a caption describing the data presented. -A {{cssxref("background-color")}} on the table will not include the caption. Add a `background-color` to the `` element as well if you want the same color to be behind both. +Such a "title" is helpful for users who are quickly scanning the page, and it is especially beneficial for visually impaired users, allowing them to determine the table's relevance quickly without the need to have a screen reader read the contents of many cells just to find out what the table is about. -## Example +#### HTML -This simple example presents a table that includes a caption. +A `` element is used as the first child of the {{HTMLElement("table")}}, with text content similar to a title to describe the table data. Three rows, the first being a header row, with two columns are created using the {{HTMLElement("tr")}}, {{HTMLElement("th")}} and {{HTMLElement("td")}} elements after the ``. ```html @@ -57,31 +52,55 @@ This simple example presents a table that includes a caption. - + - +
- Example Caption + User login email addresses
Login
user1user1@sample.comuser1@example.com
user2user2@sample.comuser2@example.com
``` -```css hidden +#### CSS + +Some basic CSS is used to align and highlight the ``. + +```css caption { caption-side: top; + text-align: left; + padding-bottom: 10px; + font-weight: bold; } +``` + +```css hidden table { border-collapse: collapse; - border-spacing: 0px; + border: 2px solid rgb(140 140 140); + font-family: sans-serif; + font-size: 0.8rem; + letter-spacing: 1px; } -table, + th, td { - border: 1px solid black; + border: 1px solid rgb(160 160 160); + padding: 8px 10px; +} + +th { + background-color: rgb(230 230 230); +} + +td { + text-align: center; } ``` -{{EmbedLiveSample('Example', 650, 100)}} +#### Result + +{{EmbedLiveSample('Example', 650, 140)}} ## Technical summary @@ -146,6 +165,7 @@ td { ## See also -- CSS properties that may be specially useful to style the {{HTMLElement("caption")}} element: - - - {{cssxref("text-align")}}, {{cssxref("caption-side")}}. +- [Learn: HTML tables](/en-US/docs/Learn/HTML/Tables) +- {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}}: Other table-related elements +- {{cssxref("caption-side")}}: CSS property to position the `` relative to its parent {{HTMLElement("table")}} +- {{cssxref("text-align")}}: CSS property to horizontally align the text content of the `` diff --git a/files/en-us/web/html/element/col/index.md b/files/en-us/web/html/element/col/index.md index fabbfc93749a59c..0361511cb4561f8 100644 --- a/files/en-us/web/html/element/col/index.md +++ b/files/en-us/web/html/element/col/index.md @@ -7,18 +7,16 @@ browser-compat: html.elements.col {{HTMLSidebar}} -The **`
` has {{cssxref("border-collapse", "border-collapse: collapse")}} set. + - {{cssxref("visibility")}}: The value `collapse` for a column results in all cells of that column not being rendered, and cells spanning into other columns being clipped. The space these columns would have occupied is removed. However, the size of other columns is still calculated as though the cells in the collapsed column(s) are present. Other values for `visibility` have no effect. + - {{cssxref("width")}}: The `width` property defines a minimum width for the column, as if {{cssxref("min-width")}} were set. + +## Example + +See {{HTMLElement("table")}} for a complete table example introducing common standards and best practices. + +This example demonstrates an eight-column table divided into three `` elements. + +### HTML + +A {{HTMLElement("colgroup")}} element provides structures to a basic table, creating a single implicit column group. Three `` elements are included within the ``, creating three stylable columns. The [`span`](#span) attribute specifies the number of table columns each `` should span (defaulting to `1` when omitted), enabling attributes to be shared across the columns in each ``. + +```html +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Personal weekly activities +
PeriodMonTueWedThuFriSatSun
a.m.Clean roomFootball trainingDance CourseHistory ClassBuy drinksStudy hourFree time
p.m.YogaChess ClubMeet friendsGymnasticsBirthday partyFishing tripFree time
+``` + +### CSS + +We use CSS, instead of deprecated HTML attributes, to provide a background color to the columns and align the cell content: + +```css +table { + border-collapse: collapse; + border: 2px solid rgb(140 140 140); +} + +caption { + caption-side: bottom; + padding: 10px; +} + +th, +td { + border: 1px solid rgb(160 160 160); + padding: 8px 6px; + text-align: center; +} -Please see the {{HTMLElement("table")}} page for examples on `
` has {{cssxref("border-collapse", "border-collapse: collapse")}} set. + - {{cssxref("visibility")}}: The value `collapse` for a column group results in all cells of the columns in that column group not being rendered, and cells spanning into other columns being clipped. The space these columns in the column group would have occupied is removed. However, the size of other columns is still calculated as though the cells in the collapsed column(s) in the column group are present. Other values for `visibility` have no effect. + - {{cssxref("width")}}: The `width` property defines a minimum width for the columns within the column group, as if {{cssxref("min-width")}} were set. + +## Example + +See {{HTMLElement("table")}} for a complete table example introducing common standards and best practices. + +This example demonstrates a seven-column table divided into two `` elements that span multiple columns. + +### HTML + +Two `` elements are used to structure a basic table by creating column groups. The number of columns in each column group is specified by the [`span`](#span) attribute. + +```html +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Personal weekly activities +
MonTueWedThuFriSatSun
Clean roomFootball trainingDance CourseHistory ClassBuy drinksStudy hourFree time
YogaChess ClubMeet friendsGymnasticsBirthday partyFishing tripFree time
+``` + +### CSS -Please see the {{HTMLElement("table")}} page for examples on `
Permitted parents A {{HTMLElement("table")}} element. The - {{HTMLElement("colgroup")}} must appear after any optional - {{HTMLElement("caption")}} element but before any - {{HTMLElement("thead")}}, {{HTMLElement("th")}}, - {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}} and - {{HTMLElement("tr")}} element. + {{HTMLElement("colgroup")}} must appear after any + {{HTMLElement("caption")}} element, but before any + {{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, + {{HTMLElement("tfoot")}}, and + {{HTMLElement("tr")}} elements.
`** [HTML](/en-US/docs/Web/HTML) element represents tabular data — that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data. +The **`
`** [HTML](/en-US/docs/Web/HTML) element represents tabular data—that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data. -{{EmbedInteractiveExample("pages/tabbed/table.html","tabbed-standard")}} - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Content categories - - Flow content -
Permitted content - In this order: -
    -
  1. an optional {{HTMLElement("caption")}} element,
    2. -
  2. zero or more {{HTMLElement("colgroup")}} elements,
    3. -
  3. an optional {{HTMLElement("thead")}} element,
    4. -
  4. - either one of the following: -
      -
    • zero or more {{HTMLElement("tbody")}} elements
      • -
    • one or more {{HTMLElement("tr")}} elements
      • -
    -
    5. -
  5. an optional {{HTMLElement("tfoot")}} element
    6. -
-
Tag omission{{no_tag_omission}}
Permitted parentsAny element that accepts flow content
Implicit ARIA role - table -
Permitted ARIA rolesAny
DOM interface{{domxref("HTMLTableElement")}}
+{{EmbedInteractiveExample("pages/tabbed/table.html","tabbed-taller")}} ## Attributes @@ -79,68 +17,45 @@ This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attrib ### Deprecated attributes -- `align` {{Deprecated_inline}} - - - : This [enumerated](/en-US/docs/Glossary/Enumerated) attribute indicates how the table must be aligned inside the containing document. It may have the following values: - - - `left`: the table is displayed on the left side of the document; - - `center`: the table is displayed in the center of the document; - - `right`: the table is displayed on the right side of the document. - - Set {{cssxref("margin-left")}} and {{cssxref("margin-right")}} to achieve an effect that is similar to the align attribute: - - - `left`: `margin-right: auto; margin-left: 0;` - - `center`: `margin-right: auto; margin-left: auto;` - - `right`: `margin-right: 0; margin-left: auto;` - -- `bgcolor` {{Deprecated_inline}} +The following attributes are deprecated and should not be used. They are documented below for reference when updating existing code and for historical interest only. - - : The background color of the table. It is a [6-digit hexadecimal RGB code](/en-US/docs/Web/CSS/hex-color), prefixed by a '`#`'. One of the predefined [color keywords](/en-US/docs/Web/CSS/named-color) can also be used. +- `align` {{deprecated_inline}} - To achieve a similar effect, use the CSS {{cssxref("background-color")}} property. + - : Specifies the horizontal alignment of the table within its parent element. The possible {{Glossary("enumerated")}} values are `left`, `center`, and `right`. Use the {{cssxref("margin-inline-start")}} and {{cssxref("margin-inline-end")}} CSS properties instead, as this attribute is deprecated. -- `border` {{Deprecated_inline}} +- `bgcolor` {{deprecated_inline}} - - : This integer attribute defines, in pixels, the size of the frame surrounding the table. If set to 0, the [`frame`](#frame) attribute is set to void. + - : Defines the background color of the table. The value is an HTML color; either a [6-digit hexadecimal RGB code](/en-US/docs/Web/CSS/hex-color), prefixed by a '`#`', or a [color keyword](/en-US/docs/Web/CSS/named-color). Other CSS {{cssxref("color_value", "<color>")}} values are not supported. Use the {{cssxref("background-color")}} CSS property instead, as this attribute is deprecated. - To achieve a similar effect, use the CSS {{cssxref("border")}} shorthand property. +- `border` {{deprecated_inline}} -- `cellpadding` {{Deprecated_inline}} + - : Defines, as a non-negative integer value (in pixels), the size of the frame surrounding the table. If set to `0`, the [`frame`](#frame) attribute is set to void. Use the {{cssxref("border")}} CSS property instead, as this attribute is deprecated. - - : This attribute defines the space between the content of a cell and its border, displayed or not. If the cellpadding's length is defined in pixels, this pixel-sized space will be applied to all four sides of the cell's content. If the length is defined using a percentage value, the content will be centered and the total vertical space (top and bottom) will represent this value. The same is true for the total horizontal space (left and right). +- `cellpadding` {{deprecated_inline}} - To achieve a similar effect, apply the {{cssxref("border-collapse")}} property to the `` element, with its value set to collapse, and the {{cssxref("padding")}} property to the {{HTMLElement("td")}} elements. + - : Defines the space between the content of a cell and its border, displayed or not. If the cellpadding's length is defined in pixels, this pixel-sized space will be applied to all four sides of the cell's content. If the length is defined using a percentage value, the content will be centered and the total vertical space (top and bottom) will represent this value. The same is true for the total horizontal space (left and right). Apply the {{cssxref("border-collapse")}} CSS property to the `
` element, with its value set to `collapse`, and the {{cssxref("padding")}} CSS property to the {{HTMLElement("td")}} elements instead, as this attribute is deprecated. -- `cellspacing` {{Deprecated_inline}} +- `cellspacing` {{deprecated_inline}} - - : This attribute defines the size of the space between two cells in a percentage value or pixels. The attribute is applied both horizontally and vertically, to the space between the top of the table and the cells of the first row, the left of the table and the first column, the right of the table and the last column and the bottom of the table and the last row. + - : Defines the size of the space between two cells in a percentage value or pixels. The attribute is applied both horizontally and vertically, to the space between the top of the table and the cells of the first row, the left of the table and the first column, the right of the table and the last column and the bottom of the table and the last row. Apply the {{cssxref("border-spacing")}} CSS property to the `
` element instead, as this attribute is deprecated. `border-spacing` does not have any effect if the {{cssxref("border-collapse")}} CSS property is set to `collapse`. - To achieve a similar effect, apply the {{cssxref("border-spacing")}} property to the `
` element. `border-spacing` does not have any effect if {{cssxref("border-collapse")}} is set to collapse. +- `frame` {{deprecated_inline}} -- `frame` {{Deprecated_inline}} + - : Defines which side of the frame surrounding the table must be displayed. The possible {{Glossary("enumerated")}} values are `void`, `above`, `below`, `hsides`, `vsides`, `lhs`, `rhs`, `box` and `border`. Use the {{cssxref("border-style")}} and {{cssxref("border-width")}} CSS properties instead, as this attribute is deprecated. - - : This enumerated attribute defines which side of the frame surrounding the table must be displayed. +- `rules` {{deprecated_inline}} - To achieve a similar effect, use the {{cssxref("border-style")}} and {{cssxref("border-width")}} properties. + - : Defines where rules (borders) are displayed in the table. The possible {{Glossary("enumerated")}} values are `none` (default value), `groups` ({{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, and {{HTMLElement("tfoot")}} elements), `rows` (horizontal lines), `cols` (vertical lines), and `all` (border around every cell). Use the {{cssxref("border")}} CSS property on the appropriate table-related elements, as well as on the `
` itself, instead, as this attribute is deprecated. -- `rules` {{Deprecated_inline}} +- `summary` {{deprecated_inline}} - - : This enumerated attribute defines where rules, i.e. lines, should appear in a table. It can have the following values: + - : Defines an alternative text that summarizes the content of the table. Use the {{htmlelement("caption")}} element instead, as this attribute is deprecated. - - `none`, which indicates that no rules will be displayed; it is the default value; - - `groups`, which will cause the rules to be displayed between row groups (defined by the {{HTMLElement("thead")}}, {{HTMLElement("tbody")}} and {{HTMLElement("tfoot")}} elements) and between column groups (defined by the {{HTMLElement("col")}} and {{HTMLElement("colgroup")}} elements) only; - - `rows`, which will cause the rules to be displayed between rows; - - `cols`, which will cause the rules to be displayed between columns; - - `all`, which will cause the rules to be displayed between rows and columns. +- `width` {{deprecated_inline}} - To achieve a similar effect, apply the {{cssxref("border")}} property to the appropriate {{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("col")}}, or {{HTMLElement("colgroup")}} elements. + - : Specifies the width of the table. Use the {{cssxref("width")}} CSS property instead, as this attribute is deprecated. -- `summary` {{Deprecated_inline}} - - : This attribute defines an alternative text that summarizes the content of the table. Use the {{htmlelement("caption")}} element instead. -- `width` {{Deprecated_inline}} - - : This attribute defines the width of the table. Use the CSS {{cssxref("width")}} property instead. - -> **Note:** While no HTML specification includes `height` as a `
` attribute, some browsers support a non-standard interpretation of `height`. The unitless value sets a minimum absolute height in pixels. If set as a percent value, the minimum table height will be relative to the height of the parent container. + > **Note:** While no HTML specification includes `height` as a `
` attribute, some browsers support a non-standard interpretation of `height`. The unitless value sets a minimum absolute height in pixels. If set as a percent value, the minimum table height will be relative to the parent container's height. Use the {{cssxref("min-height")}} CSS property instead, as this attribute is deprecated. ## Visual layout of table contents @@ -176,241 +91,577 @@ The background set on an element in one layer will be visible only if the layers ## Examples -### Simple table +The examples below include tables of progressively increasing complexity. For additional examples, including an in-depth tutorial, see the [HTML tables](/en-US/docs/Learn/HTML/Tables) series in the [Learn web development](/en-US/docs/Learn) area, where you'll learn how to use the table elements and their attributes to correctly structure your tabular data. A [Styling tables](/en-US/docs/Learn/CSS/Building_blocks/Styling_tables) guide provides table styling information, including common, useful techniques. + +Since the structure of a `
` involves the use of several table-related HTML elements along with various associated attributes, the following examples are intended to provide a simplified explanation that covers the basics and common standards. Additional and more detailed information can be found on the corresponding linked pages. + +These table examples demonstrate how to create an {{Glossary("accessibility", "accessible")}} table that is structured with HTML and styled with [CSS](/en-US/docs/Web/CSS). + +Because of how HTML tables are structured, the {{Glossary("markup", "markup")}} can quickly grow. For this reason, it is important to clearly define the table's purpose and final appearance to create the appropriate structure. A logical structure developed with {{Glossary("semantics", "semantic")}} markup is not only easier to style, but enables useful and accessible tables that can be understood and navigated by everyone, including search engines and users of assistive technologies. + +The first example is basic, with subsequent examples growing in complexity. First, we will develop a very basic HTML table structure for the table. The first two examples contain no table section groups such as a defined head, body, or foot, and involve no cell spanning or explicitly defined cell relationships. Not even a caption is provided. As we work through the examples, they will be progressively enhanced to include all the table features that a complex data table should possess. + +### Basic table + +This example includes a _very_ basic table with three rows and two columns. To demonstrate default browser table styles, no CSS has been included in this example. + +#### HTML + +The table rows are defined with {{HTMLElement("tr")}} elements, and the columns are defined with table header and data cells within them. The first row contains the header cells ({{HTMLElement("th")}} elements) that serve as column headers for the data cells ({{HTMLElement("td")}} elements). Each element ({{HTMLElement("th")}} or {{HTMLElement("td")}}) per row is in its respective column—that is, the first element of a row is in the first column, and the second element of that row is in the second column. ```html
- - + + - - + + + + + +
JohnDoeNameAge
JaneDoeMaria Sanchez28
Michael Johnson34
``` #### Result -{{EmbedLiveSample('Simple_table', '100%', '100')}} +There is no custom [CSS](/en-US/docs/Web/CSS) or [user stylesheet](/en-US/docs/Web/CSS/Cascade#author_stylesheets) applied to this table. The styling results purely from the [user-agent stylesheet](/en-US/docs/Web/CSS/Cascade#user-agent_stylesheets). + +{{EmbedLiveSample('Basic_table', 650, 80)}} -### Further simple examples +### Expanded table with header cells + +This example extends the [basic table](#basic_table), extending the content and adding basic CSS styles. + +#### HTML + +The table comprises four rows ({{HTMLElement("tr")}} elements) now, with four columns each. The first row is a row of header cells (The first row contains only {{HTMLElement("th")}} elements). Subsequent rows include a header column ({{HTMLElement("th")}} elements as the first child elements of each row) and three data columns ({{HTMLElement("td")}} elements). As table sectioning elements are not used, the browser automatically defines the content group structure, i.e., all rows are wrapped within the body of the table of an implicit {{HTMLElement("tbody")}} element. ```html -

Simple table with header

- - + + + + - - + + + + - - + + + + + + + + + +
First nameLast nameNameIDMember SinceBalance
JohnDoeMargaret Nguyen4273110.00
JaneDoeEdvard Galinski53317537.00
Hoshi Nakamura60194215.00
+``` -

Table with thead, tfoot, and tbody

+#### CSS + +With CSS, we provide the basic styling to create lines around the components of the table to make the data structure clearer. The CSS adds a solid border around the `` and around each of the table's cells, including those specified with both {{HTMLElement("th")}} and {{HTMLElement("td")}} elements, demarcating every header and data cells. + +```css +table { + border: 2px solid rgb(140 140 140); +} + +th, +td { + border: 1px solid rgb(160 160 160); +} +``` + +#### Result + +{{EmbedLiveSample("Expanded_table_with_header_cells", 650, 110)}} + +### Specifying table cell relations + +Before moving on to extend the table in more advanced ways, it's advisable to improve {{Glossary("accessibility", "accessibility")}} by defining relationships between the header and data cells ({{HTMLElement("th")}} and {{HTMLElement("td")}} elements). + +#### HTML + +This is accomplished by introducing the [`scope`](/en-US/docs/Web/HTML/Element/th#scope) attribute on the {{HTMLElement("th")}} elements and setting the values to the corresponding `col` (column) or `row` value. + +```html +
+ + + + + + + + + + + + + + + + + + + + + + + + +
NameIDMember SinceBalance
Margaret Nguyen4273110.00
Edvard Galinski53317537.00
Hoshi Nakamura60194215.00
+``` + +The CSS and visual result are unchanged—the adaptation provides valuable contextual information for assistive technologies such as screen readers to help identify which cells the headers relate to. + +> **Note:** If the table structure is even more complex, the (additional) use of the [`headers`](/en-US/docs/Web/HTML/Element/th#headers) attribute on the {{HTMLElement("th")}} and {{HTMLElement("td")}} elements may improve accessibility and help assistive technologies identify the relationships between cells; see [Complicated tables](#complicated_tables). + +### Explicitly specifying table section groups + +In addition to improving accessibility by [specifying cell relations](#specifying_table_cell_relations), the {{Glossary("semantics", "semantics")}} of the table can be improved by introducing table section groups. + +#### HTML + +Since the first row ({{HTMLElement("tr")}} element) contains only column header cells and provides the header for the rest of the table's contents, it can be enclosed in the {{HTMLElement("thead")}} element to explicitly specify that row as the head section of the table. Moreover, what is automatically accomplished by the browser can also be defined explicitly—the body section of the table, which contains the main data of the table, is specified by enclosing the corresponding rows in the {{HTMLElement("tbody")}} element. The explicit use of the {{HTMLElement("tbody")}} element helps the browser to create the intended table structure, avoiding unwanted results. + +```html - - + + + + - - + + + + - - - - + + + + - + + + + + + +
Header content 1Header content 2NameIDMember SinceBalance
Body content 1Body content 2Margaret Nguyen4273110.00
Footer content 1Footer content 2Edvard Galinski53317537.00
Hoshi Nakamura60194215.00
+``` -

Table with colgroup

- - - - - - - - - - - - - - - - - - - - -
CountriesCapitalsPopulationLanguage
USAWashington, D.C.309 millionEnglish
SwedenStockholm9 millionSwedish
+Once again, the CSS and visual result are unchanged—specifying such table section groups provides valuable contextual information for assistive technologies, including screen readers and search engines, as well as for styling in the CSS, which will be shown ion a later example. -

Table with colgroup and col

- - - - - - - - - - - - - - - -
LimeLemonOrange
GreenYellowOrange
+### Column and row spanning -

Simple table with caption

+In this example, we extend the table even more by adding a column and introducing a multi-row head section. + +#### HTML + +Building on the table created so far, a new column for a "Membership End Date" is added in each body row with the {{HTMLElement("td")}} element. An additional row ({{HTMLElement("tr")}} element) is also added within the head section ({{HTMLElement("thead")}} element) to introduce a "Membership Dates" header as a heading for the "Joined" and "Canceled" columns. + +The creation of the second header row involves adding [`colspan`](/en-US/docs/Web/HTML/Element/th#colspan) and [`rowspan`](/en-US/docs/Web/HTML/Element/th#rowspan) attributes to the {{HTMLElement("th")}} elements to allocate the header cells to the correct columns and rows. + +```html - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
- Awesome caption -
Awesome data
NameIDMembership DatesBalance
JoinedCanceled
Margaret Nguyen427311n/a0.00
Edvard Galinski53317537.00
Hoshi Nakamura601942n/a15.00
``` ```css hidden table { - border-collapse: collapse; - border-spacing: 0px; + border: 2px solid rgb(140 140 140); } -table, + th, td { - padding: 5px; - border: 1px solid black; + border: 1px solid rgb(160 160 160); } ``` #### Result -{{EmbedLiveSample('Further_simple_examples', '100%', '700')}} +{{EmbedLiveSample("Column_and_row_spanning", 650, 130)}} -### Table sorting +The head section now has two rows, one with the headers ({{HTMLElement("th")}} elements) "Name", "ID", "Membership Dates", and "Balance", and a "Membership Dates" header with two subheaders that are in a second row: "Joined" and "Canceled". This is accomplished by: -#### Sorting table rows +- The first row's "Name", "ID", and "Balance" header cells span both table header rows by using the [`rowspan`](/en-US/docs/Web/HTML/Element/th#rowspan) attribute, making them each two rows tall. +- The first row's "Membership Dates" header cell spans two columns using the [`colspan`](/en-US/docs/Web/HTML/Element/th#colspan) attribute, causing it to be two columns wide. +- The second row contains only the two header cells "Joined" and "Canceled" because the other three columns are merged with the cells in the first row that span two rows. The two header cells are correctly positioned under the "Membership Dates" header. -There are no native methods for sorting the rows ([``](/en-US/docs/Web/HTML/Element/tr) elements) of an HTML table. But using [`Array.prototype.slice()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice), [`Array.prototype.sort()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort), [`Node.removeChild()`](/en-US/docs/Web/API/Node/removeChild), and [`Node.appendChild()`](/en-US/docs/Web/API/Node/appendChild), you can implement your own `sort()` function to sort an [`HTMLCollection`](/en-US/docs/Web/API/HTMLCollection) of `` elements. +### Table caption and column summary -In the below example, you can see such an example. We are attaching it to the \ element so that it sorts the table cells in order of increasing value, and updates the display to suit. +It's a common and advisable practice to provide a summary for the table's content, allowing users to quickly determine the table's relevance. Furthermore, the "Balance" column is summarized by displaying the sum of the balances of the individual members. -##### HTML +#### HTML + +A table summary is added by using a table [caption](#captions) ({{HTMLElement("caption")}} element) as the first child element of the ``. The caption provides the {{glossary("accessible description")}} for the table. + +Lastly, a table foot section ({{HTMLElement("tfoot")}} element) is added below the body, with a row that summarizes the "Balance" column by displaying a sum. The elements and attributes introduced earlier are applied. ```html
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Status of the club members 2021 +
NameIDMembership DatesBalance
JoinedCanceled
Margaret Nguyen427311n/a0.00
Edvard Galinski53317537.00
Hoshi Nakamura601942n/a15.00
Total balance52.00
+``` + +```css hidden +table { + border: 2px solid rgb(140 140 140); +} + +th, +td { + border: 1px solid rgb(160 160 160); +} +``` + +#### Result + +{{EmbedLiveSample("Table_caption_and_column_summary", 650, 180)}} + +### Basic table styling + +Let's apply a basic style to the table to adjust the typeface and add a {{cssxref("background-color")}} to the head and foot rows. The HTML is unchanged this time, so let's dive right into the CSS. + +```html hidden + + + + + + + + + + + + + + - + + + + + - + + + + + - + + + + + + + + + + +
+ Status of the club members 2021 +
NameIDMembership DatesBalance
JoinedCanceled
3Margaret Nguyen427311n/a0.00
2Edvard Galinski53317537.00
1Hoshi Nakamura601942n/a15.00
Total balance52.00
``` -##### JavaScript +#### CSS + +While a {{cssxref("font")}} property is added to the `` element here to set a more visually appealing typeface (or an abominable sans-serif typeface, depending on your personal opinion), the interesting part is the second style, where the {{HTMLElement("tr")}} elements located within the {{HTMLElement("thead")}} and {{HTMLElement("tfoot")}} are styled adding a light blue {{cssxref("background-color")}}. This is a way to quickly apply a background color to all the cells in specific sections simultaneously. + +```css +table { + border: 2px solid rgb(140 140 140); + font: + 16px "Open Sans", + Helvetica, + Arial, + sans-serif; +} -```js -HTMLTableSectionElement.prototype.sort = function (cb) { - Array.from(this.rows) - .sort(cb) - .forEach((e) => this.appendChild(this.removeChild(e))); -}; +thead > tr, +tfoot > tr { + background-color: rgb(228 240 245); +} -document - .querySelector("table") - .tBodies[0].sort((a, b) => a.textContent.localeCompare(b.textContent)); +th, +td { + border: 1px solid rgb(160 160 160); +} ``` -##### Result +#### Result + +{{EmbedLiveSample("Basic_table_styling", 650, 180)}} -{{EmbedLiveSample('Sorting_table_rows', '100%', '100')}} +### Advanced table styling -#### Sorting rows with a click on the th element +Now we'll go all-out, with styles on rows in the header and body areas both, including alternating row colors, cells with different colors depending on position within a row, and so forth. Let's take a look at the result first this time. -The following example adds an event handler to every ``. However, we don't do this for the `` to avoid long titles forcing columns to be wider than they need to be to display the data. +#### CSS + +When looking at these styles you'll notice that table's {{cssxref("display")}} property has been set to `block`. While this allows scrolling, the table loses some of its integrity, and table cells try to become as small as possible. To mitigate this issue we've set {{cssxref("white-space")}} to `nowrap` on the {{HTMLElement("tbody")}}. However, we don't do this for the {{HTMLElement("thead")}} to avoid long titles forcing columns to be wider than they need to be to display the data. + +To keep the table headers on the page while scrolling down we've set {{cssxref("position")}} to sticky on the {{HTMLElement("th")}} elements. Note that we have **not** set {{cssxref("border-collapse")}} to `collapse`, as if we do the header cannot be separated correctly from the rest of the table. -To keep the table headers on the page while scrolling down we've set {{cssxref("position")}} to sticky on the `` block _must_ come after it. -- If {{HTMLElement("tr")}} elements are specified outside an existing `` element, as direct children of the {{HTMLElement("table")}}, these elements will be encapsulated by a separate `` element generated by the browser. -- When printing a document, the `` and {{htmlelement("tfoot")}} elements specify information that may be the same—or at least very similar—on every page of a multipage table, while the `` element's contents generally will differ from page to page. -- When a table is presented in a screen context (such as a window) which is not large enough to display the entire table, the {{Glossary("user agent")}} may let the user scroll the contents of the ``, ``, ``, and {{HTMLElement("caption")}} blocks separately from one another for the same parent table. -- You _may_ use more than one `` per table as long as they are all consecutive. This lets you divide the rows in large tables into sections, each of which may be separately formatted if so desired. If not marked up to be consecutive elements, browsers will correct this author error, ensuring any `` and `` elements are rendered as the first and last elements of the table, respectively. +- The `` is placed after any {{HTMLElement("caption")}}, {{HTMLElement("colgroup")}}, and {{HTMLElement("thead")}} elements. +- If {{HTMLElement("tr")}} elements are specified outside an existing `` element as direct children of the {{HTMLElement("table")}}, these elements will be encapsulated by a separate `` element generated by the browser. +- It's permitted to use more than one `` per table as long as they are all consecutive. This allows to divide the rows ({{HTMLElement("tr")}} elements) in large tables into sections, each of which may be separately formatted if so desired. If not marked up to be consecutive elements, browsers will correct this author error, ensuring any {{HTMLElement("thead")}} and {{HTMLElement("tfoot")}} elements are rendered as the first and last elements of the table, respectively. +- Along with its related {{HTMLElement("thead")}} and {{HTMLElement("tfoot")}} elements, the `` element provides useful {{Glossary("semantics", "semantic")}} information and can be used when rendering for either screen or print. Specifying such table content groups also provides valuable contextual information for assistive technologies, including screen readers and search engines. +- When printing a document, in the case of a multipage table, the {{HTMLElement("thead")}} and {{htmlelement("tfoot")}} elements usually specify information that remains the same—or at least very similar—on each page, while the `` element's contents generally will differ from page to page. +- When a table is presented in a screen context (such as a window) that is not large enough to display the entire table, the {{Glossary("user agent")}} may let the user scroll the contents of the {{HTMLElement("thead")}}, ``, {{htmlelement("tfoot")}}, and {{HTMLElement("caption")}} blocks separately from one another for the same parent {{htmlelement("table")}}. ## Examples -Below are some examples showing the use of the `` element. For more examples of this element, see the examples for {{ HTMLElement("table", "", "#Examples") }}. +See {{HTMLElement("table")}} for a complete table example introducing common standards and best practices. -### Basic example +### Not specifying a body -In this relatively simple example, we create a table containing information about a group of students with a {{HTMLElement("thead")}} and a {{HTMLElement("tbody")}}, with a number of rows in the body. +This example demonstrates that the browser automatically encapsulates {{HTMLElement("tr")}} elements within a `` element if the rows are not nested within a table grouping element (``, ``, or ``) and are, as in this example, the direct children of the {{HTMLElement("table")}} element. #### HTML -The table's HTML is shown here. Note that all the body cells including information about students are contained within a single `` element. +Here, a very basic table with some table rows ({{HTMLElement("tr")}} elements) containing data ({{HTMLElement("td")}} elements) about students is created. + +```html +
` element of every `` in the `document`; it sorts all the ``'s rows, basing the sorting on the `td` cells contained in the rows. +#### Result -> **Note:** This solution assumes that the `
` elements are populated by raw text with no descendant elements. +Here's what the final table will look like: -##### HTML +{{EmbedLiveSample("Advanced_table_styling", 650, 210)}} -```html +There is no change to the HTML again. See what proper preparation of the HTML structure can do? + +```html hidden + - - + + + + + + + + - - + + + + + - - + + + + + - - + + + + + + + + + + +
+ Status of the club members 2021 +
NumbersLettersNameIDMembership DatesBalance
JoinedCanceled
3AMargaret Nguyen427311n/a0.00
2BEdvard Galinski53317537.00
1CHoshi Nakamura601942n/a15.00
Total balance52.00
``` -##### JavaScript +#### CSS + +The CSS is much more involved this time. It's not complicated, but there's a lot going on. Let's break it down. + +Here the {{CSSxRef("border-collapse")}} and {{CSSxRef("border-spacing")}} properties are added to eliminate spacing between cells and collapse borders that touch one another to be a single border instead of winding up with double borders. Additionally, the {{HTMLElement("caption")}} is placed at the `bottom` of the table using the {{CSSxRef("caption-side")}} property: + +```css +table { + border-collapse: collapse; + border-spacing: 0; + border: 2px solid rgb(140 140 140); + font: + 16px "Open Sans", + Helvetica, + Arial, + sans-serif; +} + +caption { + caption-side: bottom; + padding: 10px; + font-weight: bold; +} +``` + +Next, the {{CSSxRef("padding")}} property is used to give all the table cells space around their content. The {{CSSxRef("vertical-align")}} property aligns the content of the header cells to the `bottom` of the cell, which can be seen on the cells in the head that span two rows: + +```css +th, +td { + border: 1px solid rgb(160 160 160); + padding: 4px 6px; +} + +th { + vertical-align: bottom; +} +``` + +The next CSS rule sets the {{cssxref("background-color")}} of all {{HTMLElement("tr")}} elements in the table's head (as specified using {{HTMLElement("thead")}}). Then the bottom border of the head is set to be a two-pixel wide line. Notice, however, that we're using the {{CSSxRef(":nth-of-type")}} selector to apply the {{CSSxRef("border-bottom")}} property to the _second_ row in the head. Why? Because the head is made of two rows that are spanned by some of the cells. That means there are actually two rows there; applying the style to the first row would not give us the expected result: + +```css +thead > tr { + background-color: rgb(228 240 245); +} + +thead > tr:nth-of-type(2) { + border-bottom: 2px solid rgb(140 140 140); +} +``` + +Let's style the two header cells "Joined" and "Canceled" with green and red hues to represent the "good" of a new member and the "bummer" of a canceled membership. Here we dig into the last row of the table's head section using the {{CSSxRef(":last-of-type")}} selector and give the first header cell in it (the "Joined" header) a greenish color, and the second header cell in it (the "Canceled" header) a reddish hue: -```js -const allTables = document.querySelectorAll("table"); +```css +thead > tr:last-of-type > th:nth-of-type(1) { + background-color: rgb(225 255 225); +} + +thead > tr:last-of-type > th:nth-of-type(2) { + background-color: rgb(255 225 225); +} +``` -for (const table of allTables) { - const tBody = table.tBodies[0]; - const rows = Array.from(tBody.rows); - const headerCells = table.tHead.rows[0].cells; +Since the first column should stand out as well, some custom styling is added here too. This CSS rule styles the first header cell in each row of the table's body with the {{CSSxRef("text-align")}} property to left-justify the member names, and with a somewhat different {{cssxref("background-color")}}: - for (const th of headerCells) { - const cellIndex = th.cellIndex; +```css +tbody > tr > th:first-of-type { + text-align: left; + background-color: rgb(225 229 244); +} +``` - th.addEventListener("click", () => { - rows.sort((tr1, tr2) => { - const tr1Text = tr1.cells[cellIndex].textContent; - const tr2Text = tr2.cells[cellIndex].textContent; - return tr1Text.localeCompare(tr2Text); - }); +It's common to help improve the readability of table data by alternating row colors—this is sometimes referred to as "zebra striping". Let's add a bit of {{cssxref("background-color")}} to every even row: - tBody.append(...rows); - }); - } +```css +tbody > tr:nth-of-type(even) { + background-color: rgb(237 238 242); } ``` -##### Result +Since it's standard practice to right-justify currency values in tables, let's do that here. This just sets the {{CSSxRef("text-align")}} property for the last {{HTMLElement("td")}} in each body row to `right`: -{{EmbedLiveSample('Sorting_rows_with_a_click_on_the_th_element', '100%', '100')}} +```css +tbody > tr > td:last-of-type { + text-align: right; +} +``` + +Finally, some styling similar to the head is applied to the foot section of the table to make it stand out as well: + +```css +tfoot > tr { + border-top: 2px dashed rgb(140 140 140); + background-color: rgb(228 240 245); +} + +tfoot th, +tfoot td { + text-align: right; + font-weight: bold; +} +``` ### Displaying large tables in small spaces @@ -593,24 +844,28 @@ This example provides one way to display tables in small spaces. We've hidden th
``` -When looking at these styles you'll notice that table's {{cssxref("display")}} property has been set to `block`. While this allows scrolling, the table loses some of its integrity, and table cells try to become as small as possible. To mitigate this issue we've set {{cssxref("white-space")}} to `nowrap` on the `
` elements. Note that we have **not** set {{cssxref("border-collapse")}} to `collapse`, as if we do the header cannot be separated correctly from the rest of the table. +Given that the `` has a fixed size, the {{cssxref("overflow")}} set to `auto` is the important part here, as it makes the table scrollable. ```css table, th, td { - border: 1px solid; + border: 1px solid black; } table { + overflow: auto; width: 100%; max-width: 400px; height: 240px; - margin: 0 auto; display: block; - overflow-x: auto; + margin: 0 auto; border-spacing: 0; } @@ -650,7 +905,7 @@ tr:last-child td { ### Captions -By supplying a {{HTMLElement("caption")}} element whose value clearly and concisely describes the table's purpose, it helps the people decide if they need to read the rest of the table content or skip over it. +By supplying a {{HTMLElement("caption")}} element whose value clearly and concisely describes the table's purpose, it helps the people decide if they need to check the rest of the table content or skip over it. This helps people navigating with the aid of assistive technology such as a screen reader, people experiencing low vision conditions, and people with cognitive concerns. @@ -659,43 +914,7 @@ This helps people navigating with the aid of assistive technology such as a scre ### Scoping rows and columns -The [`scope`](/en-US/docs/Web/HTML/Element/th#scope) attribute on header elements is redundant in simple contexts, because scope is inferred. However, some assistive technologies may fail to draw correct inferences, so specifying header scope may improve user experiences. In complex tables, scope can be specified to provide necessary information about the cells related to a header. - -#### Examples - -```html -
- - - - - - - - - - - - - - - - - - - - - -
- Color names and values -
NameHEXHSLaRGBa
Teal#51F6F6hsl(180 90% 64% / 100%)rgb(81 246 246 / 100%)
Goldenrod#F6BC57hsl(38 90% 65% / 100%)rgb(246 188 87 / 100%)
-``` - -##### Result - -{{EmbedLiveSample('Scoping_rows_and_columns')}} - -Providing a declaration of `scope="col"` on a {{HTMLElement("th")}} element will help describe that the cell is at the top of a column. Providing a declaration of `scope="row"` on a {{HTMLElement("th")}} element will help describe that the cell is the first in a row. +The [`scope`](/en-US/docs/Web/HTML/Element/th#scope) attribute on header cells ({{HTMLElement("th")}} elements) is redundant in simple contexts, because scope is inferred. However, some assistive technologies may fail to draw correct inferences, so specifying header scope may improve user experiences. In complex tables, [`scope`](/en-US/docs/Web/HTML/Element/th#scope) can be specified to provide necessary information about the cells related to a header. - [MDN Tables for visually impaired users](/en-US/docs/Learn/HTML/Tables/Advanced#tables_for_visually_impaired_users) - [Tables with two headers • Tables • W3C WAI Web Accessibility Tutorials](https://www.w3.org/WAI/tutorials/tables/two-headers/) @@ -704,16 +923,80 @@ Providing a declaration of `scope="col"` on a {{HTMLElement("th")}} element will ### Complicated tables -Assistive technology such as screen readers may have difficulty parsing tables that are so complex that header cells can't be associated in a strictly horizontal or vertical way. This is typically indicated by the presence of the [`colspan`](/en-US/docs/Web/HTML/Element/td#colspan) and [`rowspan`](/en-US/docs/Web/HTML/Element/td#rowspan) attributes. +Assistive technologies such as screen readers may have difficulty parsing tables that are so complex that header cells can't be associated in a strictly horizontal or vertical way. This is typically indicated by the presence of the [`colspan`](/en-US/docs/Web/HTML/Element/td#colspan) and [`rowspan`](/en-US/docs/Web/HTML/Element/td#rowspan) attributes. -Ideally, consider alternate ways to present the table's content, including breaking it apart into a collection of smaller, related tables that don't have to rely on using the `colspan` and `rowspan` attributes. In addition to helping people who use assistive technology understand the table's content, this may also benefit people with cognitive concerns who may have difficulty understanding the associations the table layout is describing. +Ideally, consider alternate ways to present the table's content, including breaking it apart into a collection of smaller, related tables that don't have to rely on using the [`colspan`](/en-US/docs/Web/HTML/Element/td#colspan) and [`rowspan`](/en-US/docs/Web/HTML/Element/td#rowspan) attributes. In addition to helping people who use assistive technology understand the table's content, this may also benefit people with cognitive concerns who may have difficulty understanding the associations the table layout is describing. -If the table cannot be broken apart, use a combination of the [`id`](/en-US/docs/Web/HTML/Global_attributes#id) and [`headers`](/en-US/docs/Web/HTML/Element/td#headers) attributes to programmatically associate each table cell with the header(s) the cell is associated with. +If the table cannot be broken apart, use a combination of the [`id`](/en-US/docs/Web/HTML/Global_attributes#id) and [`headers`](/en-US/docs/Web/HTML/Element/td#headers) attributes to programmatically associate each table cell with the header(s) ({{HTMLElement("th")}} elements) the cell is associated with. - [MDN Tables for visually impaired users](/en-US/docs/Learn/HTML/Tables/Advanced#tables_for_visually_impaired_users) - [Tables with multi-level headers • Tables • W3C WAI Web Accessibility Tutorials](https://www.w3.org/WAI/tutorials/tables/multi-level/) - [H43: Using id and headers attributes to associate data cells with header cells in data tables | Techniques for W3C WCAG 2.0](https://www.w3.org/TR/WCAG20-TECHS/H43.html) +## Technical summary + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Content categories + + Flow content +
Permitted content + In this order: +
    +
  1. an optional {{HTMLElement("caption")}} element,
    2. +
  2. zero or more {{HTMLElement("colgroup")}} elements,
    3. +
  3. an optional {{HTMLElement("thead")}} element,
    4. +
  4. + either one of the following: +
      +
    • zero or more {{HTMLElement("tbody")}} elements
      • +
    • one or more {{HTMLElement("tr")}} elements
      • +
    +
    5. +
  5. an optional {{HTMLElement("tfoot")}} element
    6. +
+
Tag omission{{no_tag_omission}}
Permitted parentsAny element that accepts flow content
Implicit ARIA role + table +
Permitted ARIA rolesAny
DOM interface{{domxref("HTMLTableElement")}}
+ ## Specifications {{Specifications}} @@ -724,10 +1007,11 @@ If the table cannot be broken apart, use a combination of the [`id`](/en-US/docs ## See also -- [HTML data table tutorial](/en-US/docs/Learn/HTML/Tables) -- CSS properties that may be especially useful to style the `` element: - - - {{cssxref("width")}} to control the width of the table; - - {{cssxref("border")}}, {{cssxref("border-style")}}, {{cssxref("border-color")}}, {{cssxref("border-width")}}, {{cssxref("border-collapse")}}, {{cssxref("border-spacing")}} to control the aspect of cell borders, rules, and frame; - - {{cssxref("margin")}} and {{cssxref("padding")}} to style the individual cell content; - - {{cssxref("text-align")}} and {{cssxref("vertical-align")}} to define the alignment of text and cell content. +- [Learn: HTML tables](/en-US/docs/Learn/HTML/Tables) +- {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}}: Other table-related elements +- {{cssxref("background-color")}}: CSS property to set the background color of the table +- {{cssxref("border")}}, {{cssxref("border-collapse")}}, {{cssxref("border-spacing")}}: CSS properties to control the aspect of cell borders, rules, and frame +- {{cssxref("margin")}}, {{cssxref("padding")}}: CSS properties to align the table and set spacing on cell content +- {{cssxref("text-align")}}: CSS property to horizontally align table cell content +- {{cssxref("vertical-align")}}: CSS property to vertically align table cell content +- {{cssxref("width")}}: CSS property to control the width of the table diff --git a/files/en-us/web/html/element/tbody/index.md b/files/en-us/web/html/element/tbody/index.md index b7114ea5e286e95..5e6e32a32d53d28 100644 --- a/files/en-us/web/html/element/tbody/index.md +++ b/files/en-us/web/html/element/tbody/index.md @@ -7,126 +7,125 @@ browser-compat: html.elements.tbody {{HTMLSidebar}} -The **``** [HTML](/en-US/docs/Web/HTML) element encapsulates a set of table rows ({{HTMLElement("tr")}} elements), indicating that they comprise the body of the table ({{HTMLElement("table")}}). +The **``** [HTML](/en-US/docs/Web/HTML) element encapsulates a set of table rows ({{HTMLElement("tr")}} elements), indicating that they comprise the body of a table's (main) data. {{EmbedInteractiveExample("pages/tabbed/tbody.html","tabbed-taller")}} -The `` element, along with its related {{HTMLElement("thead")}} and {{HTMLElement("tfoot")}} elements, provide useful semantic information that can be used when rendering for either screen or printer. - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Content categories - None.
Permitted contentZero or more {{ HTMLElement("tr") }} elements.
Tag omission - A <tbody> element's start tag can be omitted if the first thing inside the <tbody> element is a {{HTMLElement("tr")}} element, and if the element is not immediately preceded by a <tbody>, {{HTMLElement("thead")}}, or {{HTMLElement("tfoot")}} element whose end tag has been omitted. (It can't be omitted if the element is empty.) - A <tbody> element's end tag can be omitted if the <tbody> element is immediately followed by a <tbody> or {{HTMLElement("tfoot")}} element, or if there is no more content in the parent element. -
Permitted parents - Within the required parent {{ HTMLElement("table") }} element, - the <tbody> element can be added after a - {{ HTMLElement("caption") }}, - {{HTMLElement("colgroup") }}, and a - {{ HTMLElement("thead") }} element. -
Implicit ARIA role - rowgroup -
Permitted ARIA rolesAny
DOM interface{{domxref("HTMLTableSectionElement")}}
- ## Attributes This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attributes). ### Deprecated attributes -- `align` {{deprecated_inline}} - - - : This [enumerated](/en-US/docs/Glossary/Enumerated) attribute specifies how horizontal alignment of each cell content will be handled. Possible values are: - - - `left`, aligning the content to the left of the cell - - `center`, centering the content in the cell - - `right`, aligning the content to the right of the cell - - `justify`, inserting spaces into the textual content so that the content is justified in the cell - - `char`, aligning the textual content on a special character with a minimal offset, defined by the [`char`](#char) and [`charoff`](#charoff) attributes. +The following attributes are deprecated and should not be used. They are documented below for reference when updating existing code and for historical interest only. - If this attribute is not set, the `left` value is assumed. +- `align` {{deprecated_inline}} - As this attribute is deprecated, use the CSS {{cssxref("text-align")}} property instead. + - : Specifies the horizontal alignment of each body cell. The possible {{Glossary("enumerated")}} values are `left`, `center`, `right`, `justify`, and `char`. When supported, the `char` value aligns the textual content on the character defined in the [`char`](#char) attribute and on offset defined by the [`charoff`](#charoff) attribute. Use the {{cssxref("text-align")}} CSS property instead, as this attribute is deprecated. - > **Note:** The equivalent `text-align` property for the `align="char"` is not implemented in any browsers yet. See the [`text-align`'s browser compatibility section](/en-US/docs/Web/CSS/text-align#browser_compatibility) for the `` value. +- `bgcolor` {{deprecated_inline}} -- `bgcolor` {{Deprecated_inline}} + - : Defines the background color of each body cell. The value is an HTML color; either a [6-digit hexadecimal RGB code](/en-US/docs/Web/CSS/hex-color), prefixed by a '`#`', or a [color keyword](/en-US/docs/Web/CSS/named-color). Other CSS {{cssxref("color_value", "<color>")}} values are not supported. Use the {{cssxref("background-color")}} CSS property instead, as this attribute is deprecated. - - : The background color of the table. It is a [6-digit hexadecimal RGB code](/en-US/docs/Web/CSS/hex-color), prefixed by a '`#`'. One of the predefined [color keywords](/en-US/docs/Web/CSS/named-color) can also be used. +- `char` {{deprecated_inline}} - As this attribute is deprecated, use the CSS {{cssxref("background-color")}} property instead. + - : Specifies the alignment of the content to a character of each body cell. Typical values for this include a period (`.`) when attempting to align numbers or monetary values. If [`align`](#align) is not set to `char`, this attribute is ignored. -- `char` {{deprecated_inline}} - - : This attribute is used to set the character to align the cells in a column on. Typical values for this include a period (`.`) when attempting to align numbers or monetary values. If [`align`](#align) is not set to `char`, this attribute is ignored. - `charoff` {{deprecated_inline}} - - : This attribute is used to indicate the number of characters to offset the column data from the alignment characters specified by the `char` attribute. -- `valign` {{deprecated_inline}} - - : This attribute specifies the vertical alignment of the text within each row of cells of the table header. Possible values for this attribute are: + - : Specifies the number of characters to offset the body cell content from the alignment character specified by the [`char`](#char) attribute. - - `baseline`, which will put the text as close to the bottom of the cell as it is possible, but align it on the [baseline](https://en.wikipedia.org/wiki/Baseline_%28typography%29) of the characters instead of the bottom of them. If characters are all of the size, this has the same effect as `bottom`. - - `bottom`, which will put the text as close to the bottom of the cell as it is possible; - - `middle`, which will center the text in the cell; - - and `top`, which will put the text as close to the top of the cell as it is possible. +- `valign` {{deprecated_inline}} - As this attribute is deprecated, use the CSS {{cssxref("vertical-align")}} property instead. + - : Specifies the vertical alignment of each body cell. The possible {{Glossary("enumerated")}} values are `baseline`, `bottom`, `middle`, and `top`. Use the {{cssxref("vertical-align")}} CSS property instead, as this attribute is deprecated. ## Usage notes -- If the table includes a {{HTMLElement("thead")}} block (to semantically identify a row of column headers), the `
+ + + + + + + + + + + + + + + + + + +
3741255Jones, MarthaComputer Science240
3971244Nim, VictorRussian Literature220
4100332Petrov, AlexandraAstrophysics260
+``` + +#### CSS + +Note the CSS in the example, where a {{cssxref("background-color")}} is specified for the `` element and the `tbody` is used as a part of an additional {{Glossary("css_selector", "CSS selector")}}. Alternatively, {{Glossary("developer_tools", "browser developer tools")}} can be used to check the presence of the `` element in the {{Glossary("dom", "DOM")}}. + +```css +tbody { + background-color: #e4f0f5; +} + +tbody > tr > td:last-of-type { + width: 60px; + text-align: center; +} +``` + +```css hidden +table { + border-collapse: collapse; + border: 2px solid rgb(140 140 140); + font-family: sans-serif; + font-size: 0.8rem; + letter-spacing: 1px; +} + +td { + border: 1px solid rgb(160 160 160); + padding: 8px 10px; +} +``` + +#### Result + +{{EmbedLiveSample("Not_specifying_a_body", 650, 100)}} + +### Basic body structure + +This example extends and enhances the basic table from the [previous example](#not_specifying_a_body). + +#### HTML + +We introduce a table head ({{HTMLElement("thead")}} element) and explicitly use a `` element to structure the table into {{Glossary("semantics", "semantic")}} sections. The table head contains the column headers ({{HTMLElement("th")}} elements). The `` element represents the body section of the table, which contains a number of rows ({{HTMLElement("tr")}} elements) with the table's main data, which is the data of each student. + +The use of such table content groups and {{Glossary("semantics", "semantic")}} markup is not only useful for visual presentation (via CSS styling) and contextual information for assistive technologies; moreover, the explicit use of the `` element helps the browser to create the intended table structure, avoiding unwanted results. ```html @@ -135,6 +134,7 @@ The table's HTML is shown here. Note that all the body cells including informati + @@ -142,16 +142,19 @@ The table's HTML is shown here. Note that all the body cells including informati + + +
Student ID Name MajorCredits
3741255 Jones, Martha Computer Science240
3971244 Nim, Victor Russian Literature220
4100332 Petrov, Alexandra Astrophysics260
@@ -159,64 +162,53 @@ The table's HTML is shown here. Note that all the body cells including informati #### CSS -The CSS to style our table is shown next. +The CSS is nearly unchanged from the [previous example](#not_specifying_a_body), except for some basic styling to highlight the table head so that the headers of the columns stand out from the data in the table body. As in the [example above](#not_specifying_a_body), the `tbody` [type selector](/en-US/docs/Web/CSS/Type_selectors) is used to style the body cells. ```css -table { - border: 2px solid #555; - border-collapse: collapse; - font: - 16px "Lucida Grande", - "Helvetica", - "Arial", - sans-serif; +tbody { + background-color: #e4f0f5; } -``` -First, the table's overall style attributes are set, configuring the thickness, style, and color of the table's exterior borders and using {{cssxref("border-collapse")}} to ensure that the border lines are shared among adjacent cells rather than each having its own borders with space in between. {{cssxref("font")}} is used to establish an initial font for the table. +tbody > tr > td:last-of-type { + text-align: center; +} -```css -th, -td { - border: 1px solid #bbb; - padding: 2px 8px 0; - text-align: left; +thead { + border-bottom: 2px solid rgb(160 160 160); + background-color: #2c5e77; + color: #fff; } ``` -Then the style is set for the majority of the cells in the table, including all data cells but also those styles shared between our {{HTMLElement("td")}} and {{HTMLElement("th")}} cells. The cells are given a light gray outline which is a single pixel thick, padding is adjusted, and all cells are left-aligned using {{cssxref("text-align")}} +```css hidden +table { + border-collapse: collapse; + border: 2px solid rgb(140 140 140); + font-family: sans-serif; + font-size: 0.8rem; + letter-spacing: 1px; +} -```css -thead > tr > th { - background-color: #cce; - font-size: 18px; - border-bottom: 2px solid #999; +th, +td { + border: 1px solid rgb(160 160 160); + padding: 8px 10px; } ``` -Finally, header cells contained within the {{HTMLElement("thead")}} element are given additional styling. They use a darker {{cssxref("background-color")}}, a larger font size, and a thicker, darker bottom border than the other cell borders. - #### Result -The resulting table looks like this: - -{{EmbedLiveSample("Basic_example", 650, 150)}} +{{EmbedLiveSample("Basic_body_structure", 650, 140)}} ### Multiple bodies -You can create row groupings within a table by using multiple `` elements. Each may potentially have its own header row or rows; however, _there can be only one {{HTMLElement("thead")}} per table!_ Because of that, you need to use a {{HTMLElement("tr")}} filled with {{HTMLElement("th")}} elements to create headers within each ``. Let's see how that's done. +This example extends and enhances the table from the [example above](#basic_body_structure) even more by introducing multiple body sections. -Let's take the previous example, add some more students to the list, and update the table so that instead of listing each student's major on every row, the students are grouped by major, with heading rows for each major. - -#### Result - -First, the resulting table, so you know what we're building: - -{{EmbedLiveSample("Multiple_bodies", 650, 250)}} +Using multiple `` elements allows creating row groupings within a table. Each table body can potentially have its own head row or rows; however, _there may only be one {{HTMLElement("thead")}} element per table_! Because of that, {{HTMLElement("tr")}} with {{HTMLElement("th")}} elements can be used to create headers within each ``. #### HTML -The revised HTML looks like this: +Building on the table in the [previous basic example](#basic_body_structure), more students are added and, instead of listing each student's major on each row, the students are grouped by major. Note that each major is enclosed within its own `` block, with the first row ({{HTMLElement("tr")}} element) serving as the head of the block, displaying the major title within a {{HTMLElement("th")}} element that uses the [`colspan`](/en-US/docs/Web/HTML/Element/th#colspan) attribute to span the header across all three columns of the table. Each remaining row within each major's `` represents one student. ```html @@ -224,90 +216,156 @@ The revised HTML looks like this: + - + + + + - + + - + + +
Student ID NameCredits
Computer ScienceComputer Science
3741255 Jones, Martha240
4077830 Pierce, Benjamin200
5151701 Kirk, James230
Russian LiteratureRussian Literature
3971244 Nim, Victor220
AstrophysicsAstrophysics
4100332 Petrov, Alexandra260
8892377 Toyota, Hiroko240
``` -Notice that each major is placed in a separate `` block, the first row of which contains a single {{HTMLElement("th")}} element with a [`colspan`](#colspan) attribute that spans the entire width of the table. That heading lists the name of the major contained within the ``. +#### CSS -Then each remaining row in each major's `` consists of two cells: the first for the student's ID and the second for their name. +Most of the CSS is unchanged. However, a slightly more subtle style is added for header cells contained directly within a `` (as opposed to those that reside in the {{HTMLElement("thead")}}). This is used for the headers indicating each table section's corresponding major. -#### CSS +```css +tbody > tr > th { + border-top: 2px solid rgb(160 160 160); + border-bottom: 1px solid rgb(140 140 140); + background-color: #e4f0f5; + font-weight: normal; +} + +tbody { + background-color: whitesmoke; +} + +thead { + background-color: #2c5e77; + color: #fff; +} +``` ```css hidden table { - border: 2px solid #555; border-collapse: collapse; - font: - 16px "Lucida Grande", - "Helvetica", - "Arial", - sans-serif; + border: 2px solid rgb(140 140 140); + font-family: sans-serif; + font-size: 0.8rem; + letter-spacing: 1px; } th, td { - border: 1px solid #bbb; - padding: 2px 8px 0; + border: 1px solid rgb(160 160 160); + padding: 6px 8px; text-align: left; } -thead > tr > th { - background-color: #cce; - font-size: 18px; - border-bottom: 2px solid #999; +tbody > tr > td:last-of-type { + text-align: center; } ``` -Most of the CSS is unchanged. We do, however, add a slightly more subtle style for header cells contained directly within a `` (as opposed to those which reside in a {{HTMLElement("thead")}}). This is used for the headers indicating each table section's corresponding major. +#### Result -```css -tbody > tr > th { - background-color: #dde; - border-bottom: 1.5px solid #bbb; - font-weight: normal; -} -``` +{{EmbedLiveSample("Multiple_bodies", 650, 300)}} + +## Technical summary + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Content categories + None.
Permitted contentZero or more {{ HTMLElement("tr") }} elements.
Tag omission + A {{HTMLElement("tbody")}} element's start tag can be omitted if the first thing inside the {{HTMLElement("tbody")}} element is a {{HTMLElement("tr")}} element, and if the element is not immediately preceded by a {{HTMLElement("tbody")}}, {{HTMLElement("thead")}}, or {{HTMLElement("tfoot")}} element whose end tag has been omitted. (It can't be omitted if the element is empty.) + A {{HTMLElement("tbody")}} element's end tag can be omitted if the {{HTMLElement("tbody")}} element is immediately followed by a {{HTMLElement("tbody")}} or {{HTMLElement("tfoot")}} element, or if there is no more content in the parent element. +
Permitted parents + Within the required parent {{ HTMLElement("table") }} element, + the {{HTMLElement("tbody")}} element can be added after any + {{ HTMLElement("caption") }}, {{HTMLElement("colgroup") }}, + and {{ HTMLElement("thead") }} elements. +
Implicit ARIA role + rowgroup +
Permitted ARIA rolesAny
DOM interface{{domxref("HTMLTableSectionElement")}}
## Specifications @@ -319,7 +377,9 @@ tbody > tr > th { ## See also -- CSS properties and [pseudo-classes](/en-US/docs/Web/CSS/Pseudo-classes) that may be specially useful to style the `` element: - - - the {{ cssxref(":nth-child") }} pseudo-class to set the alignment on the cells of the column; - - the {{ cssxref("text-align") }} property to align all cells content on the same character, like '.'. +- [Learn: HTML tables](/en-US/docs/Learn/HTML/Tables) +- {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}}: Other table-related elements +- {{cssxref("background-color")}}: CSS property to set the background color of each body cell +- {{cssxref("border")}}: CSS property to control borders of body cells +- {{cssxref("text-align")}}: CSS property to horizontally align each body cell content +- {{cssxref("vertical-align")}}: CSS property to vertically align each body cell content diff --git a/files/en-us/web/html/element/td/column-row-span.html b/files/en-us/web/html/element/td/column-row-span.html new file mode 100644 index 000000000000000..796d0f6595a12a3 --- /dev/null +++ b/files/en-us/web/html/element/td/column-row-span.html @@ -0,0 +1,163 @@ + + + + + + Column and row span + + + + + + + + + + + + + + + +
+ Illustration demonstrating column and row spanning of table cells +
1234
+
+
5
+
6
+
+ + diff --git a/files/en-us/web/html/element/td/column-row-span.png b/files/en-us/web/html/element/td/column-row-span.png new file mode 100644 index 000000000000000..a779fb8e844a4e7 Binary files /dev/null and b/files/en-us/web/html/element/td/column-row-span.png differ diff --git a/files/en-us/web/html/element/td/index.md b/files/en-us/web/html/element/td/index.md index cb5ce2811ac804a..faeafe9f280e86e 100644 --- a/files/en-us/web/html/element/td/index.md +++ b/files/en-us/web/html/element/td/index.md @@ -7,7 +7,7 @@ browser-compat: html.elements.td {{HTMLSidebar}} -The **``** [HTML](/en-US/docs/Web/HTML) element defines a cell of a table that contains data. It participates in the _table model_. +The **``** [HTML](/en-US/docs/Web/HTML) element defines a cell of a table that contains data and may be used as a child of the {{HTMLElement("tr")}} element. {{EmbedInteractiveExample("pages/tabbed/td.html","tabbed-taller")}} @@ -16,70 +16,265 @@ The **``** [HTML](/en-US/docs/Web/HTML) element defines a cell of a table th This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attributes). - `colspan` - - : This attribute contains a non-negative integer value that indicates for how many columns the cell extends. Its default value is `1`. Values higher than 1000 will be considered as incorrect and will be set to the default value (1). + - : Contains a non-negative integer value that indicates how many columns the data cell spans or extends. The default value is `1`. User agents dismiss values higher than 1000 as incorrect, setting to the default value (`1`). - `headers` - - : This attribute contains a list of space-separated strings, each corresponding to the **id** attribute of the {{HTMLElement("th")}} elements that apply to this element. + - : Contains a list of space-separated strings, each corresponding to the `id` attribute of the {{HTMLElement("th")}} elements that provide headings for this table cell. - `rowspan` - - : This attribute contains a non-negative integer value that indicates for how many rows the cell extends. Its default value is `1`; if its value is set to `0`, it extends until the end of the table section ({{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, even if implicitly defined), that the cell belongs to. Values higher than 65534 are clipped down to 65534. + - : Contains a non-negative integer value that indicates for how many rows the data cell spans or extends. The default value is `1`; if its value is set to `0`, it extends until the end of the table grouping section ({{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, even if implicitly defined), that the cell belongs to. Values higher than `65534` are clipped to `65534`. ### Deprecated attributes -- `abbr` {{deprecated_inline}} +The following attributes are deprecated and should not be used. They are documented below for reference when updating existing code and for historical interest only. - - : This attribute contains a short abbreviated description of the cell's content. Some user-agents, such as speech readers, may present this description before the content itself. +- `abbr` {{deprecated_inline}} - > **Note:** Do not use this attribute as it is obsolete in the latest standard. Alternatively, you can put the abbreviated description inside the cell and place the long content in the **title** attribute. + - : Contains a short abbreviated description of the data cell's content. Some user-agents, such as speech readers, may present this description before the content itself. Put the abbreviated content inside the cell and place the (longer) description in the [`title`](/en-US/docs/Web/HTML/Global_attributes/title) attribute, as this attribute is deprecated. Or, preferably, include the content within the data cell, and use CSS to [visually clip overflowing text](/en-US/docs/Web/CSS/text-overflow). - `align` {{deprecated_inline}} - - : This [enumerated](/en-US/docs/Glossary/Enumerated) attribute specifies how the cell content's horizontal alignment will be handled. Possible values are: + - : Specifies the horizontal alignment of the data cell. The possible {{Glossary("enumerated")}} values are `left`, `center`, `right`, `justify`, and `char`. When supported, the `char` value aligns the textual content on the character defined in the [`char`](#char) attribute and the offset defined by the [`charoff`](#charoff) attribute. Use the {{cssxref("text-align")}} CSS property instead, as this attribute is deprecated. - - `left`: The content is aligned to the left of the cell. - - `center`: The content is centered in the cell. - - `right`: The content is aligned to the right of the cell. - - `justify` (with text only): The content is stretched out inside the cell so that it covers its entire width. - - `char` (with text only): The content is aligned to a character inside the `` element with minimal offset. This character is defined by the [`char`](#char) and [`charoff`](#charoff) attributes. - - The default value when this attribute is not specified is `left`. +- `axis` {{deprecated_inline}} - > **Note:** - > - > - To achieve the same effect as the `left`, `center`, `right` or `justify` values, apply the CSS {{cssxref("text-align")}} property to the element. - > - To achieve the same effect as the `char` value, give the {{cssxref("text-align")}} property the same value you would use for the [`char`](#char). + - : Contains a list of space-separated strings, each corresponding to the `id` attribute of a group of cells that the data cell applies to. -- `axis` {{deprecated_inline}} - - : This attribute contains a list of space-separated strings. Each string is the `id` of a group of cells that this header applies to. - `bgcolor` {{deprecated_inline}} - - : This attribute defines the background color of each cell in a column. It is a [6-digit hexadecimal RGB code](/en-US/docs/Web/CSS/hex-color), prefixed by a '`#`'. One of the predefined [color keywords](/en-US/docs/Web/CSS/named-color) can also be used. - - To achieve a similar effect, use the CSS {{cssxref("background-color")}} property. + - : Defines the background color of the data cell. The value is an HTML color; either a [6-digit hexadecimal RGB code](/en-US/docs/Web/CSS/hex-color), prefixed by a '`#`', or a [color keyword](/en-US/docs/Web/CSS/named-color). Other CSS {{cssxref("color_value", "<color>")}} values are not supported. Use the {{cssxref("background-color")}} CSS property instead, as this attribute is deprecated. - `char` {{deprecated_inline}} - - : The content in the cell element is aligned to a character. Typical values include a period (.) to align numbers or monetary values. If [`align`](#align) is not set to `char`, this attribute is ignored. + + - : Specifies the alignment of the content to a character of the data cell. Typical values for this include a period (`.`) when attempting to align numbers or monetary values. If [`align`](#align) is not set to `char`, this attribute is ignored. + - `charoff` {{deprecated_inline}} - - : This attribute is used to shift column data to the right of the character specified by the **char** attribute. Its value specifies the length of this shift. + + - : Specifies the number of characters to offset the data cell content from the alignment character specified by the [`char`](#char) attribute. + - `height` {{deprecated_inline}} - - : This attribute is used to define a recommended cell height. Use the CSS {{cssxref("height")}} property instead. + + - : Defines a recommended data cell height. Use the {{cssxref("height")}} CSS property instead, as this attribute is deprecated. + - `scope` {{deprecated_inline}} - - : This enumerated attribute defines the cells that the header (defined in the {{HTMLElement("th")}}) element relates to. Only use this attribute with the `` element to define the row or column for which it is a header. -- `valign` {{deprecated_inline}} - - : This attribute specifies how a text is vertically aligned inside a cell. Possible values for this attribute are: + - : Defines the cells that the header (defined in the {{HTMLElement("th")}}) element relates to. The possible {{Glossary("enumerated")}} values are `row`, `col`, `rowgroup`, and `colgroup`. Only use this attribute with the {{HTMLElement("th")}} element to define the row or column for which it is a header, as this attribute is deprecated for the `` element. - - `baseline`: Positions the text near the bottom of the cell and aligns it with the [baseline](https://en.wikipedia.org/wiki/Baseline_%28typography%29) of the characters instead of the bottom. If characters don't descend below the baseline, the baseline value achieves the same effect as `bottom`. - - `bottom`: Positions the text near the bottom of the cell. - - `middle`: Centers the text in the cell. - - and `top`: Positions the text near the top of the cell. +- `valign` {{deprecated_inline}} - To achieve a similar effect, use the CSS {{cssxref("vertical-align")}} property. + - : Specifies the vertical alignment of the data cell. The possible {{Glossary("enumerated")}} values are `baseline`, `bottom`, `middle`, and `top`. Use the {{cssxref("vertical-align")}} CSS property instead, as this attribute is deprecated. - `width` {{deprecated_inline}} - - : This attribute is used to define a recommended cell width. Use the CSS {{cssxref("width")}} property instead. + + - : Defines a recommended data cell width. Use the {{cssxref("width")}} CSS property instead, as this attribute is deprecated. + +## Usage notes + +- The `` may only be used within a {{HTMLElement("tr")}} element. +- When using the [`colspan`](#colspan) and [`rowspan`](#rowspan) attributes to span data cells across multiple columns and rows, cells without these attributes defined (with a default value of `1`) are automatically fitted into free available spaces in the table structure that span 1x1 cells, as illustrated in the following figure: + + ![Illustration demonstrating column and row spanning of table cells: cells 1, 3, and 4 spanning two rows; cell 2 spanning two columns; cells 5 and 6 fitting into the available cells that are the second and third columns in the second row](column-row-span.png) + + > **Note:** These attributes must not be used to overlap cells. ## Examples -See {{HTMLElement("table")}} for examples on ``. +See {{HTMLElement("table")}} for a complete table example introducing common standards and best practices. + +### 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 ({{HTMLElement("tr")}} elements) contain both header cells ({{HTMLElement("th")}} elements) and data cell `` elements. The {{HTMLElement("th")}} 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 {{HTMLElement("thead")}} and {{HTMLElement("tbody")}} 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 + + + + + + + + + + + + + + + + + + + + + +
AAlfaAL fah
BBravoBRAH voh
CCharlieCHAR lee
DDeltaDELL tah
+``` + +#### CSS + +Some basic CSS is used to style the table and its cells. CSS [attribute selectors](/en-US/docs/Web/CSS/Attribute_selectors) and the {{cssxref(":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. + +```css +td, +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; +} +``` + +```css hidden +table { + border-collapse: collapse; + border: 2px solid rgb(140 140 140); + font-family: sans-serif; + font-size: 0.8rem; + letter-spacing: 1px; +} +``` + +#### Result + +{{EmbedLiveSample("Basic_data_cells", 650, 140)}} + +### Column and row spanning + +This example extends and enhances the basic table from the [previous example](#basic_data_cells) by adding an additional "ABC" cell. + +#### HTML + +An additional data cell (`` element) is introduced within the first row ({{HTMLElement("tr")}} element). This creates a fourth column in the table. + +Using the [`rowspan`](#rowspan) attribute, the "ABC" cell is spanned across the first three rows of the table. The last data cells of the subsequent rows each span two columns. This is done using the [`colspan`](#colspan) attribute, aligning them correctly within the table structure. Note that an additional row ({{HTMLElement("tr")}} element) is added to the table to illustrate this. + +```html + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AAlfaAL fahABC
BBravoBRAH voh
CCharlieCHAR lee
DDeltaDELL tah
EEchoECK oh
+``` + +#### CSS + +The {{cssxref(":first-of-type")}} and {{cssxref(":last-of-type")}} pseudo-classes are used in the CSS to select and style the added "ABC" data cell. + +```css +tr:first-of-type td:last-of-type { + width: 60px; + background-color: #505050; + color: #fff; + font-weight: bold; + text-align: center; +} + +td, +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; +} +``` + +```css hidden +table { + border-collapse: collapse; + border: 2px solid rgb(140 140 140); + font-family: sans-serif; + font-size: 0.8rem; + letter-spacing: 1px; +} +``` + +#### Result + +{{EmbedLiveSample("Column_and_row_spanning", 650, 170)}} + +### Associate data cells with header cells + +For more complex relationships between data cells (`` elements) and header cells ({{HTMLElement("th")}} elements), using {{HTMLElement("th")}} elements with the [`scope`](/en-US/docs/Web/HTML/Element/th#scope) attribute alone may not be sufficient for assistive technologies, especially screen readers. + +#### HTML + +To improve the {{Glossary("accessibility", "accessibility")}} of the [previous example](#column_and_row_spanning) and to allow screen readers, for example, to speak the headers associated with each data cell, the [`headers`](#headers) attribute can be introduced along with [`id`](/en-US/docs/Web/HTML/Global_attributes/id) attributes. Each row header cell ({{HTMLElement("th")}} element) associated with the "ABC" data cell, i.e., the letters "A", "B", and "C", is given a unique identifier with the [`id`](/en-US/docs/Web/HTML/Global_attributes/id) attribute. The "ABC" data cell (`` element) then uses these `id` values in a space-separated list for the [`headers`](#headers) attribute. + +> **Note:** It's recommended to use more descriptive and useful values for the [`id`](/en-US/docs/Web/HTML/Global_attributes/id) attribute. Each `id` in a document must be unique to that document. In this example, the `id` values are single characters to maintain focus on the concept of the [`headers`](#headers) attribute. + +```html + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AAlfaAL fahABC
BBravoBRAH voh
CCharlieCHAR lee
DDeltaDELL tah
EEchoECK oh
+``` + +#### Result + +While the [visual result](#result_2) is unchanged from the [previous example table](#column_and_row_spanning), each data cell (``) is now explicitly associated with its row header cell (``). ## Technical summary @@ -143,3 +338,15 @@ See {{HTMLElement("table")}} for examples on ``. ## Browser compatibility {{Compat}} + +## See also + +- [Learn: HTML tables](/en-US/docs/Learn/HTML/Tables) +- {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}}: Other table-related elements +- {{cssxref("background-color")}}: CSS property to set the background color of each data cell +- {{cssxref("border")}}: CSS property to control borders of data cells +- {{cssxref("height")}}: CSS property to control the recommended data cell height +- {{cssxref("text-align")}}: CSS property to horizontally align each data cell content +- {{cssxref("vertical-align")}}: CSS property to vertically align each data cell content +- {{cssxref("width")}}: CSS property to control the recommended data cell width +- {{cssxref(":nth-of-type")}}, {{cssxref(":first-of-type")}}, {{cssxref(":last-of-type")}}: CSS pseudo-classes to select the desired data cells diff --git a/files/en-us/web/html/element/tfoot/index.md b/files/en-us/web/html/element/tfoot/index.md index ccdd20ec897a159..0633be60fd23d59 100644 --- a/files/en-us/web/html/element/tfoot/index.md +++ b/files/en-us/web/html/element/tfoot/index.md @@ -7,7 +7,7 @@ browser-compat: html.elements.tfoot {{HTMLSidebar}} -The **``** [HTML](/en-US/docs/Web/HTML) element defines a set of rows summarizing the columns of the table. +The **``** [HTML](/en-US/docs/Web/HTML) element encapsulates a set of table rows ({{HTMLElement("tr")}} elements), indicating that they comprise the foot of a table with information about the table's columns. This is usually a summary of the columns, e.g., a sum of the given numbers in a column. {{EmbedInteractiveExample("pages/tabbed/tfoot.html","tabbed-taller")}} @@ -21,45 +21,134 @@ The following attributes are deprecated and should not be used. They are documen - `align` {{deprecated_inline}} - - : This [enumerated](/en-US/docs/Glossary/Enumerated) attribute specifies how horizontal alignment of each cell content will be handled. Possible values are: + - : Specifies the horizontal alignment of each foot cell. The possible {{Glossary("enumerated")}} values are `left`, `center`, `right`, `justify`, and `char`. When supported, the `char` value aligns the textual content on the character defined in the [`char`](#char) attribute and on offset defined by the [`charoff`](#charoff) attribute. Use the {{cssxref("text-align")}} CSS property instead, as this attribute is deprecated. - - `left`, aligning the content to the left of the cell - - `center`, centering the content in the cell - - `right`, aligning the content to the right of the cell - - `justify`, inserting spaces into the textual content so that the content is justified in the cell - - `char`, aligning the textual content on a special character with a minimal offset, defined by the [`char`](#char) and [`charoff`](#charoff) attributes. +- `bgcolor` {{deprecated_inline}} - If this attribute is not set, the `left` value is assumed. + - : Defines the background color of each foot cell. The value is an HTML color; either a [6-digit hexadecimal RGB code](/en-US/docs/Web/CSS/hex-color), prefixed by a '`#`', or a [color keyword](/en-US/docs/Web/CSS/named-color). Other CSS {{cssxref("color_value", "<color>")}} values are not supported. Use the {{cssxref("background-color")}} CSS property instead, as this attribute is deprecated. - > **Note:** - > - > - To achieve the same effect as the `left`, `center`, `right` or `justify` values, use the CSS {{cssxref("text-align")}} property on it. - > - To achieve the same effect as the `char` value, in CSS, you can use the value of the [`char`](#char) as the value of the {{cssxref("text-align")}} property. +- `char` {{deprecated_inline}} -- `bgcolor` {{Deprecated_inline}} + - : Specifies the alignment of the content to a character of each foot cell. Typical values for this include a period (`.`) when attempting to align numbers or monetary values. If [`align`](#align) is not set to `char`, this attribute is ignored. - - : The background color of the table. It is a [6-digit hexadecimal RGB code](/en-US/docs/Web/CSS/hex-color), prefixed by a '`#`'. One of the predefined [color keywords](/en-US/docs/Web/CSS/named-color) can also be used. +- `charoff` {{deprecated_inline}} - To achieve a similar effect, use the CSS {{cssxref("background-color")}} property. + - : Specifies the number of characters to offset the foot cell content from the alignment character specified by the [`char`](#char) attribute. -- `char` {{deprecated_inline}} - - : This attribute specifies the alignment of the content in a column to a character. Typical values for this include a period (.) when attempting to align numbers or monetary values. If [`align`](#align) is not set to `char`, this attribute is ignored. -- `charoff` {{deprecated_inline}} - - : This attribute is used to indicate the number of characters to offset the column data from the alignment characters specified by the `char` attribute. - `valign` {{deprecated_inline}} - - : This attribute specifies the vertical alignment of the text within each row of cells of the table footer. Possible values for this attribute are: + - : Specifies the vertical alignment of each foot cell. The possible {{Glossary("enumerated")}} values are `baseline`, `bottom`, `middle`, and `top`. Use the {{cssxref("vertical-align")}} CSS property instead, as this attribute is deprecated. + +## Usage notes + +- The `` is placed after any {{HTMLElement("caption")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, and {{HTMLElement("tr")}} elements. +- Along with its related {{HTMLElement("thead")}} and {{HTMLElement("tbody")}} elements, the `` element provides useful {{Glossary("semantics", "semantic")}} information and can be used when rendering for either screen or print. Specifying such table content groups also provides valuable contextual information for assistive technologies, including screen readers and search engines. +- When printing a document, in the case of a multipage table, the table foot usually specifies information that is output as an intermediate summary on each page. - - `baseline`, which will put the text as close to the bottom of the cell as it is possible, but align it on the [baseline](https://en.wikipedia.org/wiki/Baseline_%28typography%29) of the characters instead of the bottom of them. If characters are all of the size, this has the same effect as `bottom`. - - `bottom`, which will put the text as close to the bottom of the cell as it is possible; - - `middle`, which will center the text in the cell; - - and `top`, which will put the text as close to the top of the cell as it is possible. +## Example - > **Note:** Do not use this attribute as it is obsolete (and not supported) in the latest standard: instead set the CSS {{cssxref("vertical-align")}} property on it. +See {{HTMLElement("table")}} for a complete table example introducing common standards and best practices. -## Examples +This example demonstrates a table divided into a head section with column headers, a body section with the table's main data, and a foot section summarizing data of one column. -Please see the {{HTMLElement("table")}} page for examples on ``. +#### HTML + +The {{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, and `` elements are used to structure a basic table into {{Glossary("semantics", "semantic")}} sections. The `` element represents the foot section of the table, which contains a row ({{HTMLElement("tr")}}) representing the calculated average of the values in the "Credits" column. + +To allocate the cells in the foot to the correct columns, the [`colspan`](/en-US/docs/Web/HTML/Element/th#colspan) attribute is used on the {{HTMLElement("th")}} element to span row header cell across the first three table columns. The single data cell ({{HTMLElement("td")}}) in the foot is automatically placed in the correct location, i.e., the fourth column, with the omitted [`colspan`](/en-US/docs/Web/HTML/Element/td#colspan) attribute value defaulting to `1`. Additionally, the [`scope`](/en-US/docs/Web/HTML/Element/th#scope) attribute is set to `row` on the header cell ({{HTMLElement("th")}}) in the foot to explicitly define that this foot header cell relates to the table cells within the same row, which in our example is the one data cell in the foot row that contains the calculated average. + +```html + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Student IDNameMajorCredits
3741255Jones, MarthaComputer Science240
3971244Nim, VictorRussian Literature220
4100332Petrov, AlexandraAstrophysics260
Average Credits240
+``` + +#### CSS + +Some basic CSS is used to style and highlight the table foot so that the foot cells stand out from the data in the table body. + +```css +tfoot { + border-top: 3px dotted rgb(160 160 160); + background-color: #2c5e77; + color: #fff; +} + +tfoot th { + text-align: right; +} + +tfoot td { + font-weight: bold; +} + +thead { + border-bottom: 2px solid rgb(160 160 160); + background-color: #2c5e77; + color: #fff; +} + +tbody { + background-color: #e4f0f5; +} +``` + +```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; +} + +tr > td:last-of-type { + text-align: center; +} +``` + +#### Result + +{{EmbedLiveSample("Example", 650, 180)}} ## Technical summary @@ -91,10 +180,10 @@ Please see the {{HTMLElement("table")}} page for examples on ``. {{HTMLElement("tfoot")}} must appear after any {{HTMLElement("caption")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("thead")}}, - {{HTMLElement("tbody")}}, or {{HTMLElement("tr")}} - element. Note that this is the requirement in HTML.
Originally, in HTML4, the opposite was true: the {{HTMLElement("tfoot")}} element could not be placed after any - {{HTMLElement("tbody")}} or {{HTMLElement("tr")}} - element. + {{HTMLElement("tbody")}}, and {{HTMLElement("tr")}} + elements. Note that this is the requirement in HTML.
Originally, in HTML4, the opposite was true: the {{HTMLElement("tfoot")}} element could not be placed after any + {{HTMLElement("tbody")}} and {{HTMLElement("tr")}} + elements. @@ -128,8 +217,9 @@ Please see the {{HTMLElement("table")}} page for examples on ``. ## See also -- Other table-related HTML Elements: {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}}; -- CSS properties and pseudo-classes that may be specially useful to style the `` element: - - - the {{cssxref(":nth-child")}} pseudo-class to set the alignment on the cells of the column; - - the {{cssxref("text-align")}} property to align all cells content on the same character, like '.'. +- [Learn: HTML tables](/en-US/docs/Learn/HTML/Tables) +- {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}}: Other table-related elements +- {{cssxref("background-color")}}: CSS property to set the background color of each foot cell +- {{cssxref("border")}}: CSS property to control borders of foot cells +- {{cssxref("text-align")}}: CSS property to horizontally align each foot cell content +- {{cssxref("vertical-align")}}: CSS property to vertically align each foot cell content diff --git a/files/en-us/web/html/element/th/column-row-span.html b/files/en-us/web/html/element/th/column-row-span.html new file mode 100644 index 000000000000000..796d0f6595a12a3 --- /dev/null +++ b/files/en-us/web/html/element/th/column-row-span.html @@ -0,0 +1,163 @@ + + + + + + Column and row span + + + + + + + + + + + + + + + +
+ Illustration demonstrating column and row spanning of table cells +
1234
+
+
5
+
6
+
+ + diff --git a/files/en-us/web/html/element/th/column-row-span.png b/files/en-us/web/html/element/th/column-row-span.png new file mode 100644 index 000000000000000..a779fb8e844a4e7 Binary files /dev/null and b/files/en-us/web/html/element/th/column-row-span.png differ diff --git a/files/en-us/web/html/element/th/index.md b/files/en-us/web/html/element/th/index.md index 01b70c97ceef27d..1bbf6f590229e80 100644 --- a/files/en-us/web/html/element/th/index.md +++ b/files/en-us/web/html/element/th/index.md @@ -7,7 +7,7 @@ browser-compat: html.elements.th {{HTMLSidebar}} -The **``** [HTML](/en-US/docs/Web/HTML) element defines a cell as the header of a group of table cells. The exact nature of this group is defined by the [`scope`](#scope) and [`headers`](#headers) attributes. +The **``** [HTML](/en-US/docs/Web/HTML) element defines a cell as the header of a group of table cells and may be used as a child of the {{HTMLElement("tr")}} element. The exact nature of this group is defined by the [`scope`](#scope) and [`headers`](#headers) attributes. {{EmbedInteractiveExample("pages/tabbed/th.html","tabbed-taller")}} @@ -16,91 +16,293 @@ The **``** [HTML](/en-US/docs/Web/HTML) element defines a cell as the header This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attributes). - `abbr` - - : This attribute contains a short abbreviated description of the cell's content. Some user-agents, such as speech readers, may present this description before the content itself. + - : A short, abbreviated description of the header cell's content provided as an alternative label to use for the header cell when referencing the cell in other contexts. Some user-agents, such as speech readers, may present this description before the content itself. - `colspan` - - : This attribute contains a non-negative integer value that indicates for how many columns the cell extends. Its default value is `1`. Values higher than 1000 will be considered as incorrect and will be set to the default value (1). + - : A non-negative integer value indicating how many columns the header cell spans or extends. The default value is `1`. User agents dismiss values higher than 1000 as incorrect, defaulting such values to `1`. - `headers` - - : This attribute contains a list of space-separated strings, each corresponding to the **id** attribute of the {{HTMLElement("th")}} elements that apply to this element. + - : A list of space-separated strings corresponding to the `id` attributes of the `` elements that provide the headers for this header cell. - `rowspan` - - : This attribute contains a non-negative integer value that indicates for how many rows the cell extends. Its default value is `1`; if its value is set to `0`, it extends until the end of the table section ({{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, even if implicitly defined), that the cell belongs to. Values higher than 65534 are clipped down to 65534. + - : A non-negative integer value indicating how many rows the header cell spans or extends. The default value is `1`; if its value is set to `0`, the header cell will extends to the end of the table grouping section ({{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, even if implicitly defined), that the `` belongs to. Values higher than `65534` are clipped at `65534`. - `scope` - - : This [enumerated](/en-US/docs/Glossary/Enumerated) attribute defines the cells that the header (defined in the {{HTMLElement("th")}}) element relates to. It may have the following values: + - : Defines the cells that the header (defined in the ``) element relates to. Possible {{Glossary("enumerated", "enumerated")}} values are: - - `row`: The header relates to all cells of the row it belongs to. - - `col`: The header relates to all cells of the column it belongs to. - - `rowgroup`: The header belongs to a rowgroup and relates to all of its cells. - - `colgroup`: The header belongs to a colgroup and relates to all of its cells. + - `row`: the header relates to all cells of the row it belongs to; + - `col`: the header relates to all cells of the column it belongs to; + - `rowgroup`: the header belongs to a rowgroup and relates to all of its cells; + - `colgroup`: the header belongs to a colgroup and relates to all of its cells. - If the `scope` attribute is not specified, or its value is not `row`, `col`, or `rowgroup`, or `colgroup`, then browsers automatically select the set of cells to which the header cell applies. + If the `scope` attribute is not specified, or its value is not `row`, `col`, `rowgroup`, or `colgroup`, then browsers automatically select the set of cells to which the header cell applies. ### Deprecated attributes -- `align` {{deprecated_inline}} - - - : This enumerated attribute specifies how the cell content's horizontal alignment will be handled. Possible values are: +The following attributes are deprecated and should not be used. They are documented below for reference when updating existing code and for historical interest only. - - `left`: The content is aligned to the left of the cell. - - `center`: The content is centered in the cell. - - `right`: The content is aligned to the right of the cell. - - `justify` (with text only): The content is stretched out inside the cell so that it covers its entire width. - - `char` (with text only): The content is aligned to a character inside the `` element with minimal offset. This character is defined by the [`char`](#char) and [`charoff`](#charoff) attributes. - - The default value when this attribute is not specified is `left`. +- `align` {{deprecated_inline}} - > **Note:** Do not use this attribute as it is obsolete in the latest standard. - > - > - To achieve the same effect as the `left`, `center`, `right` or `justify` values, apply the CSS {{cssxref("text-align")}} property to the element. - > - To achieve the same effect as the `char` value, give the {{cssxref("text-align")}} property the same value you would use for the [`char`](#char). + - : Specifies the horizontal alignment of the header cell. The possible {{Glossary("enumerated")}} values are `left`, `center`, `right`, `justify`, and `char`. When supported, the `char` value aligns the textual content on the character defined in the [`char`](#char) attribute and the offset defined by the [`charoff`](#charoff) attribute. Use the {{cssxref("text-align")}} CSS property instead, as this attribute is deprecated. - `axis` {{deprecated_inline}} - - : This attribute contains a list of space-separated strings. Each string is the `id` of a group of cells that this header applies to. + - : Contains a list of space-separated strings, each corresponding to the `id` attribute of a group of cells that the header cell applies to. Use the [`scope`](#scope) attribute instead, as this attribute is deprecated. - > **Note:** Do not use this attribute as it is obsolete in the latest standard: use the [`scope`](#scope) attribute instead. +- `bgcolor` {{deprecated_inline}} -- `bgcolor` {{Deprecated_Inline}} - - - : This attribute defines the background color of each cell in a column. It consists of a 6-digit hexadecimal code as defined in [sRGB](https://www.w3.org/Graphics/Color/sRGB) and is prefixed by '#'. + - : Defines the background color of the header cell. The value is an HTML color; either a [6-digit hexadecimal RGB code](/en-US/docs/Web/CSS/hex-color), prefixed by a '`#`', or a [color keyword](/en-US/docs/Web/CSS/named-color). Other CSS {{cssxref("color_value", "<color>")}} values are not supported. Use the {{cssxref("background-color")}} CSS property instead, as this attribute is deprecated. - `char` {{deprecated_inline}} - - : The content in the cell element is aligned to a character. Typical values include a period (.) to align numbers or monetary values. If [`align`](#align) is not set to `char`, this attribute is ignored. - - > **Note:** Do not use this attribute as it is obsolete in the latest standard. To achieve the same effect, you can specify the character as the first value of the {{cssxref("text-align")}} property. + - : Specifies the alignment of the content to a character of the header cell. Typical values for this include a period (`.`) when attempting to align numbers or monetary values. If [`align`](#align) is not set to `char`, this attribute is ignored. - `charoff` {{deprecated_inline}} - - : This attribute is used to shift column data to the right of the character specified by the **char** attribute. Its value specifies the length of this shift. - - > **Note:** Do not use this attribute as it is obsolete in the latest standard. + - : Specifies the number of characters to offset the header cell content from the alignment character specified by the [`char`](#char) attribute. - `height` {{deprecated_inline}} - - : This attribute is used to define a recommended cell height. - - > **Note:** Do not use this attribute as it is obsolete in the latest standard: use the CSS {{cssxref("height")}} property instead. + - : Defines a recommended header cell height. Use the {{cssxref("height")}} CSS property instead, as this attribute is deprecated. - `valign` {{deprecated_inline}} - - : This attribute specifies how a text is vertically aligned inside a cell. Possible values for this attribute are: + - : Specifies the vertical alignment of the header cell. The possible {{Glossary("enumerated")}} values are `baseline`, `bottom`, `middle`, and `top`. Use the {{cssxref("vertical-align")}} CSS property instead, as this attribute is deprecated. - - `baseline`: Positions the text near the bottom of the cell and aligns it with the [baseline](https://en.wikipedia.org/wiki/Baseline_%28typography%29) of the characters instead of the bottom. If characters don't descend below the baseline, the baseline value achieves the same effect as `bottom`. - - `bottom`: Positions the text near the bottom of the cell. - - `middle`: Centers the text in the cell. - - and `top`: Positions the text near the top of the cell. +- `width` {{deprecated_inline}} - > **Note:** Do not use this attribute as it is obsolete in the latest standard: use the CSS {{cssxref("vertical-align")}} property instead. + - : Defines a recommended header cell width. Use the {{cssxref("width")}} CSS property instead, as this attribute is deprecated. -- `width` {{deprecated_inline}} +## Usage notes - - : This attribute is used to define a recommended cell width. Additional space can be added with the {{domxref("HTMLTableElement.cellSpacing", "cellspacing")}} and {{domxref("HTMLTableElement.cellPadding", "cellpadding")}} properties and the width of the {{HTMLElement("col")}} element can also create extra width. But, if a column's width is too narrow to show a particular cell properly, it will be widened when displayed. +- The `` may only be used within a {{HTMLElement("tr")}} element. +- In simple contexts, using the [`scope`](#scope) attribute on header cells (`` elements) is redundant because [`scope`](#scope) is inferred. However, certain assistive technologies may fail to infer correctly, so specifying header scope may improve user experiences. +- When using the [`colspan`](#colspan) and [`rowspan`](#rowspan) attributes to span header cells across multiple columns and rows, cells without these attributes defined (with a default value of `1`) are automatically fitted into free available spaces in the table structure that span 1x1 cells, as illustrated in the following figure: - > **Note:** Do not use this attribute as it is obsolete in the latest standard: use the CSS {{cssxref("width")}} property instead. + ![Illustration demonstrating column and row spanning of table cells: cells 1, 3, and 4 spanning two rows; cell 2 spanning two columns; cells 5 and 6 fitting into the available cells that are the second and third columns in the second row](column-row-span.png) + + > **Note:** These attributes must not be used to overlap cells. ## Examples -See {{HTMLElement("table")}} for examples on ``. +See {{HTMLElement("table")}} for a complete table example introducing common standards and best practices. + +### Basic column and row headers + +This example uses `` elements to introduce column and row headers in a basic table structure. + +#### HTML + +The first row ({{HTMLElement("tr")}} element) contains the column headers (`` elements), which act as "titles" for the columns to make it easier to understand the information in the columns and identify the data. To indicate that each column header relates to all cells in the corresponding column, the [`scope`](#scope) attribute is set to `col` (column). + +The remaining rows contain the main data of the table. Each of these rows has a row header (`` element) introduced as the first cell. This creates a column with row headers as the first column of the table. Similar to the column headers, the [`scope`](#scope) attribute is set to `row` to specify which cells each row header relates to, which in the example below are all data cells ({{HTMLElement("td")}} elements) in each `row`. + +> **Note:** Normally, the grouping elements {{HTMLElement("thead")}} and {{HTMLElement("tbody")}} are used to group rows with headers into the respective table head and body sections. These elements are ommitted in this example to reduce complexity and enable focusing on the use of header cells. + +```html + + + + + + + + + + + + + + + + + + + + + + + + + + +
SymbolCode wordPronunciation
AAlfaAL fah
BBravoBRAH voh
CCharlieCHAR lee
DDeltaDELL tah
+``` + +#### CSS + +Some basic CSS is used to style the table and its cells. We use CSS [attribute selectors](/en-US/docs/Web/CSS/Attribute_selectors) to target header cells based on their [`scope`](#scope) attribute values, highlighting column and row headers (`` elements) and differentiating them each other and from the data cells ({{HTMLElement("td")}}). + +```css +th, +td { + border: 1px solid rgb(160 160 160); + padding: 8px 10px; +} + +th[scope="col"] { + background-color: #505050; + color: #fff; +} + +th[scope="row"] { + background-color: #d6ecd4; +} + +tr:nth-of-type(odd) td { + background-color: #eee; +} +``` + +```css hidden +table { + border-collapse: collapse; + border: 2px solid rgb(140 140 140); + font-family: sans-serif; + font-size: 0.8rem; + letter-spacing: 1px; +} +``` + +#### Result + +{{EmbedLiveSample("Basic_column_and_row_headers", 650, 170)}} + +### Column and row spanning + +This example extends and enhances the basic table from the [previous example](#basic_column_and_row_headers) by adding a second row for additional column headers. + +#### HTML + +An additional table row ({{HTMLElement("tr")}} element) is added as the second header row of the table with two additional column headers (`` elements). In this way, the "Pronunciation" column is split into two columns, one for the IPA (International Phonetic Alphabet) notation and one for the respelling (the original pronunciation column). The corresponding data cells ({{HTMLElement("td")}} elements) are added to each subsequent row. + +As shown in the [usage notes](#usage_notes), the [`colspan`](#colspan) and [`rowspan`](#rowspan) attributes can be used for the `` elements to allocate the header cells to the correct columns and rows. To achieve a "two-row" header in the table structure, the first two header cells within the first {{HTMLElement("tr")}} element are spanned across two rows. The third header cell is spanned two columns wide (remaining in the first row). This setup leaves two available areas in the third and fourth columns in the second row, where the two headers within the second {{HTMLElement("tr")}} element are automatically placed, with the default value being `1` for the [`colspan`](#colspan) and [`rowspan`](#rowspan) attributes. + +> **Note:** Normally, {{HTMLElement("thead")}} and {{HTMLElement("tbody")}} elements are used to group rows with headers into the respective table head and body sections. This is not implemented in this example to focus on the headers and spanning and reduce the example's complexity. + +```html + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SymbolCode wordPronunciation
IPARespelling
AAlfaˈælfaAL fah
BBravoˈbraːˈvoBRAH voh
CCharlieˈtʃɑːliCHAR lee
DDeltaˈdeltɑDELL tah
+``` + +#### CSS + +The CSS is unchanged from the [previous example](#basic_column_and_row_headers). + +```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; +} + +th[scope="col"] { + background-color: #505050; + color: #fff; +} + +th[scope="row"] { + background-color: #d6ecd4; +} + +tr:nth-of-type(odd) td { + background-color: #eee; +} +``` + +#### Result + +{{EmbedLiveSample("Column_and_row_spanning", 650, 200)}} + +### Associate header cells with other header cells + +For more complex relationships between header cells, using `th` elements with the [`scope`](#scope) attribute alone may not be sufficient for assistive technologies, especially screen readers. + +#### HTML + +To improve the {{Glossary("accessibility", "accessibility")}} of the [previous example](#column_and_row_spanning) and to allow screen readers, for example, to speak the headers associated with each header cell, the [`headers`](#headers) attribute can be introduced along with [`id`](/en-US/docs/Web/HTML/Global_attributes/id) attributes. Because of the way the "Pronunciation" column is split into two columns in the example, introducing a "two row" header, assistive technologies such as screen readers may not be able to identify which additional header cells (`th` elements) the "Pronunciation" header cell is related to and vice versa. Therefore, the [`headers`](#headers) attribute is used on the "Pronunciation", "IPA", and "Respelling" header cells to associate the related header cells based on the values of the unique identifiers from the added [`id`](/en-US/docs/Web/HTML/Global_attributes/id) attributes in the form of a space-separated list. + +> **Note:** It's recommended to use more descriptive and useful values for the [`id`](/en-US/docs/Web/HTML/Global_attributes/id) attribute. Each `id` in a document must be unique to that document. In this example, the `id` values are single characters to maintain focus on the concept of the [`headers`](#headers) attribute. + +```html + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SymbolCode wordPronunciation
IPARespelling
AAlfaˈælfaAL fah
BBravoˈbraːˈvoBRAH voh
CCharlieˈtʃɑːliCHAR lee
DDeltaˈdeltɑDELL tah
+``` + +#### Result + +The [visual result](#result_2) is unchanged from the [previous example table](#column_and_row_spanning). ## Technical summary @@ -163,4 +365,12 @@ See {{HTMLElement("table")}} for examples on ``. ## See also -- Other table-related HTML Elements: {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}}. +- [Learn: HTML tables](/en-US/docs/Learn/HTML/Tables) +- {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}}: Other table-related elements +- {{cssxref("background-color")}}: CSS property to set the background color of each header cell +- {{cssxref("border")}}: CSS property to control borders of header cells +- {{cssxref("height")}}: CSS property to control the recommended header cell height +- {{cssxref("text-align")}}: CSS property to horizontally align each header cell content +- {{cssxref("vertical-align")}}: CSS property to vertically align each header cell content +- {{cssxref("width")}}: CSS property to control the recommended header cell width +- {{cssxref(":nth-of-type")}}, {{cssxref(":first-of-type")}}, {{cssxref(":last-of-type")}}: CSS pseudo-classes to select the desired header cells diff --git a/files/en-us/web/html/element/thead/column-row-span.html b/files/en-us/web/html/element/thead/column-row-span.html new file mode 100644 index 000000000000000..796d0f6595a12a3 --- /dev/null +++ b/files/en-us/web/html/element/thead/column-row-span.html @@ -0,0 +1,163 @@ + + + + + + Column and row span + + + + + + + + + + + + + + + +
+ Illustration demonstrating column and row spanning of table cells +
1234
+
+
5
+
6
+
+ + diff --git a/files/en-us/web/html/element/thead/column-row-span.png b/files/en-us/web/html/element/thead/column-row-span.png new file mode 100644 index 000000000000000..a779fb8e844a4e7 Binary files /dev/null and b/files/en-us/web/html/element/thead/column-row-span.png differ diff --git a/files/en-us/web/html/element/thead/index.md b/files/en-us/web/html/element/thead/index.md index f5fdb768511fd52..574891f1c965bf8 100644 --- a/files/en-us/web/html/element/thead/index.md +++ b/files/en-us/web/html/element/thead/index.md @@ -7,7 +7,7 @@ browser-compat: html.elements.thead {{HTMLSidebar}} -The **``** [HTML](/en-US/docs/Web/HTML) element defines a set of rows defining the head of the columns of the table. +The **``** [HTML](/en-US/docs/Web/HTML) element encapsulates a set of table rows ({{HTMLElement("tr")}} elements), indicating that they comprise the head of a table with information about the table's columns. This is usually in the form of column headers ({{HTMLElement("th")}} elements). {{EmbedInteractiveExample("pages/tabbed/thead.html","tabbed-taller")}} @@ -17,54 +17,213 @@ This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attrib ### Deprecated attributes +The following attributes are deprecated and should not be used. They are documented below for reference when updating existing code and for historical interest only. + - `align` {{deprecated_inline}} - - : This [enumerated](/en-US/docs/Glossary/Enumerated) attribute specifies how horizontal alignment of each cell content will be handled. Possible values are: + - : Specifies the horizontal alignment of each head cell. The possible {{Glossary("enumerated")}} values are `left`, `center`, `right`, `justify`, and `char`. When supported, the `char` value aligns the textual content on the character defined in the [`char`](#char) attribute and the offset defined by the [`charoff`](#charoff) attribute. Use the {{cssxref("text-align")}} CSS property instead, as this attribute is deprecated. - - `left`, aligning the content to the left of the cell - - `center`, centering the content in the cell - - `right`, aligning the content to the right of the cell - - `justify`, inserting spaces into the textual content so that the content is justified in the cell - - `char`, aligning the textual content on a special character with a minimal offset, defined by the [`char`](#char) and [`charoff`](#charoff) attributes. +- `bgcolor` {{deprecated_inline}} - If this attribute is not set, the `left` value is assumed. + - : Defines the background color of each head cell. The value is an HTML color; either a [6-digit hexadecimal RGB code](/en-US/docs/Web/CSS/hex-color), prefixed by a '`#`', or a [color keyword](/en-US/docs/Web/CSS/named-color). Other CSS {{cssxref("color_value", "<color>")}} values are not supported. Use the {{cssxref("background-color")}} CSS property instead, as this attribute is deprecated. - > **Warning:** Do not use this attribute as it is obsolete (not supported) in the latest standard. - > - > - To align values, use the CSS {{cssxref("text-align")}} property instead. +- `char` {{deprecated_inline}} -- `bgcolor` {{Deprecated_Inline}} + - : Specifies the alignment of the content to a character of each head cell. If [`align`](#align) is not set to `char`, this attribute is ignored. - - : This attribute defines the background color of each column cell. It accepts a 6-digit hexadecimal color or a named color. Alpha transparency is not supported. +- `charoff` {{deprecated_inline}} - > **Note:** Do not use this attribute, as it is non-standard. The `thead` element should be styled using the CSS {{cssxref("background-color")}} property, which can be applied to any element, including the `thead`, {{HTMLElement("tr")}}, {{HTMLElement("td")}} and {{HTMLElement("th")}} elements. + - : Specifies the number of characters to offset the head cell content from the alignment character specified by the [`char`](#char) attribute. -- `char` {{deprecated_inline}} +- `valign` {{deprecated_inline}} - - : This attribute is used to set the character to align the cells in a column on. Typical values for this include a period (.) when attempting to align numbers or monetary values. If [`align`](#align) is not set to `char`, this attribute is ignored. + - : Specifies the vertical alignment of each head cell. The possible {{Glossary("enumerated")}} values are `baseline`, `bottom`, `middle`, and `top`. Use the {{cssxref("vertical-align")}} CSS property instead, as this attribute is deprecated. - > **Note:** Do not use this attribute as it is obsolete (and not supported) in the latest standard. +## Usage notes -- `charoff` {{deprecated_inline}} +- The `` is placed after any {{HTMLElement("caption")}} and {{HTMLElement("colgroup")}} elements, but before any {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, and {{HTMLElement("tr")}} elements. +- Along with its related {{HTMLElement("tbody")}} and {{HTMLElement("tfoot")}} elements, the `` element provides useful {{Glossary("semantics", "semantic")}} information and can be used when rendering for either screen or print. Specifying such table content groups also provides valuable contextual information for assistive technologies, including screen readers and search engines. +- When printing a document, in the case of a multipage table, the table head usually specifies information that remains the same on each page. - - : This attribute is used to indicate the number of characters to offset the column data from the alignment characters specified by the **char** attribute. +## Examples - > **Note:** Do not use this attribute as it is obsolete (and not supported) in the latest standard. +See {{HTMLElement("table")}} for a complete table example introducing common standards and best practices. -- `valign` {{deprecated_inline}} +### Basic head structure - - : This attribute specifies the vertical alignment of the text within each row of cells of the table header. Possible values for this attribute are: +This example demonstrates a table divided into a head section with column headers and a body section with the table's main data. - - `baseline`, which will put the text as close to the bottom of the cell as it is possible, but align it on the [baseline](https://en.wikipedia.org/wiki/Baseline_%28typography%29) of the characters instead of the bottom of them. If characters are all of the size, this has the same effect as `bottom`. - - `bottom`, which will put the text as close to the bottom of the cell as it is possible; - - `middle`, which will center the text in the cell; - - `top`, which will put the text as close to the top of the cell as it is possible. +#### HTML - > **Note:** Do not use this attribute as it is obsolete (and not supported) in the latest standard: instead set the CSS {{cssxref("vertical-align")}} property on it. +The `` and {{HTMLElement("tbody")}} elements are used to structure the table rows into {{Glossary("semantics", "semantic")}} sections. The `` element represents the head section of the table, which contains a row ({{HTMLElement("tr")}}) of column headers cells ({{HTMLElement("th")}}). -## Examples +```html + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Student IDNameMajorCredits
3741255Jones, MarthaComputer Science240
3971244Nim, VictorRussian Literature220
4100332Petrov, AlexandraAstrophysics260
+``` + +#### CSS + +Some basic CSS is used to style and highlight the table head so that the headings of the columns stand out from the data in the table body. + +```css +thead { + border-bottom: 2px solid rgb(160 160 160); + text-align: center; + background-color: #2c5e77; + color: #fff; +} + +tbody { + background-color: #e4f0f5; +} +``` + +```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; +} + +tbody > tr > td:last-of-type { + text-align: center; +} +``` + +#### Result + +{{EmbedLiveSample("Basic_head_structure", 650, 140)}} + +### Multiple head rows + +This example demonstrates a table head section with two rows. -See {{HTMLElement("table")}} for examples on ``. +#### HTML + +We extend the markup the table from the [basic example](#basic_head_structure) in this example by including two table rows ({{HTMLElement("tr")}}) within the `` element creating a multi-row table head. We included an additional column, splitting the student names into first and last names. + +```html + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Student IDStudentMajorCredits
First nameLast name
3741255MarthaJonesComputer Science240
3971244VictorNimRussian Literature220
4100332AlexandraPetrovAstrophysics260
+``` + +#### Cell spanning + +In order to associate and line up the header cells with the correct columns and rows, the [`colspan`](/en-US/docs/Web/HTML/Element/th#colspan) and [`rowspan`](/en-US/docs/Web/HTML/Element/th#rowspan) attributes are used on the {{HTMLElement("th")}} elements. The values set in these attributes specify how many cells each header cell ({{HTMLElement("th")}}) spans. Due to the way these attributes are set, the two second-row header cells are lined up with the columns they head. These each span one row and one column as the default values for the [`colspan`](/en-US/docs/Web/HTML/Element/th#colspan) and [`rowspan`](/en-US/docs/Web/HTML/Element/th#rowspan) attributes are both `1`. + +The column and row spanning demonstrated by this example are illustrated in the following figure: + +![Illustration demonstrating column and row spanning of table cells: cells 1, 3, and 4 spanning one column and two rows each; cell 2 spanning two columns and one row; cells 5 and 6 span a single row and column each, fitting into the available cells that are the second and third columns in the second row](column-row-span.png) + +#### CSS + +The CSS is unchanged from the [previous example](#basic_head_structure). + +```css hidden +thead { + border-bottom: 2px solid rgb(160 160 160); + background-color: #2c5e77; + color: #fff; +} + +table { + border-collapse: collapse; + border: 2px solid rgb(140 140 140); + font-family: sans-serif; + font-size: 0.8rem; + letter-spacing: 1px; +} + +tbody { + background-color: #e4f0f5; +} + +th, +td { + border: 1px solid rgb(160 160 160); + padding: 8px 10px; +} + +tbody > tr > td:last-of-type { + text-align: center; +} +``` + +#### Result + +{{EmbedLiveSample("Multiple_head_rows", 650, 180)}} ## Technical summary @@ -96,11 +255,11 @@ See {{HTMLElement("table")}} for examples on ``. A {{HTMLElement("table")}} element. The {{HTMLElement("thead")}} must appear after any - {{HTMLElement("caption")}} or - {{HTMLElement("colgroup")}} element, even implicitly defined, + {{HTMLElement("caption")}} and + {{HTMLElement("colgroup")}} elements, even implicitly defined, but before any {{HTMLElement("tbody")}}, - {{HTMLElement("tfoot")}} and {{HTMLElement("tr")}} - element. + {{HTMLElement("tfoot")}}, and {{HTMLElement("tr")}} + elements. @@ -134,8 +293,9 @@ See {{HTMLElement("table")}} for examples on ``. ## See also -- Other table-related HTML Elements: {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("tr")}}; -- CSS properties and pseudo-classes that may be specially useful to style the `` element: - - - the {{cssxref(":nth-child")}} pseudo-class to set the alignment on the cells of the column; - - the {{cssxref("text-align")}} property to align all cells content on the same character, like '.'. +- [Learn: HTML tables](/en-US/docs/Learn/HTML/Tables) +- {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("tr")}}: Other table-related elements +- {{cssxref("background-color")}}: CSS property to set the background color of each head cell +- {{cssxref("border")}}: CSS property to control borders of head cells +- {{cssxref("text-align")}}: CSS property to horizontally align each head cell content +- {{cssxref("vertical-align")}}: CSS property to vertically align each head cell content diff --git a/files/en-us/web/html/element/tr/index.md b/files/en-us/web/html/element/tr/index.md index 301b528d7074b33..e1f2232617115fb 100644 --- a/files/en-us/web/html/element/tr/index.md +++ b/files/en-us/web/html/element/tr/index.md @@ -11,506 +11,337 @@ The **``** [HTML](/en-US/docs/Web/HTML) element defines a row of cells in a {{EmbedInteractiveExample("pages/tabbed/tr.html","tabbed-taller")}} -To provide additional control over how cells fit into (or span across) columns, both `` and `` support the [`colspan`](/en-US/docs/Web/HTML/Element/td#colspan) attribute, which lets you specify how many columns wide the cell should be, with the default being 1. Similarly, you can use the [`rowspan`](/en-US/docs/Web/HTML/Element/td#rowspan) attribute on cells to indicate they should span more than one table row. - -This can take a little practice to get right when building your tables. We have some [examples](#examples) below, but for more examples and an in-depth tutorial, see the [HTML tables](/en-US/docs/Learn/HTML/Tables) series in our [Learn web development](/en-US/docs/Learn) area, where you'll learn how to use the table elements and their attributes to get just the right layout and formatting for your tabular data. - ## Attributes -This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attributes). There are also several [deprecated attributes](#deprecated_attributes), which you should avoid but may need to know when reading older code. +This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attributes). ### Deprecated attributes -The following attributes may still be implemented in browsers but are no longer part of the HTML specification and may be missing or may not work as expected. They should be avoided. +The following attributes are deprecated and should not be used. They are documented below for reference when updating existing code and for historical interest only. - `align` {{deprecated_inline}} - - : A string which specifies how the cell's context should be aligned horizontally within the cells in the row; this is shorthand for using `align` on every cell in the row individually. Possible values are: - - - `left` - - : Align the content of each cell at its left edge. - - `center` - - : Center the contents of each cell between their left and right edges. - - `right` - - : Align the content of each cell at its right edge. - - `justify` - - : Widen whitespaces within the text of each cell so that the text fills the full width of each cell (full justification). - - `char` - - : Align each cell in the row on a specific character (such that each row in the column that is configured this way will horizontally align its cells on that character). This uses the [`char`](#char) and [`charoff`](#charoff) to establish the alignment character (typically "." or "," when aligning numerical data) and the number of characters that should follow the alignment character. This alignment type was never widely supported. - - If no value is expressly set for `align`, the parent node's value is inherited. - - > **Note:** Instead of using the obsolete `align` attribute, you should instead use the CSS {{CSSxRef("text-align")}} property to establish `left`, `center`, `right`, or `justify` alignment for the row's cells. To apply character-based alignment, set the CSS {{CSSxRef("text-align")}} property to the alignment character (such as `"."` or `","`). + - : Specifies the horizontal alignment of each row cell. The possible {{Glossary("enumerated")}} values are `left`, `center`, `right`, `justify`, and `char`. When supported, the `char` value aligns the textual content on the character defined in the [`char`](#char) attribute and on offset defined by the [`charoff`](#charoff) attribute. Use the {{cssxref("text-align")}} CSS property instead, as this attribute is deprecated. - `bgcolor` {{deprecated_inline}} - - : A string specifying a color to apply to the backgrounds of each of the row's cells. This can be either a [hexadecimal `#RRGGBB` or `#RGB` value](/en-US/docs/Web/CSS/color_value/rgb) or a [color keyword](/en-US/docs/Web/CSS/named-color). Omitting the attribute or setting it to `null` in JavaScript causes the row's cells to inherit the row's parent element's background color. - - > **Note:** The {{HTMLElement("tr")}} element should be styled using [CSS](/en-US/docs/Web/CSS). To give a similar effect as the `bgcolor` attribute, use the CSS property {{CSSxRef("background-color")}}. + - : Defines the background color of each row cell. The value is an HTML color; either a [6-digit hexadecimal RGB code](/en-US/docs/Web/CSS/hex-color), prefixed by a '`#`', or a [color keyword](/en-US/docs/Web/CSS/named-color). Other CSS {{cssxref("color_value", "<color>")}} values are not supported. Use the {{cssxref("background-color")}} CSS property instead, as this attribute is deprecated. - `char` {{deprecated_inline}} - - : A string that sets the character to align the cells in each row's columns (each row's centering that uses the same character gets aligned with others using the same character. Typical values for this include a period (`"."`) or comma (`","`) when attempting to align numbers or monetary values. If [`align`](#align) is not set to `char`, this attribute is ignored. - - > **Note:** This attribute is obsolete and rarely implemented anyway. To achieve the same effect as the [`char`](#char) attribute, set the CSS {{CSSxRef("text-align")}} property to the same string you would specify for the `char` property, such as `text-align: "."`. + - : Specifies the alignment of the content to a character of each row cell. Typical values for this include a period (`.`) when attempting to align numbers or monetary values. If [`align`](#align) is not set to `char`, this attribute is ignored. - `charoff` {{deprecated_inline}} - - : A string indicating the number of characters on the tail end of the column's data should be displayed after the alignment character specified by the `char` attribute. For example, when displaying money values for currencies that use hundredths of a unit (such as the dollar, which is divided into 100 cents), you would typically specify a value of 2, so that in tandem with `char` being set to `"."`, the values in a column would be cleanly aligned on the decimal points, with the number of cents properly displayed to the right of the decimal point. - - > **Note:** This attribute is obsolete, and was never widely supported anyway. + - : Specifies the number of characters to offset the row cell content from the alignment character specified by the [`char`](#char) attribute. - `valign` {{deprecated_inline}} - - : A string specifying the vertical alignment of the text within each cell in the row. Possible values for this attribute are: + - : Specifies the vertical alignment of each row cell. The possible {{Glossary("enumerated")}} values are `baseline`, `bottom`, `middle`, and `top`. Use the {{cssxref("vertical-align")}} CSS property instead, as this attribute is deprecated. - - `baseline` - - : Aligns each cell's content text as closely as possible to the bottom of the cell, handling alignment of different fonts and font sizes by aligning the characters along the [baseline](https://en.wikipedia.org/wiki/Baseline) of the font(s) used in the row. If all the characters in the row are the same size, the effect is the same as `bottom`. - - `bottom`, - - : Draws the text in each of the row's cells as closely as possible to the bottom edge of those cells. - - `middle` - - : Each cell's text is vertically centered. - - `top` - - : Each cell's text is drawn as closely as possible to the top edge of the containing cell. +## Usage notes - > **Note:** Don't use the obsolete `valign` attribute. Instead, add the CSS {{CSSxRef("vertical-align")}} property to the row. +- The `` may be placed as a direct child of its parent {{HTMLElement("table")}} element, but only if the `` has no child {{HTMLElement("tbody")}} elements, and only after any {{HTMLElement("caption")}}, {{HTMLElement("colgroup")}}, and {{HTMLElement("thead")}} elements. Otherwise, the parent must be a {{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, or {{HTMLElement("tfoot")}} element. +- The CSS pseudo-classes {{cssxref(":nth-of-type")}}, {{cssxref(":first-of-type")}}, and {{cssxref(":last-of-type")}} are often useful for selecting the desired set of rows and their data and header cells ({{HTMLElement("td")}} and {{HTMLElement("th")}} elements). ## Examples -See {{HTMLElement("table")}} for examples on ``. +See {{HTMLElement("table")}} for a complete table example introducing common standards and best practices. -### Basic example +### Basic row setup -This simple example shows a table listing people's names along with various information about membership in a club or service. +This example demonstrates a table with four rows and three columns, where the first column contains headers for the row data cells. #### HTML -This HTML demonstrates the most basic structure of a table. There are no groups, no cells that span multiple rows or columns, no captions, and only the most basic styling to create lines around the components of the table for something resembling clarity. - -There are just four rows (including one header row), each with four columns (including one header column). Not even the table section elements are used; instead, the browser is allowed to determine this automatically. We'll add {{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, and {{HTMLElement("tfoot")}} in the next example. +Four `` elements are used to create four table rows. Each row contains three cells - one header cell ({{HTMLElement("th")}}) and two data cells ({{HTMLElement("td")}}) - creating three columns. The [`scope`](/en-US/docs/Web/HTML/Element/th#scope) attribute set on each header cell specifies which cells they relate to, which in this example is all data cells within the `row`. ```html
- - - - + + + - - - - + + + - - - - + + + - - - - + + +
NameIDMember SinceBalanceAAlfaAL fah
Margaret Nguyen4273110.00BBravoBRAH voh
Edvard Galinski53317537.00CCharlieCHAR lee
Hoshi Nakamura60194215.00DDeltaDELL tah
``` #### CSS -This simple CSS just adds a solid black border around the table and around each of its cells, including those specified using both {{HTMLElement("th")}} and {{HTMLElement("td")}}. That way, both header and data cells are easily demarcated. +The CSS {{cssxref(":nth-of-type")}} pseudo-class is used to select every `odd` row and set the {{cssxref("background-color")}} of those rows to a slightly darker tone, creating a so-called "zebra stripe" effect. This alternating background makes the rows of data in the table easier to parse and read—imagine having many rows and columns and trying to find some data in a particular row. In addition, the row header cells ({{HTMLElement("th")}} elements) are highlighted with a {{cssxref("background-color")}} to distinguish them from the data cells ({{HTMLElement("td")}} elements). ```css +tr:nth-of-type(odd) { + background-color: #eee; +} + +tr th[scope="row"] { + background-color: #d6ecd4; +} +``` + +```css hidden table { - border: 1px solid black; + 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 black; + border: 1px solid rgb(160 160 160); + padding: 8px 10px; } ``` #### Result -{{EmbedLiveSample("Basic_example", 500, 125)}} +{{EmbedLiveSample("Basic_row_setup", 650, 140)}} -### Row and column spanning +### Header row -Now, let's introduce another column that shows the date the user's membership ended, along with a super-heading above the "joined" and "canceled" dates called "Membership Dates". This involves adding both row and column spans to the table, so that the heading cells can wind up in the right places. - -#### Result - -Let's actually look at the output first this time: - -{{EmbedLiveSample("Row_and_column_spanning", 500, 150)}} - -Notice how the heading area here is actually two rows, one with "Name", "ID", "Membership Dates", and "Balance" headings, and the other with "Joined" and "Canceled", which are subheadings below "Membership Dates". This is accomplished by: - -- Having the first row's "Name", "ID", and "Balance" heading cells span two rows using the [`rowspan`](#rowspan) attribute, making them each two rows tall. -- Having the first row's "Membership Dates" heading cell span two columns using the [`colspan`](#colspan) attribute, which causes this heading actually to be two columns wide. -- Having a second row of {{HTMLElement("th")}} elements that contains only the "Joined" and "Canceled" headings. Because the other columns are already occupied by first-row cells that span into the second row, these wind up correctly positioned under the "Membership Dates" heading. +This example extends the basic table from the [previous example](#basic_row_setup) by adding a header row as the first row of the table. #### HTML -The HTML is similar to the previous example's, except for the addition of the new column in each data row, and the changes to the header. Those changes make the HTML look like this: +An additional table row (``) is added as the first row of the table with column header cells ({{HTMLElement("th")}}) providing a header for each column. We put this row in a {{HTMLElement("thead")}} grouping element to indicate this is the header of the table. The [`scope`](/en-US/docs/Web/HTML/Element/th#scope) attribute is added to each header cell (``) within this head row to explicitly specify that each header cell relates to all the cells within its own column, even though those cells are in the {{HTMLElement("tbody")}}. ```html - - - - + + + - - + + + - - - - - + + + - - - - - + + + - - - - - + + +
NameIDMembership DatesBalanceSymbolCode wordPronunciation
JoinedCanceledAAlfaAL fah
Margaret Nguyen427311n/a0.00BBravoBRAH voh
Edvard Galinski53317537.00CCharlieCHAR lee
Hoshi Nakamura601942n/a15.00DDeltaDELL tah
``` -The differences that matter here—for the purposes of discussing row and column spans—are in the first few lines of the code above. Note the use of `rowspan` on to make the "Name", "ID", and "Balance" headers occupy two rows instead of just one, and the use of `colspan` to make the "Membership Dates" header cell span across two columns. +#### CSS -The CSS is unchanged from before. +The CSS is nearly unchanged from the [previous example](#basic_row_setup), except for some additional styling to highlight the "header row" so that the headers of the columns stand out from the other cells. -```css hidden -table { - border: 1px solid black; +```css +tr:nth-of-type(odd) { + background-color: #eee; } -th, -td { - border: 1px solid black; +tr th[scope="col"] { + background-color: #505050; + color: #fff; } -``` - -### Explicitly specifying table content groups - -Before really getting into styling this table, let's take a moment to add row and column groups to help make our CSS easier. - -#### HTML -The HTML is where the action is here, and the action is pretty simple. - -```html - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameIDMembership DatesBalance
JoinedCanceled
Margaret Nguyen427311n/a0.00
Edvard Galinski53317537.00
Hoshi Nakamura601942n/a15.00
+tr th[scope="row"] { + background-color: #d6ecd4; +} ``` -The differences that matter here—for the purposes of discussing row and column spans—are in the first few lines of the code above. Note the use of `rowspan` on to make the "Name", "ID", and "Balance" headers occupy two rows instead of just one, and the use of `colspan` to make the "Membership Dates" header cell span across two columns. - -Once again, we haven't touched the CSS. - ```css hidden table { - border: 1px solid black; + 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 black; + border: 1px solid rgb(160 160 160); + padding: 8px 10px; } ``` #### Result -The output is entirely unchanged, despite the addition of useful contextual information under the hood: - -{{EmbedLiveSample("Explicitly_specifying_table_content_groups", 500, 150)}} - -### Basic styling - -As is the case with all parts of a table, you can change the appearance of a table row and its contents using CSS. Any styles applied to the `` element will affect the cells within the row unless overridden by styles applied to those cells. +{{EmbedLiveSample("Header_row", 650, 170)}} -Let's apply a basic style to the table to adjust the typeface being used, and add a background color to the header row. +### Sorting rows -#### Result +There are no native methods for sorting the rows (`` elements) of a {{HTMLElement("table")}}. But using {{jsxref("Array.prototype.sort()")}}, {{domxref("Node.removeChild")}}, and {{domxref("Node.appendChild")}}, a custom `sort()` function can be implemented in JavaScript to sort an {{domxref("HTMLCollection")}} of `` elements. -Again, let's take a look at the result first. +#### HTML -{{EmbedLiveSample("Basic_styling", 500, 200)}} +A {{HTMLElement("tbody")}} element is used in this basic table to mark the body section of the table and to include three rows ({{HTMLElement("tr")}} elements) with data ({{HTMLElement("td")}} elements), creating one column with numbers in descending order. -```html hidden +```html - - - - - - - - - - - - - - - - - + - - - - - + - - - - - +
NameIDMembership DatesBalance
JoinedCanceled
Margaret Nguyen427311n/a0.003
Edvard Galinski53317537.002
Hoshi Nakamura601942n/a15.001
``` -#### CSS +#### JavaScript -This time, the HTML is unchanged, so let's dive right into the CSS. +In the JavaScript code below, the created `sort()` function is attached to the {{HTMLElement("tbody")}} element so that it sorts the table cells in order of increasing value and updates the display accordingly. -```css -table { - border: 1px solid black; - font: - 16px "Open Sans", - Helvetica, - Arial, - sans-serif; -} +```js +HTMLTableSectionElement.prototype.sort = function (cb) { + Array.from(this.rows) + .sort(cb) + .forEach((e) => this.appendChild(this.removeChild(e))); +}; -thead > tr { - background-color: rgb(228 240 245); +document + .querySelector("table") + .tBodies[0].sort((a, b) => a.textContent.localeCompare(b.textContent)); +``` + +```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 black; - padding: 4px 6px; + border: 1px solid rgb(160 160 160); + padding: 4px 8px; } ``` -While we add a {{CSSxRef("font")}} property to the {{HTMLElement("table")}} element here to set a more visually-appealing typeface (or an abominable sans-serif typeface, depending on your personal opinion), the interesting part is the second style here, where we style `` elements located within the {{HTMLElement("thead")}} so they have a light blue background color. This is a way to quickly apply a background color to all the cells in the heading area at once. - -This does _not_ affect the style of the {{HTMLElement("th")}} elements in the first column, though, where we treat the member names as a row heading. - -### Advanced styling +#### Result -Now we'll go all-out, with styles on rows in the header and body areas both, including alternating row colors, cells with different colors depending on position within a row, and so forth. +{{EmbedLiveSample('Sorting_rows', '650', '80')}} -#### Result +### Sorting rows with a click on header cells -Here's what the final table will look like: +This example extends the basic table from the [previous example](#sorting_rows) by making the sorting interactive and independent for multiple columns. -{{EmbedLiveSample("Advanced_styling", 500, 200)}} +#### HTML -There is no change to the HTML again. See what proper preparation of your HTML can do for you? +An additional data cell ({{HTMLElement("td")}} element) is added to each row (`` element) within the table body ({{HTMLElement("tbody")}} element) to create a second column with letters in ascending order. Using the {{HTMLElement("thead")}} element, a head section is added before the body section to introduce a head row with table header cells ({{HTMLElement("th")}} element). These header cells are used in the JavaScript code below to make them clickable and then to perform the corresponding sorting when activated per click. -```html hidden +```html - - - - - - - - + + - - - - - + + - - - - - + + - - - - - + +
NameIDMembership DatesBalance
JoinedCanceledNumbersLetters
Margaret Nguyen427311n/a0.003A
Edvard Galinski53317537.002B
Hoshi Nakamura601942n/a15.001C
``` -#### CSS - -The CSS is much more involved this time. It's not complicated, but there's a lot going on. Let's break it down. - -##### The table and base styles - -```css -table { - border: 1px solid black; - font: - 16px "Open Sans", - Helvetica, - Arial, - sans-serif; - border-spacing: 0; - border-collapse: collapse; -} -``` - -Here we've added the {{CSSxRef("border-spacing")}} and {{CSSxRef("border-collapse")}} properties to eliminate spacing between cells and collapse borders that touch one another to be a single border instead of winding up with double borders. +#### JavaScript -```css -th, -td { - border: 1px solid black; - padding: 4px 6px; -} +A click event handler is added to each table header ({{HTMLElement("th")}} element) of each {{HTMLElement("table")}} in the {{domxref("HTMLDocument", "document")}}; it sorts all the rows (`` elements) of the {{HTMLElement("tbody")}} based on the contents of the data cells ({{HTMLElement("td")}} elements) contained in the rows. -th { - vertical-align: bottom; -} -``` +> **Note:** This solution assumes that the {{HTMLElement("td")}} elements are populated by raw text with no descendant elements. -And here are the default styles for all table cells. Now let's customize! +```js +const allTables = document.querySelectorAll("table"); -##### The top header: overall +for (const table of allTables) { + const tBody = table.tBodies[0]; + const rows = Array.from(tBody.rows); + const headerCells = table.tHead.rows[0].cells; -We're going to look at the top header in two pieces. First, the overall styling of the header: + for (const th of headerCells) { + const cellIndex = th.cellIndex; -```css -thead > tr { - background-color: rgb(228 240 245); -} + th.addEventListener("click", () => { + rows.sort((tr1, tr2) => { + const tr1Text = tr1.cells[cellIndex].textContent; + const tr2Text = tr2.cells[cellIndex].textContent; + return tr1Text.localeCompare(tr2Text); + }); -thead > tr:nth-of-type(2) { - border-bottom: 2px solid black; + tBody.append(...rows); + }); + } } ``` -This sets the background color of all `` elements in the table's heading (as specified using {{HTMLElement("thead")}}). Then we set the bottom border of the top header to be a two-pixel wide line. Notice, however, that we're using the {{CSSxRef(":nth-of-type")}} selector to apply {{CSSxRef("border-bottom")}} to the _second_ row in the heading. Why? Because the heading is made of two rows that are spanned by some of the cells. That means there are actually two rows there; applying the style to the first row would not give us the expected result. - -##### The "Joined" and "Canceled" headers - -Let's style these two header cells with green and red hues to represent the "good" of a new member and the "bummer" of a canceled membership. - -```css -thead > tr:last-of-type > th:nth-of-type(1) { - background-color: rgb(225 255 225); -} - -thead > tr:last-of-type > th:nth-of-type(2) { - background-color: rgb(255 225 225); +```css hidden +table { + border-collapse: collapse; + border: 2px solid rgb(140 140 140); + font-family: sans-serif; + font-size: 0.8rem; + letter-spacing: 1px; } -``` - -Here we dig into the last row of the table's header block and give the first header cell in it (the "Joined" header) a greenish color, and the second header cell in it (the "Canceled" header) a reddish hue. - -##### Color every body other row differently -It's common to help improve readability of table data by alternating row colors. Let's add a bit of color to every even row: - -```css -tbody > tr:nth-of-type(even) { - background-color: rgb(237 238 242); +th, +td { + border: 1px solid rgb(160 160 160); + padding: 4px 8px; } -``` - -##### Give the left-side header some style -Since we want the first column to stand out as well, we'll add some custom styling here, too. - -```css -tbody > tr > th:first-of-type { - text-align: left; - background-color: rgb(225 229 244); +th { + background-color: #505050; + color: #fff; + cursor: pointer; } ``` -This styles the first header cell in each row of the table's body with {{CSSxRef("text-align")}} to left-justify the member names, and with a somewhat different background color. - -##### Justify the balances - -Finally, since it's standard practice to right-justify currency values in tables, let's do that here. +#### Result -```css -tbody > tr > td:last-of-type { - text-align: right; -} -``` +{{EmbedLiveSample('Sorting_rows_with_a_click_on_header_cells', '650', '100')}} -This just sets the CSS {{CSSxRef("text-align")}} property for the last {{HTMLElement("td")}} in each body row to `"right"`. +> **Note:** To be usable and accessible, the header cell of each sortable column must be identifiable as a sorting button and each must define whether the column is currently sorted in ascending or descending order visually and with the [`aria-sort`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-sort) attribute. See the [ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/)'s [sortable table example](https://www.w3.org/WAI/ARIA/apg/patterns/table/examples/sortable-table/) for more information. +> **Note:** To be usable and accessible, the header cell of each sortable column must be identifiable as a sorting button and each must define whether the column is currently sorted in ascending or descending order visually and with the [`aria-sort`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-sort) attribute. See the [ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/)'s [sortable table example](https://www.w3.org/WAI/ARIA/apg/patterns/table/examples/sortable-table/) for more information. ## Technical summary @@ -531,7 +362,7 @@ This just sets the CSS {{CSSxRef("text-align")}} property for the last {{HTMLEle {{HTMLElement("th")}} elements; {{Glossary("script-supporting element", "script-supporting elements")}} ({{HTMLElement("script")}} and - {{HTMLElement("template")}}) are also allowed + {{HTMLElement("template")}}) are also allowed. @@ -542,7 +373,7 @@ This just sets the CSS {{CSSxRef("text-align")}} property for the last {{HTMLEle {{HTMLElement("tr")}} element, or if the row is the last element in its parent table group ({{HTMLElement("thead")}}, {{HTMLElement("tbody")}} or {{HTMLElement("tfoot")}}) - element + element. @@ -553,8 +384,8 @@ This just sets the CSS {{CSSxRef("text-align")}} property for the last {{HTMLEle {{HTMLElement("caption")}}, {{HTMLElement("colgroup")}}, and {{HTMLElement("thead")}} elements); otherwise, the parent must - be {{HTMLElement("thead")}}, {{HTMLElement("tbody")}} or - {{HTMLElement("tfoot")}} + be a {{HTMLElement("thead")}}, {{HTMLElement("tbody")}} or + {{HTMLElement("tfoot")}} element. @@ -588,8 +419,10 @@ This just sets the CSS {{CSSxRef("text-align")}} property for the last {{HTMLEle ## See also -- [Learning area: HTML tables](/en-US/docs/Learn/HTML/Tables): An introduction to using tables, including ``. -- {{DOMxRef("HTMLTableRowElement")}}: the interface on which `` is based. -- Other table-related elements: - - - {{HTMLElement("table")}}, {{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("td")}}, {{HTMLElement("th")}}, {{HTMLElement("caption")}}, {{HTMLElement("col")}}, and {{HTMLElement("colgroup")}} +- [Learn: HTML tables](/en-US/docs/Learn/HTML/Tables) +- {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}: Other table-related elements +- {{cssxref("background-color")}}: CSS property to set the background color of each row cell +- {{cssxref("border")}}: CSS property to control borders of row cells +- {{cssxref("text-align")}}: CSS property to horizontally align each row cell content +- {{cssxref("vertical-align")}}: CSS property to vertically align each row cell content +- {{cssxref(":nth-of-type")}}, {{cssxref(":first-of-type")}}, {{cssxref(":last-of-type")}}: CSS pseudo-classes to select the desired row cells