Таблица HTML позволяет упорядочивать данные, такие как текст, изображения, ссылки, формы, поля форм, другие таблицы и т.д., в строки и столбцы ячеек.
Создание таблиц HTML
Таблицы в HTML создаются при помощи тега <table>.
Таблица делится на строки тегом <tr>, который обозначает строку таблицы, а каждая строка делится на ячейки данных с тегом <td>, который обозначает данные таблицы.
Тег <td> может содержать текст, ссылки, изображения, списки, формы, другие таблицы и т.д.
Пример HTML таблицы:
<table border="1"> <thead> <tr> <th>Номер</th> <th>Имя</th> <th>Эл. почта</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Вася Пупкин</td> <td>vasyapupkin@mail.com</td> </tr> <tr> <td>2</td> <td>Валя Пупкина</td> <td>valyapupkina@mail.com</td> </tr> </tbody> </table>
Встроенные в браузеры таблицы стилей будут отображать текст в элементе <th> жирным шрифтом и по центру. Но вы можете переопределить таблицу стилей браузера по умолчанию с помощью CSS.
Атрибуты cellpadding и cellspacing таблиц
Атрибуты cellpadding и cellspacing используются для настройки пустого пространства внутри таблицы.
- cellpadding регулирует отступ между границей ячейки таблицы и ее содержимым.
- cellspacing регулирует отступ между ячейками таблицы.
<table border="1" cellpadding="10" cellspacing="8"> <thead> <tr> <th>Номер</th> <th>Имя</th> <th>Эл. почта</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Вася Пупкин</td> <td>vasyapupkin@mail.com</td> </tr> <tr> <td>2</td> <td>Валя Пупкина</td> <td>valyapupkina@mail.com</td> </tr> </tbody> </table>
Объединение строк и ячеек таблицы
Объединение позволяет расширять столбцы и строки на несколько столбцов и строк.
Обычно, когда мы создаем ячейку таблицы, она не может занять пространство ниже или выше другой ячейки таблицы. Но вы можете использовать атрибут colspan для охвата нескольких столбцов и атрибут rowspan для охвата нескольких строк в таблице. Например:
<table border="1" cellpadding="10" cellspacing="8"> <thead> <tr> <th colspan="3">Информация</th> </tr> </thead> <tbody> <tr> <td rowspan="2">Клиенты</td> <td>Вася Пупкин</td> <td>vasyapupkin@mail.com</td> </tr> <tr> <td>Валя Пупкина</td> <td>valyapupkina@mail.com</td> </tr> </tbody> </table>
В этом примере colspan объединяет 3 столбца в один и создает место для общего заголовка в верхней части таблицы. В свою очередь rowspan создает общую ячейку для двух строк, что позволяет отобразить ее в виде общей колонки для двух строк. Просто сохраните пример как html файл и посмотрите на результат.
Оставить комментарий