Пошаговое руководство по началу работы с таблицами HTML

HTML таблица

обзор

Сеть заполнена такой информацией, как результаты матчей по футболу, крикету, списки имен сотрудников и адреса электронной почты. Таблицы HTML позволяют отображать информацию в так называемых табличных данных.

ПРИМЕЧАНИЕ. Я уже добавил стили с использованием CSS, поэтому мои элементы будут выглядеть иначе. Но они будут работать точно так же.
Если вы хотите, чтобы ваши элементы выглядели как мои, вы можете найти мой CSS-файл по ссылкам, приведенным ниже:
CSS: https://gist.github.com/abhishekjakhar/2ea51dfc0dcf6f6ed0d44ac0e72f9c54

Базовая таблица

Мы можем создать таблицу HTML, используя элемент table. У него есть открывающий и закрывающий тег, и он оборачивает все строки таблицы и ячейки таблицы внутри него.

Теперь давайте наберем строку таблицы. Таблицы состоят из строк информации, которые проходят через страницу. Элемент

используется для создания строки таблицы.

Тем не менее, нет элемента для столбца таблицы. Столбцы таблицы зависят от того, сколько ячеек таблицы находится внутри каждой строки. Элемент

, равно количеству столбцов, которые вы получите в строке таблицы.

Подведем итог:

  • <таблица>: элемент таблицы представляет данные в виде ряда строк и столбцов. Таблицы должны использоваться только для отображения табличных данных, а не для макета страницы.
: элемент строки таблицы определяет ряд ячеек в таблице. Строки таблицы могут быть заполнены ячейками таблицы и ячейками заголовка таблицы.
  • используется для создания ячейки таблицы. Таким образом, в основном количество элементов , которые вы добавите в элемент
    : элемент ячейки таблицы содержит данные и представляет одну ячейку таблицы. Каждая ячейка таблицы должна находиться внутри строки таблицы.Элементы строки таблицы (<tr>) и ячейки таблицы (<td>) вместе образуют таблицу
    Примечание. Элементы не имеют атрибутов. Если вы раньше работали с таблицами, возможно, вы использовали некоторые атрибуты в прошлом. Однако все они сейчас устарели.

    Элемент заголовка таблицы

    Мы создали базовую таблицу, но не ясно, что наша первая строка в таблице - это попытка пометить каждый из наших столбцов. Прямо сейчас, первая строка просто выглядит как другая строка в нашей таблице.

    Мы можем использовать элемент заголовка таблицы в каждом из этих трех столбцов, чтобы сообщить браузеру, поисковым системам и программам чтения с экрана, что это на самом деле заголовки, а не просто обычные данные.

    Теперь мы будем менять ячейки таблицы в первом ряду на ячейку таблицы. Для этого мы заменим

    для головы и для тела.

    - Элемент заголовка таблицы (не путать с элементом ячейки заголовка таблицы) определяет набор строк, которые составляют заголовок таблицы.
  • - Элемент тела таблицы определяет одну или несколько строк, которые составляют основное содержимое (или «тело») таблицы.элементы заголовка таблицы (<thead>) и тела таблицы (<tbody>)

    Элемент ножки стола

    У нас есть заголовок таблицы и элемент тела таблицы. Поэтому, конечно же, есть элемент ножки стола. Но вопрос в том, в чем смысл элемента нижнего колонтитула таблицы, когда у нас уже есть заголовки таблицы, которые обозначают столбцы?

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

    Теперь вы можете подумать, что нижний колонтитул таблицы будет идти внизу таблицы. Однако на самом деле он должен идти сразу после элемента заголовка таблицы и непосредственно перед элементом тела таблицы.

    - Элемент нижнего колонтитула таблицы определяет набор строк, суммирующих столбцы таблицы.элемент ножки стола (<tfoot>)

    Элемент заголовка

    Этот элемент в основном является заголовком таблицы, и он должен идти сразу после открывающего тега таблицы. Это приятно добавить, потому что оно быстро суммирует, что может содержать таблица.

    Теперь мы рассмотрели основы элементов таблицы в HTML.

    Вы можете узнать больше о таблицах по ссылкам, приведенным ниже.

    Надеюсь, вы нашли этот пост информативным и полезным. Буду рад услышать ваши отзывы!

    Спасибо за чтение!

    highresolution-wallpapers.net © 2020
    на .

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

    Стол и тело

    Подобно структуре нашего HTML-документа, где у нас есть голова и тело, мы также можем добавить голову и тело к нашей таблице. Мы определенно не будем использовать те же элементы HTML, потому что тогда синтаксис станет недействительным. Для таблицы у нас есть