diff options
| author | Craig Jennings <c@cjennings.net> | 2024-04-07 13:41:34 -0500 |
|---|---|---|
| committer | Craig Jennings <c@cjennings.net> | 2024-04-07 13:41:34 -0500 |
| commit | 754bbf7a25a8dda49b5d08ef0d0443bbf5af0e36 (patch) | |
| tree | f1190704f78f04a2b0b4c977d20fe96a828377f1 /devdocs/html/element%2Ftr.html | |
new repository
Diffstat (limited to 'devdocs/html/element%2Ftr.html')
| -rw-r--r-- | devdocs/html/element%2Ftr.html | 400 |
1 files changed, 400 insertions, 0 deletions
diff --git a/devdocs/html/element%2Ftr.html b/devdocs/html/element%2Ftr.html new file mode 100644 index 00000000..b11d6657 --- /dev/null +++ b/devdocs/html/element%2Ftr.html @@ -0,0 +1,400 @@ +<header><h1><tr>: The Table Row element</h1></header><div class="section-content"><p>The <code><tr></code> <a href="../index">HTML</a> element defines a row of cells in a table. The row's cells can then be established using a mix of <a href="td"><code><td></code></a> (data cell) and <a href="th"><code><th></code></a> (header cell) elements.</p></div> +<h2 id="try_it">Try it</h2> +<div class="section-content"> +<iframe class="interactive is-tabbed-taller-height" height="200" src="https://interactive-examples.mdn.mozilla.net/pages/tabbed/tr.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>To provide additional control over how cells fit into (or span across) columns, both <code><th></code> and <code><td></code> support the <a href="td#colspan"><code>colspan</code></a> attribute, which lets you specify how many columns wide the cell should be, with the default being 1. Similarly, you can use the <a href="td#rowspan"><code>rowspan</code></a> attribute on cells to indicate they should span more than one table row.</p> <p>This can take a little practice to get right when building your tables. We have some <a href="#examples">examples</a> below, but for more examples and an in-depth tutorial, see the <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables">HTML tables</a> series in our <a href="https://developer.mozilla.org/en-US/docs/Learn">Learn web development</a> 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.</p> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"><p>This element includes the <a href="../global_attributes">global attributes</a>. There are also several <a href="#deprecated_attributes">deprecated attributes</a>, which you should avoid but may need to know when reading older code.</p></div> +<h3 id="deprecated_attributes">Deprecated attributes</h3> +<div class="section-content"> +<p>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.</p> <dl> <dt id="align"> +<a href="#align"><code>align</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>A string which specifies how the cell's context should be aligned horizontally within the cells in the row; this is shorthand for using <code>align</code> on every cell in the row individually. Possible values are:</p> <dl> <dt id="left"><a href="#left"><code>left</code></a></dt> <dd> <p>Align the content of each cell at its left edge.</p> </dd> <dt id="center"><a href="#center"><code>center</code></a></dt> <dd> <p>Center the contents of each cell between their left and right edges.</p> </dd> <dt id="right"><a href="#right"><code>right</code></a></dt> <dd> <p>Align the content of each cell at its right edge.</p> </dd> <dt id="justify"><a href="#justify"><code>justify</code></a></dt> <dd> <p>Widen whitespaces within the text of each cell so that the text fills the full width of each cell (full justification).</p> </dd> <dt id="char"><a href="#char"><code>char</code></a></dt> <dd> <p>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 <a href="#char"><code>char</code></a> and <a href="#charoff"><code>charoff</code></a> 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.</p> </dd> </dl> <p>If no value is expressly set for <code>align</code>, the parent node's value is inherited.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> Instead of using the obsolete <code>align</code> attribute, you should instead use the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-align"><code>text-align</code></a> property to establish <code>left</code>, <code>center</code>, <code>right</code>, or <code>justify</code> alignment for the row's cells. To apply character-based alignment, set the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-align"><code>text-align</code></a> property to the alignment character (such as <code>"."</code> or <code>","</code>).</p> </div> </dd> <dt id="bgcolor"> +<a href="#bgcolor"><code>bgcolor</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>A string specifying a color to apply to the backgrounds of each of the row's cells. This can be either a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb">hexadecimal <code>#RRGGBB</code> or <code>#RGB</code> value</a> or a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/named-color">color keyword</a>. Omitting the attribute or setting it to <code>null</code> in JavaScript causes the row's cells to inherit the row's parent element's background color.</p> <div class="notecard note" id="sect2"> <p><strong>Note:</strong> The <a href="tr" aria-current="page"><code><tr></code></a> element should be styled using <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a>. To give a similar effect as the <code>bgcolor</code> attribute, use the CSS property <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-color"><code>background-color</code></a>.</p> </div> </dd> <dt id="char_2"> +<a href="#char_2"><code>char</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>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 (<code>"."</code>) or comma (<code>","</code>) when attempting to align numbers or monetary values. If <a href="#align"><code>align</code></a> is not set to <code>char</code>, this attribute is ignored.</p> <div class="notecard note" id="sect3"> <p><strong>Note:</strong> This attribute is obsolete and rarely implemented anyway. To achieve the same effect as the <a href="#char"><code>char</code></a> attribute, set the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-align"><code>text-align</code></a> property to the same string you would specify for the <code>char</code> property, such as <code>text-align: "."</code>.</p> </div> </dd> <dt id="charoff"> +<a href="#charoff"><code>charoff</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>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 <code>char</code> 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 <code>char</code> being set to <code>"."</code>, 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.</p> <div class="notecard note" id="sect4"> <p><strong>Note:</strong> This attribute is obsolete, and was never widely supported anyway.</p> </div> </dd> <dt id="valign"> +<a href="#valign"><code>valign</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>A string specifying the vertical alignment of the text within each cell in the row. Possible values for this attribute are:</p> <dl> <dt id="baseline"><a href="#baseline"><code>baseline</code></a></dt> <dd> <p>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 <a href="https://en.wikipedia.org/wiki/Baseline" target="_blank">baseline</a> 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 <code>bottom</code>.</p> </dd> <dt id="bottom"> +<a href="#bottom"><code>bottom</code></a>,</dt> <dd> <p>Draws the text in each of the row's cells as closely as possible to the bottom edge of those cells.</p> </dd> <dt id="middle"><a href="#middle"><code>middle</code></a></dt> <dd> <p>Each cell's text is vertically centered.</p> </dd> <dt id="top"><a href="#top"><code>top</code></a></dt> <dd> <p>Each cell's text is drawn as closely as possible to the top edge of the containing cell.</p> </dd> </dl> <div class="notecard note" id="sect5"> <p><strong>Note:</strong> Don't use the obsolete <code>valign</code> attribute. Instead, add the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align"><code>vertical-align</code></a> property to the row.</p> </div> </dd> </dl> +</div> +<h2 id="examples">Examples</h2> +<div class="section-content"><p>See <a href="table"><code><table></code></a> for examples on <code><tr></code>.</p></div> +<h3 id="basic_example">Basic example</h3> +<div class="section-content"> +<p>This simple example shows a table listing people's names along with various information about membership in a club or service.</p> <h4 id="html">HTML</h4> <p>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.</p> <p>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 <a href="thead"><code><thead></code></a>, <a href="tbody"><code><tbody></code></a>, and <a href="tfoot"><code><tfoot></code></a> in the next example.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="3Afj7r6qGe5iU8/P6Eq3Jwo5st8FPk+I8FsGLl7Lqv0=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Name<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>ID<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Member Since<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Balance<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Margaret Nguyen<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>427311<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span> <span class="token attr-name">datetime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2010-06-03<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>June 3, 2010<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>0.00<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Edvard Galinski<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>533175<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span> <span class="token attr-name">datetime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2011-01-13<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>January 13, 2011<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>37.00<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Hoshi Nakamura<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>601942<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span> <span class="token attr-name">datetime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2012-07-23<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>July 23, 2012<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>15.00<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="css">CSS</h4> <p>This simple CSS just adds a solid black border around the table and around each of its cells, including those specified using both <a href="th"><code><th></code></a> and <a href="td"><code><td></code></a>. That way, both header and data cells are easily demarcated.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="IITeMLg5/z2gSdD+rFXdUWDdIw9IMkSEL4A5cuMtLnU=" data-language="css"><span class="token selector">table</span> <span class="token punctuation">{</span> + <span class="token property">border</span><span class="token punctuation">:</span> 1px solid black<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">th, +td</span> <span class="token punctuation">{</span> + <span class="token property">border</span><span class="token punctuation">:</span> 1px solid black<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <h4 id="result">Result</h4> +<div class="code-example" id="sect6"> + +<iframe class="sample-code-frame" title="Basic example sample" id="frame_basic_example" width="500" height="125" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/tr/runner.html?id=basic_example" loading="lazy"></iframe> +</div> +</div> +<h3 id="row_and_column_spanning">Row and column spanning</h3> +<div class="section-content"> +<p>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.</p> <h4 id="result_2">Result</h4> <p>Let's actually look at the output first this time:</p> +<div class="code-example" id="sect7"> + +<iframe class="sample-code-frame" title="Row and column spanning sample" id="frame_row_and_column_spanning" width="500" height="150" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/tr/runner.html?id=row_and_column_spanning" loading="lazy"></iframe> +</div> <p>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:</p> <ul> <li>Having the first row's "Name", "ID", and "Balance" heading cells span two rows using the <a href="#rowspan"><code>rowspan</code></a> attribute, making them each two rows tall.</li> <li>Having the first row's "Membership Dates" heading cell span two columns using the <a href="#colspan"><code>colspan</code></a> attribute, which causes this heading actually to be two columns wide.</li> <li>Having a second row of <a href="th"><code><th></code></a> 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.</li> </ul> <h4 id="html_2">HTML</h4> <p>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:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="0prajK1yjn7B4ErKfVL7Gh/WRPHCxhcLiwM1BEO/QIo=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span> <span class="token attr-name">rowspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Name<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span> <span class="token attr-name">rowspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>ID<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span> <span class="token attr-name">colspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Membership Dates<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span> <span class="token attr-name">rowspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Balance<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Joined<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Canceled<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Margaret Nguyen<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>427311<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span> <span class="token attr-name">datetime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2010-06-03<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>June 3, 2010<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>n/a<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>0.00<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Edvard Galinski<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>533175<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span> <span class="token attr-name">datetime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2011-01-13<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>January 13, 2011<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span> <span class="token attr-name">datetime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2017-04-08<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>April 8, 2017<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>37.00<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Hoshi Nakamura<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>601942<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span> <span class="token attr-name">datetime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2012-07-23<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>July 23, 2012<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>n/a<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>15.00<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span> +</pre> +</div> <p>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 <code>rowspan</code> on to make the "Name", "ID", and "Balance" headers occupy two rows instead of just one, and the use of <code>colspan</code> to make the "Membership Dates" header cell span across two columns.</p> <p>The CSS is unchanged from before.</p> +</div> +<h3 id="explicitly_specifying_table_content_groups">Explicitly specifying table content groups</h3> +<div class="section-content"> +<p>Before really getting into styling this table, let's take a moment to add row and column groups to help make our CSS easier.</p> <h4 id="html_3">HTML</h4> <p>The HTML is where the action is here, and the action is pretty simple.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="JB/lSbWn11ZcgvTfGmeNOEmxy37V4ocGPtljCFOqgmw=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>thead</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span> <span class="token attr-name">rowspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Name<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span> <span class="token attr-name">rowspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>ID<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span> <span class="token attr-name">colspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Membership Dates<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span> <span class="token attr-name">rowspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Balance<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Joined<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Canceled<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>thead</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tbody</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>row<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Margaret Nguyen<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>427311<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span> <span class="token attr-name">datetime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2010-06-03<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>June 3, 2010<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>n/a<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>0.00<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>row<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Edvard Galinski<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>533175<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span> <span class="token attr-name">datetime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2011-01-13<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>January 13, 2011<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span> <span class="token attr-name">datetime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2017-04-08<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>April 8, 2017<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>37.00<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>row<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Hoshi Nakamura<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>601942<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span> <span class="token attr-name">datetime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2012-07-23<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>July 23, 2012<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>n/a<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>15.00<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tbody</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span> +</pre> +</div> <p>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 <code>rowspan</code> on to make the "Name", "ID", and "Balance" headers occupy two rows instead of just one, and the use of <code>colspan</code> to make the "Membership Dates" header cell span across two columns.</p> <p>Once again, we haven't touched the CSS.</p> <h4 id="result_3">Result</h4> <p>The output is entirely unchanged, despite the addition of useful contextual information under the hood:</p> +<div class="code-example" id="sect8"> + +<iframe class="sample-code-frame" title="Explicitly specifying table content groups sample" id="frame_explicitly_specifying_table_content_groups" width="500" height="150" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/tr/runner.html?id=explicitly_specifying_table_content_groups" loading="lazy"></iframe> +</div> +</div> +<h3 id="basic_styling">Basic styling</h3> +<div class="section-content"> +<p>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 <code><tr></code> element will affect the cells within the row unless overridden by styles applied to those cells.</p> <p>Let's apply a basic style to the table to adjust the typeface being used, and add a background color to the header row.</p> <h4 id="result_4">Result</h4> <p>Again, let's take a look at the result first.</p> +<div class="code-example" id="sect9"> + +<iframe class="sample-code-frame" title="Basic styling sample" id="frame_basic_styling" width="500" height="200" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/tr/runner.html?id=basic_styling" loading="lazy"></iframe> +</div> <h4 id="css_2">CSS</h4> <p>This time, the HTML is unchanged, so let's dive right into the CSS.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="r0fq3NeaOFsHU/r5HWkpia2cJ7f46aV1sFK71XFyc4o=" data-language="css"><span class="token selector">table</span> <span class="token punctuation">{</span> + <span class="token property">border</span><span class="token punctuation">:</span> 1px solid black<span class="token punctuation">;</span> + <span class="token property">font</span><span class="token punctuation">:</span> + 16px <span class="token string">"Open Sans"</span><span class="token punctuation">,</span> + Helvetica<span class="token punctuation">,</span> + Arial<span class="token punctuation">,</span> + sans-serif<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">thead > tr</span> <span class="token punctuation">{</span> + <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>228<span class="token punctuation">,</span> 240<span class="token punctuation">,</span> 245<span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">th, +td</span> <span class="token punctuation">{</span> + <span class="token property">border</span><span class="token punctuation">:</span> 1px solid black<span class="token punctuation">;</span> + <span class="token property">padding</span><span class="token punctuation">:</span> 4px 6px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <p>While we add a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font"><code>font</code></a> property to the <a href="table"><code><table></code></a> 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 <code><tr></code> elements located within the <a href="thead"><code><thead></code></a> 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.</p> <p>This does <em>not</em> affect the style of the <a href="th"><code><th></code></a> elements in the first column, though, where we treat the member names as a row heading.</p> +</div> +<h3 id="advanced_styling">Advanced styling</h3> +<div class="section-content"> +<p>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.</p> <h4 id="result_5">Result</h4> <p>Here's what the final table will look like:</p> +<div class="code-example" id="sect10"> + +<iframe class="sample-code-frame" title="Advanced styling sample" id="frame_advanced_styling" width="500" height="200" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/tr/runner.html?id=advanced_styling" loading="lazy"></iframe> +</div> <p>There is no change to the HTML again. See what proper preparation of your HTML can do for you?</p> <h4 id="css_3">CSS</h4> <p>The CSS is much more involved this time. It's not complicated, but there's a lot going on. Let's break it down.</p> <h5 id="the_table_and_base_styles">The table and base styles</h5> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="uGpF3ajLVpDbkn0b95KAjEqbl1qDYixsMTiHWFOcF/w=" data-language="css"><span class="token selector">table</span> <span class="token punctuation">{</span> + <span class="token property">border</span><span class="token punctuation">:</span> 1px solid black<span class="token punctuation">;</span> + <span class="token property">font</span><span class="token punctuation">:</span> + 16px <span class="token string">"Open Sans"</span><span class="token punctuation">,</span> + Helvetica<span class="token punctuation">,</span> + Arial<span class="token punctuation">,</span> + sans-serif<span class="token punctuation">;</span> + <span class="token property">border-spacing</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> + <span class="token property">border-collapse</span><span class="token punctuation">:</span> collapse<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <p>Here we've added the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing"><code>border-spacing</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse"><code>border-collapse</code></a> 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.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="b6qgK3xcRPap10B90qpXf9Rh6N0Epvt4Hnq7wKZS+5M=" data-language="css"><span class="token selector">th, +td</span> <span class="token punctuation">{</span> + <span class="token property">border</span><span class="token punctuation">:</span> 1px solid black<span class="token punctuation">;</span> + <span class="token property">padding</span><span class="token punctuation">:</span> 4px 6px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">th</span> <span class="token punctuation">{</span> + <span class="token property">vertical-align</span><span class="token punctuation">:</span> bottom<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <p>And here are the default styles for all table cells. Now let's customize!</p> <h5 id="the_top_header_overall">The top header: overall</h5> <p>We're going to look at the top header in two pieces. First, the overall styling of the header:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="XY/fBaruetVRhoVJT4fG2dSdfwiDcKGSjNDc3egIeZo=" data-language="css"><span class="token selector">thead > tr</span> <span class="token punctuation">{</span> + <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>228<span class="token punctuation">,</span> 240<span class="token punctuation">,</span> 245<span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">thead > tr:nth-of-type(2)</span> <span class="token punctuation">{</span> + <span class="token property">border-bottom</span><span class="token punctuation">:</span> 2px solid black<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <p>This sets the background color of all <code><tr></code> elements in the table's heading (as specified using <a href="thead"><code><thead></code></a>). Then we set the bottom border of the top header to be a two-pixel wide line. Notice, however, that we're using the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type"><code>:nth-of-type</code></a> selector to apply <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom"><code>border-bottom</code></a> to the <em>second</em> 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.</p> <h5 id="the_joined_and_canceled_headers">The "Joined" and "Canceled" headers</h5> <p>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.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="duELoMZ+xYnZXHAIugE2a3DUVujMu2TUnsMVayv9uRQ=" data-language="css"><span class="token selector">thead > tr:last-of-type > th:nth-of-type(1)</span> <span class="token punctuation">{</span> + <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>225<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 225<span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">thead > tr:last-of-type > th:nth-of-type(2)</span> <span class="token punctuation">{</span> + <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 225<span class="token punctuation">,</span> 225<span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <p>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.</p> <h5 id="color_every_body_other_row_differently">Color every body other row differently</h5> <p>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:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="gt58vDxeuAKnbn9plpG/8JLJWtDV+KOr0vhH4j1KcFk=" data-language="css"><span class="token selector">tbody > tr:nth-of-type(even)</span> <span class="token punctuation">{</span> + <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>237<span class="token punctuation">,</span> 238<span class="token punctuation">,</span> 242<span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <h5 id="give_the_left-side_header_some_style">Give the left-side header some style</h5> <p>Since we want the first column to stand out as well, we'll add some custom styling here, too.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="Vc2Hl/9EWVeYHdAc1CwGdvpUJGKbq7t92Jff6wMPl5Q=" data-language="css"><span class="token selector">tbody > tr > th:first-of-type</span> <span class="token punctuation">{</span> + <span class="token property">text-align</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span> + <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>225<span class="token punctuation">,</span> 229<span class="token punctuation">,</span> 244<span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <p>This styles the first header cell in each row of the table's body with <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-align"><code>text-align</code></a> to left-justify the member names, and with a somewhat different background color.</p> <h5 id="justify_the_balances">Justify the balances</h5> <p>Finally, since it's standard practice to right-justify currency values in tables, let's do that here.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="iORYTGQpDKN79fQc13AlDkMMfA3jAIjxmyLaTKnZIEU=" data-language="css"><span class="token selector">tbody > tr > td:last-of-type</span> <span class="token punctuation">{</span> + <span class="token property">text-align</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <p>This just sets the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-align"><code>text-align</code></a> property for the last <a href="td"><code><td></code></a> in each body row to <code>"right"</code>.</p> +</div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td>None</td> </tr> <tr> <th scope="row">Permitted content</th> <td> Zero or more <a href="td"><code><td></code></a> and/or <a href="th"><code><th></code></a> elements; <a href="https://developer.mozilla.org/en-US/docs/Glossary/Script-supporting_element">script-supporting elements</a> (<a href="script"><code><script></code></a> and <a href="template"><code><template></code></a>) are also allowed </td> </tr> <tr> <th scope="row">Tag omission</th> <td> Start tag is mandatory. End tag may be omitted if the <a href="tr" aria-current="page"><code><tr></code></a> element is immediately followed by a <a href="tr" aria-current="page"><code><tr></code></a> element, or if the row is the last element in its parent table group (<a href="thead"><code><thead></code></a>, <a href="tbody"><code><tbody></code></a> or <a href="tfoot"><code><tfoot></code></a>) element </td> </tr> <tr> <th scope="row">Permitted parents</th> <td> <a href="table"><code><table></code></a> (only if the table has no child <a href="tbody"><code><tbody></code></a> element, and even then only after any <a href="caption"><code><caption></code></a>, <a href="colgroup"><code><colgroup></code></a>, and <a href="thead"><code><thead></code></a> elements); otherwise, the parent must be <a href="thead"><code><thead></code></a>, <a href="tbody"><code><tbody></code></a> or <a href="tfoot"><code><tfoot></code></a> </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/row_role">row</a></code></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>Any</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableRowElement"><code>HTMLTableRowElement</code></a></td> </tr> </tbody> </table></div></figure></div> +<h2 id="specifications">Specifications</h2> +<div class="_table"><table class="standard-table"> +<thead><tr><th scope="col">Specification</th></tr></thead> +<tbody><tr><td><a href="https://html.spec.whatwg.org/multipage/tables.html#the-tr-element">HTML Standard <br><small># the-tr-element</small></a></td></tr></tbody> +</table></div> +<h2 id="browser_compatibility">Browser compatibility</h2> +<div class="_table"><table> +<thead> +<tr id="bct-browser-type"> +<th></th> +<th colspan="6">Desktop</th> +<th colspan="6">Mobile</th> +</tr> +<tr id="bct-browsers"> +<th></th> +<th>Chrome</th> +<th>Edge</th> +<th>Firefox</th> +<th>Internet Explorer</th> +<th>Opera</th> +<th>Safari</th> +<th>WebView Android</th> +<th>Chrome Android</th> +<th>Firefox for Android</th> +<th>Opera Android</th> +<th>Safari on IOS</th> +<th>Samsung Internet</th> +</tr> +</thead> +<tbody> +<tr> +<th><code>tr</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>align</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>bgcolor</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">≤15</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">≤14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>char</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">≤4</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>charoff</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">≤4</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>valign</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +</tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li> +<a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables">Learning area: HTML tables</a>: An introduction to using tables, including <code><tr></code>.</li> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableRowElement"><code>HTMLTableRowElement</code></a>: the interface on which <code><tr></code> is based.</li> <li>Other table-related elements: <ul> <li> +<a href="table"><code><table></code></a>, <a href="thead"><code><thead></code></a>, <a href="tbody"><code><tbody></code></a>, <a href="tfoot"><code><tfoot></code></a>, <a href="td"><code><td></code></a>, <a href="th"><code><th></code></a>, <a href="caption"><code><caption></code></a>, <a href="col"><code><col></code></a>, and <a href="colgroup"><code><colgroup></code></a> +</li> </ul> </li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–2023 MDN contributors.<br>Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.<br> + <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr</a> + </p> +</div> |