one column table with multiple <th>-CodePudding

I have a simple table :

table {
  border: 1px solid grey
}

th,
td {
  padding: .5rem
}

th {
  text-align: right
}

<table>
  <tbody>
    <tr>
      <th scope="row">Feed in Braids</th>
      <td>20 / two braids</td>
    </tr>
    <tr>
      <th scope="row">Waves / Curls / Straightening</th>
      <td>30</td>
    </tr>
    <tr>
      <th scope="row">Hairstyle for special occasions</th>
      <td>45-60</td>
    </tr>
  </tbody>
</table>

I would like to squeeze the data in one column, which would probably have to look something like this:

table {
  border: 1px solid black;
  padding: 1rem;
  text-align: center;
}

th,
td {
  padding: .5rem
}

<table >
  <tr>
    <th>Feed in Braids</th>
  </tr>
  <tr>
    <td>20 / two braids</td>
  </tr>
  <tr>
    <th>Waves</th>
  </tr>
  <tr>
    <td>25</td>
  </tr>
  <tr>
    <th>Special</th>
  </tr>
  <tr>
    <td>40 </td>
  </tr>
</table>

I have doubts if the "squeezed" table would be a correct construct, in terms of possibly unclear scope of the headings.

CodePudding user response：

Concerning accessibility, a table header (th) can only have either "row" or "column" as its scope, and this is always valid for the whole row or column. So in this way your "one-column table" doesn't really meet accessibility standards and isn't semantically correct.

But if you have everything in one column, you could as well use alternating headers (like h3, h4, h4, whatever) instead of th and paragraphs (or simply contents following the headers) instead of td. And once you are that far, a table itself wouldn't make that much sense – the wparent element might as well be a div...

You also might want to consider a definition list instead, maybe (depending on what your actual usecase looks like, or which function it should fulfill): https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl

Or you use nested tables, i.e. multiple tables consisting of one th and one td, nested either in the cells of a larger table (if that semantically makes sense at all) or simply inside a div or section element.