Поточний час:
Сьогодні 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_116Привет всем на Zura-Blog, продолжаю публиковать посты, которые в первую очередь будут полезны тем веб-мастерам, которые только начинают делать свои первые шаги в веб-дизайне.

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

Красивая, имеется в виду именно вид таблицы, на вид таблица должна быть оформлена красиво, можно ячейки таблицы, и линии в разных цветах.

В этой публикации, я для примера возьму таблицы которые уже созданы на Zura-Blog, просматривая свои предыдущие страницы, у меня возникла идея добавить к таблицам фон цвета.

А также и речь в статье пойдет и о том, как создать таблицу на HTML-странице.

Для cms WordPress существуют специальные плагины для создания таблиц, обязательно еще протестую один из плагинов, а также напишу публикацию о таком плагине, но когда присутствует какое-то понятие в html, php и т д, то для того чтобы справиться с такой задачей как добавить фон к таблицам, можно обойтись и без плагинов.

Не имеет смысла устанавливать лишние плагины, каждый согласится, чем плагинов, меньше тем лучше для сайта.

Начну с той таблицы которая уже создании на Zura-Blog, перейдя в главном меню сайта на страницу “HTML”, у меня появилась идея, предоставить таблицам цветной фон, и вообще как можно красивее их оформить.

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

Точнее один инструмент, это программа которая должна определять код цвета, о такой программе присутствуют материалы на блоге в публикации “Определяем код цвета в программе HTML Colors 2000” .

Программа называется “HTML Colors 2000”, возможно она немножко меньше по функциональности от своих, скажем  программ конкурентов, но основную,  нужную мне функцию она выполняет, это определить HTML-код цвета.  

Итак как сделать фон для таблицы, в редакторе cms WordPress открываем страницу или публикацию на которой присутствует таблица.

В панели выбираем режим “Текст”, где нам нужно знать коды, которые определяют таблицу. 

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

К примеру

<table style=”height: 356px;” width=”561″ >

высота таблицы 356 пикселей, ширина 571, для того что бы сделать ячейку в таблице цветной, добавляется атрибут, который определяет цвет фон таблицы, етот атрибут называется “bgcolor”, а в кавычках нужно указать код цвета.

Получиться

<table style=”height: 356px;” width=”561″ bgcolor=”#BBE3F2″>

Как подобрать цвет в программе HTML Colors 2000?

В програме “HTML Colors 2000” нужно щелкнуть на кнопку “scrin”, и навести на курсор мыши на такой цвет, который вам нравится на мониторе, когда щелкнуть левой клавишою мыши,

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

У себя на блоге, я решил увеличить еще и ширину таблицы, теперь придется тратить время, чтобы красиво переоформить все таблицы. 😕 

А теперь перейдем ко второму вопросу этой публикации, как создать таблицу, как добавить фон к таблице, и вообще как сделать вид таблицы красивым на HTML-странице

Для начала нужно выбрать место на HTML-странице, таблицу следует разместить между парными тегами “body”, а не в “head”, и не в футере.

Когда вы место выбрали, дальше потребуются коды, они находятся на Zura-Blog в публикации “Таблицы в HTML” , а также на странице “HTML” в главном меню можно найти нужные атрибуты, перйти можно щелкнув кнопку страницы с названием “HTML”, щелкаем на кнопку в главном меню, и переходим на страницу, там размещены “Основные элементы HTML” среди которых ищем раздел “элементы для списков и таблиц”

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

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

Далее открываем HTML-редакторы “adobe dreamveawear” или “notepad ++”, на этот раз я поработаю с “notepad ++”.


Первым делом прописываем габариты таблицы

<table border=”10″ bgcolor=”#00ff00″ align=”center” height=”120″ width=”100″>

border = “10” – толщина рамки “10” может быть значительно меньше.

bgcolor = “# 00ff00” – это цвет фона таблицы, благодаря ему цвет нашей таблице “Зеленый”

align = “center” – атрибут который указывает, что таблица на странице должна отображаться в “Центре” а не слева или справа, если слева то указываем “left” вместо “center” если дело то указываем “right” вместо “center”

height = “120” width = “100” – это размеры таблицы длина и ширина.


 

<tr><th>Сайт</th><th>Тіц</th><th>Ранк</th><th>Посилання</th><th>Зареєструвався</th><th>Коментарі</th></tr>

<Tr> </ tr> – эти теги означают строку для таблицы, между ними будут размещены теги <th> </ th> это количество столбцов.

Слова “Сайт” “Тиц” “Ранк” “Ссылка” “Зарегистрировался”, для них создадут фон, чтобы было видно, что это заголовки, фон строки создаем в теге <tr>

<Tr bgcolor = “#FFFFFF”> – обратили пожалуй внимание что фон у нас получился не белого цвета, потому что мы в основном теге “table” прописали уже фон bgcolor = “# 00ff00” (зеленый) и фон смешался с цветом строки bgcolor = “#FFFFFF” и стал свет голубой,

чтобы фон стал белым нужно удалить фон в теге “table”, удалить фон bgcolor = “# 00ff00”.

 

tabl6

фон у нас вийшов не білого кольору

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

Собственно чтобы выделить основной строку, можно оставить предварительную комбинацию, тогда у нас фон будет зеленого цвета, а основные значения Светлосиний, а можно удалить фон основного цвета в теге “table” а втеге “tr” прописать цвет.

<Tr bgcolor = “#FFFFFF”>

Сейчас для примера я пропишу шесть строк, строки прописываются тегами <tr> </ tr>, следовательно нужно по вертикали прописать шесть тегов <tr> </ tr>

 

<tr></tr>

<tr></tr>

<tr></tr>

<tr></tr>

<tr></tr>

<tr></tr>

Теперь между этими тегами нужно прописать теги ячеек, они бывают двух видов

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

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

Поскольку заголовок у нас присутствует, все данные прописывать жирным шрифтом не нужно, поэтому теперь прописываем эти теги, поскольку у нас есть шесть заголовков “Сайт” “Тиц” “Ранк” “Ссылка” “Зарегистрировался” “Комментарии” поетому прописываем шесть тегов <td > </ td> по горизонтали.

 

<tr><td></td><td></td><td></td><td></td><td></td></tr>

У нас появится шесть чистых ячеек которые нужно заполнить данными.

Давайте заполнять первое поле “Сайт” указываем “Zura-Blog” между первыми тегами прописываем слово <td> Zura-Blog </ td>, и у нас появится название сайта в первой ячей.

Правда вид не “ахти”, так как текст не помещается в ячейку, поэтому сейчас заберем ширину в теге “table”, и у нас все значения автоматически будут помещаться в ячейку (растягивая ячейку)

 

tabl1

⇑текст не вміщується в ячейку

⇓тому зараз заберемо ширину в тегу “table”

tabl2

Теперь второе поле “Тиц”, на моем блоге он 10, назад сделаем чтобы эта ячейка отличалась от других, чтобы выделялась нужно сделать символ жирным, для этого поменяем теги <td> </ td> на <th> </ th> в ячейке

это один на примере где применяют теги “th”, применили замечательно 10-ка теперь выделяется жирной, дальше нужно предоставить ячейке фон, например красный.

В тегу “th” прописываем атрибут bgcolor = “” который должен отвечать за цвет фона, в кавычках указываем код цвета.

 

tabl3

надати ячейці фон червоний

Далее те же действия, заполняем данным третье поле, четвертое, пятое, шестое. “Ранк” “Ссылка” “Зарегистрировался” “Комментарии”.

Затем следующую строку из тегов “tr” и с ячеек теги “td”, и для  особой ячейки на которой вы должны разместить жирный текст, ето тег “th” 

 

<tr><td>Zura-Blog</td><th bgcolor= “#FF3300”>10</th><td>0</td><td>http://ruszura.in.ua</td><td>Es</td><td>Recomendation</td></tr>

tabl4

Получилось, но следовало бы еще сделать как следует, это символы обозначающие “0” и “Es”, разместить в центре ячейки.

Как это сделать, в тегах где находятся эти значения, прописать атрибут align = “center”

<td align = “center”> Es </ td> <td align = “center”> 0 </ td>

Вот и получили результат.

 

tabl5

отримали результат

На этом буду закругляться, в принципе в этой статье объяснения уже настолько розтолковано, что очень тяжело не понять, как создать таблицу, если вам на блоге в редакторе WordPress потребуется небольшая таблица, то теперь вы без проблем себе создадите красивую с цветами.

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

До встречи.

 

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

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