-1

I'm trying to tidy up some HTML produced by a long gone developer and wish to know if there is any earthly reason to have a span element covering the whole of a th header. Is there some formatting trick I'm missing?

<table id="myTable">
  <thead>
    <tr>
       <th><span>Heading with words</span></th>
       <!-- more th elements -->
    </tr>
  </thead>
  <tbody>
     <!-- table rows here -->
  </tbody>
</table>

If there is a styling application, e.g. heading centering that could be the reason, and which cannot be done without the span please provide an example.

vogomatix
  • 4,856
  • 2
  • 23
  • 46
  • 2
    Inspect the element and check if it is inheriting any styles from the CSS or something. Could be styling aspect only, I can think of. There could be nothing. – Praveen Kumar Purushothaman Feb 11 '16 at 19:09
  • 1
    I can think of several reasons why it might be useful to do that. I wouldn't want to speculate on which (if any) apply in your case, there isn't a whole lot of context. – Quentin Feb 11 '16 at 19:09
  • 1
    Alas, you shouldn't ask us, but the author of that code ;) – Jeroen Feb 11 '16 at 19:09
  • check CSS and look for any rule that is assigned to `th > span` or `th span`. otherwise the developer was too much container fan!!! – Farzad Yousefzadeh Feb 11 '16 at 19:09
  • Could be some css for targeting, like `#myTable th > span`, but other than that? No reason that I can think of. – Drew Kennedy Feb 11 '16 at 19:10
  • I'd ask the author but they're not with the company any more. – vogomatix Feb 11 '16 at 19:10
  • I can't think of any targetting that can't be applied to the th element itself, or solved through better class use. – vogomatix Feb 11 '16 at 19:11
  • 1
    Who knows, maybe the `long gone developer` did this just to make you scratch your head and come to Stack Overflow. :) – Drew Kennedy Feb 11 '16 at 19:13
  • 1
    Try deleting the `span` and see what changes, you will probably find your answer pretty quickly. There are many reasons you might have this markup, one of which would be applying styling to :pseudo elements that you want relative to the inline text rather than it's container. – Jesse Kernaghan Feb 11 '16 at 19:16

1 Answers1

1

There are a certain number of things related to display and position-ing you cannot do on a td or a th, and generally on <table> elements. The only solution is to wrap its contents in a <span> or <div> and work on that wrapper.

Of course, the recommended way to go is not to use HTML <table>s for anything other than displaying tabular data (in which case you'll probably not need any position-ing or display properties set on its <td>s or <th>s, but that's a completely different story).

tao
  • 82,996
  • 16
  • 114
  • 150