Таблица HTML, являются ли заголовки атрибутов столбцами идентификаторами? - PullRequest
Новая
       8

Таблица HTML, являются ли заголовки атрибутов столбцами идентификаторами?

0 голосов
/ 02 октября 2018

Я хочу присвоить каждой моей таблице <th> идентификатор, поэтому не важно, когда я использую <td> (пока я знаю идентификатор), я нашел это ( Атрибут HTML-заголовков ), который выглядит так, как мне нужно: 

     <table>
      <tr>
        <th id="name">Name</th>
        <th id="email">Email</th>
      </tr>
      <tr>
        <td headers="name">John Doe</td>
        <td headers="email">someone@example.com</td>
      </tr>
    </table>

Но я изменяю порядок <td>, например, сначала адрес электронной почты, а затем имя: 

     <table>
      <tr>
        <th id="name">Name</th>
        <th id="email">Email</th>
      </tr>
      <tr>
        <td headers="email">someone@example.com</td>
        <td headers="name">John Doe</td>
      </tr>
    </table>

И, как вы можете видеть, результат, который я получаю, тот же.

1 Ответ

0 голосов
/ 02 октября 2018

Атрибут заголовка не влияет на представление;это не поменяет местами ячейки таблицы.Атрибут заголовка просто указывает, к каким <th> ячейкам относятся ячейки <td> в целях улучшения программ чтения с экрана:

Это позволяет программам чтения с экрана произносить заголовки, связанные с каждой ячейкой данных, когда отношенияслишком сложны, чтобы их можно было определить, используя только элемент <th> или элемент <th> с атрибутом scope.

Обратите внимание, что каждая ячейка <td> может относиться к более чем одной ячейке заголовка, если таблица содержит более одной строки заголовка.Например: 

<table>
  <tr>
    <th rowspan="2" id="h">Homework</th>
    <th colspan="3" id="e">Exams</th>
    <th colspan="3" id="p">Projects</th>
  </tr>
  <tr>
    <th id="e1" headers="e">1</th>
    <th id="e2" headers="e">2</th>
    <th id="ef" headers="e">Final</th>
    <th id="p1" headers="p">1</th>
    <th id="p2" headers="p">2</th>
    <th id="pf" headers="p">Final</th>
  </tr>
  <tr>
    <td headers="h">15%</td>
    <td headers="e e1">15%</td>
    <td headers="e e2">15%</td>
    <td headers="e ef">20%</td>
    <td headers="p p1">10%</td>
    <td headers="p p2">10%</td>
    <td headers="p pf">15%</td>
  </tr>
</table>

Чтобы поменять местами ячейки таблицы, вам будет гораздо лучше использовать flexbox (используя flex-direction) или решение JavaScript.

...