pub struct Th;Expand description
The <th> element - defines a header cell in a table.
§Purpose
The <th> element represents a header cell in a table. It labels a row or column of data
cells, providing context for the information in the table. Header cells are typically
rendered with bold, centered text by default and are crucial for table accessibility.
§Content Categories
- None (only valid within
<tr>)
§Permitted Content Model
- Flow content (excluding header, footer, sectioning content, and heading content)
§Common Use Cases
- Labeling table columns
- Labeling table rows
- Creating multi-level headers with rowspan/colspan
- Providing context for data cells
- Improving table accessibility for screen readers
§Key Attributes
scope: Specifies cells the header relates to (“row”, “col”, “rowgroup”, “colgroup”)colspan: Number of columns the header spansrowspan: Number of rows the header spansheaders: Space-separated list of other header cell IDsabbr: Abbreviated description of the header
§Example
<!-- Column headers -->
<table>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">Role</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>alice@example.com</td>
<td>Developer</td>
</tr>
</tbody>
</table>
<!-- Row headers -->
<table>
<tbody>
<tr>
<th scope="row">Product A</th>
<td>$99</td>
<td>In Stock</td>
</tr>
<tr>
<th scope="row">Product B</th>
<td>$149</td>
<td>Out of Stock</td>
</tr>
</tbody>
</table>
<!-- Multi-level headers -->
<table>
<thead>
<tr>
<th rowspan="2" scope="col">Name</th>
<th colspan="2" scope="colgroup">Scores</th>
</tr>
<tr>
<th scope="col">Math</th>
<th scope="col">Science</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Alice</th>
<td>95</td>
<td>92</td>
</tr>
</tbody>
</table>
<!-- Headers with abbreviations -->
<table>
<thead>
<tr>
<th scope="col" abbr="Temp">Temperature (°F)</th>
<th scope="col" abbr="Humid">Humidity (%)</th>
</tr>
</thead>
<tbody>
<tr>
<td>72</td>
<td>65</td>
</tr>
</tbody>
</table>§Accessibility
- Always use
scopeattribute to clarify what the header labels - Use “col” for column headers, “row” for row headers
- Use “colgroup” or “rowgroup” for headers spanning groups
- Provide
abbrfor long header text to aid screen readers - Ensure header text is concise and descriptive
§WHATWG Specification
Trait Implementations§
Source§impl HtmlElement for Th
impl HtmlElement for Th
impl<T: FlowContent> CanContain<T> for Th
impl CanContain<Text> for Th
impl CanContain<Th> for Tr
Auto Trait Implementations§
impl Freeze for Th
impl RefUnwindSafe for Th
impl Send for Th
impl Sync for Th
impl Unpin for Th
impl UnwindSafe for Th
Blanket Implementations§
Source§impl<T> BorrowMut<T> for Twhere
T: ?Sized,
impl<T> BorrowMut<T> for Twhere
T: ?Sized,
Source§fn borrow_mut(&mut self) -> &mut T
fn borrow_mut(&mut self) -> &mut T
Mutably borrows from an owned value. Read more