Can a TD come before a TH?

Hello. I just created an HTML table and got it looking just like I wanted, and then decided that I want to have a red arrow pointing to a particular row for emphasis.

In order to keep the arrow aligned with the rest of the row data, I decided to create a new empty column and add the Unicode for this arrow there.

However, i am unsure if my “hack” will break proper HTML semantics?

Here is an example of what I want to do…

<table>
	<thead>
		<tr>
			<td scope="col"></td> <!-- HERE -->
			<th scope="col">Product</th>
			<th scope="col">Description</th>
			<th scope="col">Price</th>
		</tr>
	</thead>

	<tbody>
		<tr>
			<td scope="row"></td>
			<th>Men's Bathrobe/th>
			<td>Heavy, good for Winter...</td>
			<td>$35.99</td>
		</tr>
		<tr>
			<td scope="row">&#10148</td> <!-- HERE -->
			<th>Fuzzy Slippers</th>
			<td>Warm, cozy slippers...</td>
			<td>$19.99</td>
		</tr>
	</tbody>
</table>

The example above shows how I added a TD as the 1st column.

Thoughts?

Hi,
The validator throws the following error in regards to the scope on the td

The scope attribute on the td element is obsolete. Use the scope attribute on a th element instead.

It does not give an error in regards to a td preceding a th. Also, MDN td specs gives this info.

Tag omission

The start tag is mandatory.
The end tag may be omitted, if it is immediately followed by a <th> or <td> element or if there are no more data in its parent element.

I read that to say that it could be possible for a th to follow a td.
Semantically speaking though I would expect all td elements to follow a th.

Is there some reason you can’t slip your unicode in the th before the heading text, and move the scope=“row” to the th

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>
<style>
th[scope="row"] {text-align:right}

</style>

</head>
<body>

<table>
  <thead>
    <tr>
      <th scope="col">Product</th>
      <th scope="col">Description</th>
      <th scope="col">Price</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row">Men's Bathrobe</th>
      <td>Heavy, good for Winter...</td>
      <td>$35.99</td>
    </tr>
    <tr>
      <th scope="row">&#10148; Fuzzy Slippers</th>
      <td>Warm, cozy slippers...</td>
      <td>$19.99</td>
    </tr>
  </tbody>
</table>

</body>
</html>

1 Like

I think that adding your arrow to a :before element on the th will give you the alignment you were trying to achieve.

Screenshot

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>
<style>
th[scope="row"] {
 text-align:left;
 background:#eee;
}
th[scope="row"]::before {
  content:'\27A4';
  color: transparent;
  padding-right:.25em;
}
th.arrow::before {
  color:#000;
}
</style>

</head>
<body>

<table>
  <thead>
    <tr>
      <th scope="col">Product</th>
      <th scope="col">Description</th>
      <th scope="col">Price</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row">Men's Bathrobe</th>
      <td>Heavy, good for Winter...</td>
      <td>$35.99</td>
    </tr>
    <tr>
      <th class="arrow" scope="row">Fuzzy Slippers</th>
      <td>Warm, cozy slippers...</td>
      <td>$19.99</td>
    </tr>
  </tbody>
</table>

</body>
</html>
3 Likes

@Ray.H,

Yes, I thought about your suggestion, however I want the red arrow to appear to be outside of the visible table and pointing to the right, sort of like a “Hey, look at this row!!”

Something like this…

What I came up with last night looks great, but I want my code to be semantically correct and to be accessible to screen-readers.

Any ideas how to accomplish both things without too much hassle?

Hi,
Working from the html I used in my last post you can just set the pseudo :before element on the .arrow class only.

Then remove the arrow from the flow with absolute positioning and shift it left.

Screenshot_2

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>
<style>
table {
  margin: 1em 2em;
  border-collapse: collapse;
}
td, th {
  border: 1px solid #000;
  padding: 4px;
}
th[scope="row"] {
 text-align:left;
 background:#eee;
}
th.arrow::before {
  content:'\27A4';
  color: red;
  position: absolute;
  margin-left:-1.5em;
}
</style>

</head>
<body>

<table>
  <thead>
    <tr>
      <th scope="col">Product</th>
      <th scope="col">Description</th>
      <th scope="col">Price</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row">Men's Bathrobe</th>
      <td>Heavy, good for Winter...</td>
      <td>$35.99</td>
    </tr>
    <tr>
      <th class="arrow" scope="row">Fuzzy Slippers</th>
      <td>Warm, cozy slippers...</td>
      <td>$19.99</td>
    </tr>
  </tbody>
</table>

</body>
</html>
3 Likes

@Ray.H,

Just ran my code through the W3C Validator and the errors went away!

You are a genius!! :+1:

Thanks!!

(And I’m sure people with screen readers will appreciate the tweak.)

1 Like