Создание таблиц является очень удобной функцией на персональном компьютере. Давайте сегодня поговорим о том, как научиться создавать таблицу в HTML5, а также узнаем, как ее параметры все указать через стили.
Задача и ее решение
Для начала необходимо понять всю систему создания табличных параметров и в принципе ее структуры. По сути своей, как вы все знаете, таблица у нас состоит из двух частей. Если их можно так назвать – строки и столбцы, в которых также могут располагаться отдельные ячейки. Здесь также могут располагаться различные надписи и изображения, потому как таблицы могут быть различными и создаются они для разных целей.
Если вам необходимо добавить таблицу из строк и столбцов на какой-нибудь сайт, вам придется воспользоваться тегом <table>. Нужно понимать, что эта «деталь» по сути своей. Выступаем неким контейнером для элементов, которые, в свою очередь, и являются определителем табличного содержания.
Нужно также отметить, что строки, как и столбцы задаются тоже тегами – <tr> и <td>. Не стоит забывать, что в любом случае, какой бы таблица не была, в обязательном порядке в ней должна быть хотя бы единственная ячейка. Если, по какой-то причине, вас не устроил стандартный тег, тогда можете воспользоваться другим, к примеру – <th>. Если именно этот вариант вы и выбрали, тогда будьте уверены в том, что отображаться он будет жирным шрифтом и к тому же, будет также автоматическое выравнивание по самой ячейке. Так происходит в автоматическом режиме, и именно браузер так отображает данные параметры. Это единственное отличие, которое вы сможете заметить в этом случае.
Ячейки в таблице, которая будет создаваться на сайте, будет выглядеть следующим образом:
- в горизонтальной строке с первой ячейкой расположиться вторая
- по вертикали под первой ячейкой расположиться третья
- рядом с третьей по горизонтали располагается четвертая ячейка и т.д.
Если вы решите включить в таблицу такой элемент как border (для его создания понадобится использование тега <table> ), то его нужно будет использовать исключительно с пустым значением и никак по-другому ( значение будет равно единицы). Даже при желании, все другие значения просто не пройдут процесс валидации.
Для того чтобы пользователю удалось управлять полем, которое располагается внутри ячейки, необходимо будет воспользоваться таким свойством как padding, которое относится к стилевым. Чаще всего это свойство идет в паре с селектором td.
В случае необходимости изменения расстояния между ячейками в таблице, нужно будет воспользоваться свойством под названием border-spacing. Именно его и необходимо будет добавить к table.
Для того чтобы сократить или увеличить расстояние меду ячейками, также можно использовать и рамку, которая находится вокруг каждой ячейки.
0
3009
