Таблицы html
1 минута чтениеСоздавать сайты можно различными способами, но сегодня мы поговорим о наиболее востребованном варианте, с помощью таблиц HTML. Этот способ наиболее востребован среди веб мастеров, благодаря, хорошей системе буквенных или цифровых обозначений персонального компьютера. В этой статье я постараюсь легко и доступно обучить вас создавать страницы сайта в таблицах и задавать ему определенные параметры. Такие параметры, как цвет, размер шрифта, переход с одной страницы на другую, так же вставлять различные картинки или гифки.
В первую очередь нужно объяснить вам из чего же состоит веб сайт, что в него входит. С помощью этого мы сможем создать веб сайт. Каждая таблица html представляет собой ящик который состоит из открывающегося и закрывающегося тегов html:
открывающейся таблицы
закрывающейся таблицы
Внутри этого ящика находятся ячейки таблиц html, которые задаются тэгами
и
Благодаря различным комбинациям мы будем задавать различные параметры для страниц.
– задаёт количество горизонтальных рядов таблицы
(строчки).
– задаёт количество вертикальных рядов таблицы
(столбцы).
Без этих тегов невозможно построить таблицы, поэтому при прописи каждого тега нужно быть очень внимательным, из-за любой мелочи может получиться ошибка и заданные вами параметры не будут работать.
Таблицы html, которая состоит из трёх строк и двух столбцов :
строчка1 столбец1 | строчка1 столбец2 |
строчка 2 столбец1 | строчка 2 столбец2 |
строчка 3 столбец1 | строчка 3 столбец2 |
А вот как выглядит код HTML вышесказанного примера:
Вся наша работа начинается с открывающегося тега
, после этого мы в зависимости от того сколько нам нужно строк, задаем их их с помощью тегов , в них мы будем прописывать количество столбцов . Это не очень сложно, надеюсь вы поняли.
Создания веб сайта не означает, что к вам потянутся миллионы зрителей, но тем немее это уже кое-что, получается мы создали, что-то вроде ядра. А теперь нужно создать красивую обертку. Для этого нам понадобятся дополнительные параметры для необычного оформления. Нашей задачей будет увеличение посещаемости и заработка денег. Для начала создадим рамку таблицы html. Рамка вводится свойством border и его нужно прописать в тэге
:
Кроме этого, мы можем сделать нашу рамку цветной. В этом нам поможет аксессуар для таблиц html bordercolor:
Далее вставляем наши аксессуары в наш пример:
посмотреть результат
Дальше нам нужно выбрать наиболее подходящую высоту и ширину ячеек нашей таблицы html, в этом нам помогут аксессуары height и width. Свойства height задается всего для одной ячейки, а все остальные выровняются по этому размеру. К примеру, вы задаете высоту первой ячейки 100, а второй ячейки 170, то автоматически все ячейки окажутся с размером 170, так как им задана команда сравняться по наибольшему размеру. Свойства width задаётся для каждой ячейки в строке, а для следующих строк просто повторяется. Ширина ячеек, также как и высота уравниваются по самому большому размеру:
посмотреть результат
Конкретно в этом примере мы задали команду высоты и ширины в пикселях, но есть еще один способ задать такую команду, только уже в процентах. Общая сумма высоты height также как и сумма ширины всех ячеек width не должна быть больше 100%. Например:
посмотреть результат
Если мы сложим высоту строчек height всех строчек (25+45+30), то в общем получим 100%. Это же можно проделать со строчками width (60+40) и мы все равно получим 100%.
И в заключение, для своей таблицы html вы можете задать любую высоту и ширину, после того как вы это сделаете, все столбцы и ряды поделят данное пространство им поровну. Например:
посмотреть результат
Когда я создавал первый веб-сайт, он был посвящен фан клубу Лондонского Арсенала. Сначала у меня не получалось и основная ошибка была в моей невнимательности. Поэтому хочется дать вам небольшой совет. Когда вы будете создавать свой сайт, будьте внимательны и следите за каждым тегом, за каждым знаком. Иногда из-за одной скобки компьютеру не поступает команда или поступает совсем другая команда и ваш сайт получится не тем, каким бы вы его хотели видеть.