21.11.2024

Wikihub

Все обо всем

Таблицы html

1 минута чтение
Таблицы html

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

В первую очередь нужно объяснить вам из чего же состоит веб сайт, что в него входит. С помощью этого мы сможем создать веб сайт. Каждая таблица html представляет собой ящик который состоит из открывающегося и закрывающегося тегов html:

открывающейся таблицы

закрывающейся таблицы

Внутри этого ящика находятся ячейки таблиц html, которые задаются тэгами

и

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

– задаёт количество горизонтальных рядов таблицы
(строчки).

– задаёт количество вертикальных рядов таблицы
(столбцы).

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

строчка1 столбец1 строчка1 столбец2
строчка 2 столбец1 строчка 2 столбец2
строчка 3 столбец1 строчка 3 столбец2

А вот как выглядит код HTML вышесказанного примера:

Вся наша работа начинается с открывающегося тега

Таблицы 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 вы можете задать любую высоту и ширину, после того как вы это сделаете, все столбцы и ряды поделят данное пространство им поровну. Например:

   посмотреть результат

Таблицы html

Когда я создавал первый веб-сайт, он был посвящен фан клубу Лондонского Арсенала. Сначала у меня не получалось и основная ошибка была в моей невнимательности. Поэтому хочется дать вам небольшой совет. Когда вы будете создавать свой сайт, будьте внимательны и следите за каждым тегом, за каждым знаком. Иногда из-за одной скобки компьютеру не поступает команда или поступает совсем другая команда и ваш сайт получится не тем, каким бы вы его хотели видеть.

 
 
Copyright © Все права защищены. | Newsphere от AF themes.