Главная страница>Учебник по веб-дизайну>Учебник по HTML

Учебное пособие по HTML: 10 тегов, связанных с таблицей для HTML

Автор：Eve Cole Время обновления：2025-05-23 01:00:03

Основываясь на некоторых из моих недавних практик и после общения с некоторыми читателями об использовании HTML -форм, я решил написать эту статью. В целом, я заметил, что у них было предвзятое отвращение к использованию таблиц из -за вводящей в заблуждение информации. На самом деле, многие люди скажут, что я вижу утверждение, что я никогда не должен использовать формы, но это абсолютно неправильно! Это предложение предназначено только для использования таблиц HTML для определения макета веб -страницы, но таблицы идеально подходят для удобного расположения строк и столбцов информации данных, и если вам нужно отображать данные столбца таблицы на странице, вы должны их использовать! почему нет? Однако в этом случае некоторые люди игнорируют существование некоторых HTML -тегов, используемых для таблиц, и не знают, как их правильно использовать.

HTML имеет 10 тегов, связанных с таблицей. Вот список с введением, но сначала документ должен быть правильно определен ниже HTML 4.01/XHTML 1 или HTML 5:

  • <Подпись> Определите заголовок таблицы (4, 5)
  • <COL> Определите атрибуты для столбцов таблицы (4, 5)
  • <Colgroup> определяет группировку столбцов таблицы (4, 5)
  • <Таблица> Определить таблицу (4, 5)
  • <Tbody> Определите тело таблицы (4, 5)
  • <TD> Определить клетку (4, 5)
  • <Tfoot> Определите таблицу примечания (внизу) (4, 5)
  • <Th> Определите заголовок таблицы (4, 5)
  • <Head> определяет заголовок таблицы (4, 5)
  • <tr> определяет ряды таблицы (4, 5)

Основная структура таблицы выглядит следующим образом:

Он содержит заголовок, голову, тело и дно. Правильный порядок элементов HTML:

  1. <Таблица>
  2. <Подпись>
  3. <голова>
  4. <tfoot>
  5. <tbody>

Вы также можете использовать <Col> и <Colgroup> для определения столбцов таблиц или групповых столбцов:

  1. <Таблица>
  2. <Подпись>
  3. <colgroup>
  4. <col>
  5. <голова>
  6. <tfoot>
  7. <tbody>

Вот правильный пример структуры таблицы:

 <Таблица границы = 1> <Pation> Подпись таблицы здесь </Подпись> <colgroup span = 1 style = fachine: #ded;/> <colgroup span = 2 style = fanost: #efeff;/> <!-заголовок таблицы-> <thead> <tr> <th> Head 1 </th> <Th> Head 2 </th> <Th> Head 3 </th> </tr> </thad> </thad> </thad> </thad> </thad> </Th Болете-> <tfoot> <tr> <td> foot 1 </td> <td> foot 2 </td> <td> foot 3 </td> </tfoot> <!-корпус таблицы-> <Tbody> <tr> <td> a </td> <td> b </td> <td> c </td> </tr> <tr> <td> d </td> <td> e </td> <td> f </td> </tr> </tbody> </table>

Результаты в браузере показаны на рисунке ниже:

Некоторые советы по форме

  • Согласно объяснению и использованию W3Schools, в определении таблицы элемент <Tfoot> должен отображаться до <Tbody> , чтобы браузер мог представить таблицу примечания, прежде чем принимать все данные. Кроме того, если это не этот порядок, он не будет подтвержден W3C HTML4 и XHTML, независимо от того, какой DTD вы заявляете.
  • В HTML 4.01 свойства выравнивания и BGCOLOR таблицы не предпочитаются, поэтому в HTML 5 не поддерживаются атрибуты таблицы (фактически, свойства выравнивания и BGCOLOR больше не поддерживаются в xhtml 1.0 строгое DTD);
  • Все основные браузеры поддерживают тег <Colgroup>, но Firefox, Chrome и Safari поддерживают только атрибуты пролета и ширины элемента Colgroup;
  • Пустые клетки: Показать | Hide in CSS может установить, отображает ли пустая ячейка граница. Обратите внимание, что это должно быть установлено в таблице вместо TD/TH . Эта проблема, скорее всего, столкнется в IE6;
  • Пограничный коллапс: коллапс | Отдельный в CSS может установить, объединяется ли граница таблицы в границу;
  • Свойство по границе в CSS эквивалентно свойству сотовой связи таблицы.

Чтобы реализовать модель разработки производительности и разделения структуры, пропагандируемую к настоящему времени, наблюдение фронтального времени рекомендует, чтобы все вещи, связанные со уровнями презентации на странице, контролировались CSS, и не использовали атрибуты, предоставленные HTML для управления производительностью страницы, а таблицу легче всего игнорировать.

Для получения более подробной информации о таблицах, пожалуйста, проверьте документацию W3C: W3 Введение в таблицы

Наконец, я оставлю для вас очень простой вопрос. Какой атрибут CSS эквивалентен атрибуту CellPadding таблицы?

Связанные статьи