1

I need to strike out the entire table row using <strike></strike> HTML tags. I applied the <strike> around the table row , but it didn't work. Please suggest how I can achieve this.

Other options I tried as shown below using CSS line-through. This works, but the accessibility technologies, won't recognize the line through I believe. So other answers answered in this forum for this question won't work in this case.

<tr style="text-decoration: line-through; color:red; width:100%">

I've attached the sample code. I want the row 2 to be stricken out. Any way to achieve this?

<!DOCTYPE html>
<html>

<head>

<table style="border: 1px solid black;width:100%">
    <thead>
      <tr>
        <th>Table 1 Head 1</th>
        <th>Table 1 Head 2</th>
        <th>Table 1 Head 3</th>
        <th>Table 1 Head 4</th>
      </tr>
    </thead>

    <tr>
      <td>Row 1 Column 1</td>
      <td>Row 1 Column 2</td>
      <td>Row 1 Column 3</td>
      <td>Row 1 Column 4</td>
    </tr>
    <strike>
    <tr>
          <td>Row 2 Column 1</td>
          <td>Row 2 Column 2</td>
          <td>Row 2 Column 3
          </td>
          <td>Row 2 Column 4</td>
        </tr>
        </strike>
        <tr>
          <td>Row 3 Column 1</td>
          <td>Row 3 Column 2</td>
          <td>Row 3 Column 3</td>
          <td>Row 3 Column 4</td>
        </tr>
  </table>
  </body>
  </html>
isherwood
  • 58,414
  • 16
  • 114
  • 157
KV MC
  • 29
  • 4
  • what about striking through each `` individually? – corn on the cob Aug 24 '23 at 18:12
  • 1
    In that case, each td content needs to be included inside tag. My data is in xml format, and I use xsl to transform and render the html content. The entire row is stored inside a processing instructions data content. So Whenever there is particular type of processing instruction element in the xml, that means, that row needs to be striked out indicating its been deleted. IN my case the entire tr. – KV MC Aug 24 '23 at 18:32
  • From an accessibility perspective, whether you use , , or and put it on a or will **not** help the screen reader user. While those elements have semantics, no screen readers do anything with them so the user won't know it's struck out. You'll need to provide [`sr-only`](https://stackoverflow.com/questions/19758598/what-is-sr-only-in-bootstrap-3) type text to communicate the meaning of your struck-through text. – slugolicious Aug 25 '23 at 05:12

1 Answers1

4

If you want to be semantically meaningful, you need to put a set of <strike> tags inside every <td>, you cannot do the entire row at once.

That said, if you want semantic meaning, use the <s> or <del> tags instead of <strike>. From MDN:

Warning: This element is deprecated in HTML 4 and XHTML 1, and obsoleted in the HTML Living Standard. If semantically appropriate, i.e., if it represents deleted content, use <del> instead. In all other cases use <s>.

The same is true about <s> and <del> as <strike> - you cannot put them around the entire table row. The only content allowed inside these tags is "Phrasing content", including plain text and certain inline content elements (listed in the link above). This list does not include Table elements.

Moshe Katz
  • 15,992
  • 7
  • 69
  • 116