Поточний час:
Сьогодні 22 листопада, середа 2017 рік
Стрічка RSS

Введіть ваш Е-mail:

Zura-Blog 2 роки 11 місяців 3 дня

Ваш ip адрес:54.162.166.214

Добрий вечір!
Ви обновили сторінку в 20 : 38
Статистика

Кількість публікацій на блозі: 367
Кількість коментарів на блозі: 102
Кількість категорій на блозі: 27
Кількість міток на блозі: 3

Zura – Blog
Яндекс.Метрика UA TOP Bloggers

Post_34aТаблицы в HTML применяют когда у вас есть какие–то специальные даные, и ети даные нужно отобразить в виде таблицы, тогда вам необходимо сначала сделать таблицу, а затем разставить ети данные в таблицу.

Ето может быть напрмер “База трастовых сайтов”, где нужно указывать сайт, возле сайта его позицию, скажем ТИЦ и пейдж ранк.

Раньше, когда еще не существовало СSS, все сайты создавали каркас, на основе таблиц.

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

Все таблицы начинаются с парного тега <table>, если тег парный он должен закрываться </ table>. Затем тег нужно заполнить еще специальными тегами и атрибутами, которые предназначены для создания таблиц. Теги <table> </table> служат контейнером для элементов, они определяют содержание таблицы.

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

Для того чтобы создать  рамку на странице, нужно вначале добавить атрибут border = “” а затем в кавычках цифрой указать толщину рамки. Далее можно добавлять еще атрибуты, которые определяют:

⇒ цвет рамки таблицы

⇒ цвет фона таблицы

⇒ выравнивание таблицы

⇒ высоту и ширину таблицы

Для того чтобы таблица выделялась в рамке добавляем атрибут border

<table border= “1” ></table>— для того что–бы таблица  выделялась в рамке, без рамки данные будут просто выведены без таблицы. число 1– определяет ширину рамки таблицы. (можна 2 або 3 і т.д.), чем больше число тем больше ширина рамки.

Определяет цвет рамки таблицы, атрибут bordercolor

<table border= “1” bordercolor= “#00ff00” ></table>—определяет цвет рамки таблицы

Определяет цвет фона таблицы атрибут  bgcolor

<table border= “10” bgcolor= “#00ff00” ></table>— Определяет цвет фона таблицы 

Выравнивание таблицы определяет атрибут align

<table border= “10” bgcolor= “#00ff00”  align= “center” >— Выравнивание таблицы определяет. (по умолчанию таблица по левому краю)

Высоту  ширину таблицы определяет height и width

<table border= “10”  align= “center”  height= “120” width=  “220”  >— определяет высоту и ширину таблицы. 

60а

После того когда мы определили толщину рамки, цвет рамки, цвет фона в рамке, далее определяем сколько нам нужно строк, сколько столбцов. Все зависит от самих данных и как мы их хотим разместить.

Кстати кому не понятно значение “Артибут” можно прочитать в публикации “Понятие атрибуты в HTML” по ссылке 

Например таблица  6х9.

Итак 6 строк и 9 столбцов. Строки создаются с тега <tr> </ tr>. Записываем шесть тегов для того чтобы у нас появилось шесть строк.

Затем записываем количество ячеек, чтобы определить количество столбцов. Для этого существуют теги <th> </ th> размещаются сверху таблицы в основном для того чтобы указать название объектов, заголовок и т.д. Теги <td> </td> нужны для того чтобы вносить непосредственно данные (например числа, номера и т.д.) размещаются ниже тегов <th> </ th>.

Теги <th></th>—определяет ячейку заголовке таблицы. В ней текст выделен жирным шрифтом.

Теги <td></td>— предназначен для хранения данных ячейки таблицы, в ней текст выделен обычным, менее жирным шрифтом.

Атрибут COLSPAN  предназначен для объединения ячеек по горизонтали. Например нам нужно поместить три значения в одну ячейку.

Для этого записываем в ячейку атирбуты COLSPAN= “3” , и в кавычках значение трех, (можно два или четыре в зависимости сколько значений нужно прописать в ячейке).

Ниже приведен на картинке пример расположения трех значений colorschemer.com, gravatar  і saite в ячейках.

объединение ячеек по горизонтали используем атрибут colspan

<table border= “6” bordercolor= “#ff0000” > <tr><th>GOOGLE</th><th>yandex</th><th>ahawks</th><th>seo-mayak</th><th>intensedebate</th><th> colspan= “3” >colorschemer.com gravatar saiter</th></tr></table>

61a

⇑по горизонталі

Атрибут ROWSPAN— предназначен для объединения ячеек по вертикали. Например нам нужно поместить три значения в одну ячейку по вертикали.

Для этого записываем в ячейку атирбут ROWSPAN = “3” ,и в кавычках значение трех, (можно больше, или меньше все зависит от того сколько значений нужно прописать в ячейке).

объединение ячеек по вертикали используем атрибут  rowspan

<tr><td rowspan= “3”>100 150 282</td></tr>— 100 150 282 значение объединении в одну ячейку

62а

⇑по вертикале

 цвет фона ячейки

<tr><td rowspan= “3” bgcolor=”#00ff00“>100 150 282</td></tr>— цвет фона ячейки

 

выравнивает все значения ячейки по центру

<tr align= “center” ></tr>— выравнивает все значения ячейки по центру

Все остальные атрибуты и теги для создания таблицы можно просмотреть перейдя по этой ссылке  http://ruszura.in.ua/html.html

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *