HTML-таблица состоит из столбцов и строк, на пересечении столбцов и строк находится ячейка, в которую можно поместить текст, ссылку, изображение, контейнер, видео, аудио и многое другое.
Как создать таблицу в HTML
Чтобы создать таблицу в HTML нужно в теле сайта <body></body> написать код <table></table>. После мы уже добавляем количество строк, которая вам необходимо (код: <tr></tr>). Потом в эти строки добавляем ячейки столбцов, сколько нужно (код: <td></td>). И добавляем в ячейки свою информацию.
Как видоизменить таблицу в CSS
Как мы видим наша таблица не имеет рамки. Ну наверно нужно это исправить. Переходим в CSS и пишем код, который позволяет создать и изменить рамку у таблицы: table { border: 1px solid # ff0000; }
Как мы видим создалась рамка у всей таблицы. И это логично, т.к. мы в CSS прописали код у table. А чтобы создать рамку у ячейки нужно написать вот такой код:
table { border: 1px solid # ff0000; }
td { border: 1px solid # ff0000; }
Промежутки между ячейками таблицы убираются с помощью вот такого кода: table {border-collapse: collapse;}.
Чтобы изменить фон каждой ячейки, нужно написать вот такой код (вместо color ставим любой цвет): td {background-color: color;}. Т закрасить таблицу, чтобы она не было такой пустой и без границ: table{background-color: color;}
Еще раз скажу, что все коды цветов и оттенков можно узнать на сайте "HTML Color Codes".
Чтобы соединить две ячейки, нужно написать вот такой код: colspan="2" в HTML. Если хотите, чтобы ячейка занимала три или более ячеек, то надо просто поменять цифру в colspan. Пример:
Пример создания таблицы
Сначала нужно проанализировать картинку, и понять как примерно будет выглядеть наш код. Что мы здесь с вами видим? Здесь имеется 6 рядов и 7 столбцов. Так же мы имеем три ячейки, каждая из которых имеет размер двух ячеек. Приступаем к написанию кода:
Вот, что получилось:
