Красивая таблица для хостинга разберем детали


Как работать с таблицей в индизайн.



Как просто и быстро создать таблицу в онлайн сервисе

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

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

Сегодня будем разбираться как создать таблицу онлайн несколькими методами. Все они подойдут для организации трудового процесса над сайтом.

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

Предположим, вы создаете свою «Базу трастовых сайтов», благодаря которой любой владелец сайта может быстро и бесплатно повысить ранги тИЦ и PR. Предложите посетителям дополнить ее полезными ссылками! Так вы сможете получить много новых и полезных линков быстро и особенно не заморачиваясь.

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

Google Диск

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

Заходите в свою почту на gmail.com и в категории «Сервисы» выбираете раздел «Диск».

Далее в верхнем левом углу нажимаете кнопку «Создать» и в ней кнопку «Таблица».

Открывается знакомый всем интерфейс в excel. Сюда вам и нужно будет ввести данные.

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

Даете название, если это необходимо.

Далее включаете доступ по ссылке.

И просто копируете ее из появившегося окна.

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

Чтобы распечатать созданный вами документ нажмите вкладку «Файл» и выберите «Печать».

Яндекс Диск

Если вы читали мою статью про лучшие облачные сервисы, то наверняка помните, что я предпочитаю сервис от Яндекса. И здесь вы также просто можете создать свою красивую таблицу. Давайте я покажу как сделать это онлайн прямо в Яндексе.

С помощь «Диска» и без установки дополнительных программ можно создавать красивые таблицы как в Word или том же Excel.

Для начала необходимо войти в Яндекс Диск, ввести данные почты и пароль, затем кликнуть на кнопку «Создать» и теперь выбрать программу.

О экселе я уже рассказал, теперь давайте поработаем с вордом. Откроется окно, так в стандартной программе Microsoft Word на компьютере.

Далее в панели задач нужно открыть вкладку «Вставка». Вы увидите много инструментов для работы, чтобы создать таблицу необходимо найти вкладку «Таблицы». Открывается окно, и на выбор можно создать таблицу по определённому количеству ячеек. Не переживайте, далее вы сможете добавить строки и столбцы, если это будет необходимо.

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

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

Ваша таблица сохранится на сервере и вы можете дать на нее ссылку другому человеку. Как это сделать мы с вами уже обсуждали.

Таблица для сайта

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

К сожалению, я не нашел ни одного хорошего источника. Лучшим из них оказался проект Compare Ninjа . Заходите на сайт, в верхней панели задач выбираете вкладку Generator. Заполняете поля, нажимаете кнопку «Next», а дальше начинается полнейший геморрой. Ситуация усугубляется еще и тем, что ресурс на английском языке.

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

Поэтому я рекомендую вам воспользоваться более здравым решением. Курс Евгения Попова « Основы CSS ». Просто послушайте и посмотрите как работает человек, не обязательно сразу бросаться выполнять какие-то задания или делать таблицы. Узнайте чуть больше и у вас не возникнет проблемы в том, чтобы потом воплотить любую задумку.

Если вам нужна простенькая красивая таблица-рисунок, то вы можете сделать его в Photoshop. Пошаговая инструкция уже есть в моем блоге.

Если вам понравилась эта статья – подписывайтесь на рассылку и узнавайте больше. До новых встреч и удачи в ваших начинаниях.

Красивое оформление таблиц

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

Так будет выглядеть наша основная структура таблицы:

У нас присутствуют все элементы, которые нужны для таблицы: header, body и footer.
В данном уроке мы будем оформлять сравнительные таблицы тарифов хостинга. В примере будет три разных варианта оформления таблиц. Применить тот или иной стиль можно очень просто, нужно лишь добавить к таблице класс table1, table2 или table3.

Стиль 1 - .table1

Первая таблица будет в зеленых тонах с градиентом для описательных ячеек, элменты th.
Начнем с общего стиля для таблицы:

Мы хотим, чтобы между ячейками таблицы было некоторое пространство, поэтому применим свойство border-collapse:separate,

У элементов th шапки будет такой стиль:Для Firefox и Webkit браузеров мы использовали градиент из трех цветов. С помощью border-radius закргуляем верхнюю левую и верхнюю правую границу ячеек.

Теперь займемся элементом th, который пустой:Низ или footer таблицы будет ииметь следующий стиль:Просто добавляем тень для улучшения текста.
Внутренние ячейки таблицы будут иметь светло-зеленый фон и белую тень для текста:Также добавим небольшой радиус и границу, всего 2px к ячейкам. Это создаст небольшой светящийся эффект. Мы могли бы использовать и box-shadow для создания похожего эффекта.
Теперь, мы будем добавлять иконку ко всем ячейкам, у которых есть SPAN с классом .check. Достигается это добавлением такого стиля:Свойство content позволяет нам добавлять определенный контент внутри элемента (в данном случае это изображение). Также мы могли бы добавить какой-то текст сюда. В этом случае мы можем использовать псевдо-классы ::after или ::before, которые вставят текст после или перед контентом.

Стиль 2 - .table2

Вторая таблица будет чуть по элегантнее. Черный header и footer. В этой таблице не будет пустого пространство между ячейками.

Верх и низ таблицы (header и footer) будут иметь одинаковый вид, поэтому определим общий стиль для них:Элемент th - описание footer будет иметь такой стиль:
Ячейки footerа, для которых мы уже создали общий с ячейками headerа стиль, будут иметь другое свойство box-shadow. У хедера тень падает вверх, у футера же тень будет падать вниз. Также изменим и цвет текста:Вернемся к хедеру, и укажем, что если ячейка пустая, то она не должна иметь ни каких стилей, то есть назначим такие:И для последнего элемента ячейки хедера уберем правую границу:Для первой ячейки хедера и последней ячейки тела таблицы уберем границы:Теперь добавим стили для ячеек являющихся описанием ячеек тела таблицы, т.е. внутренняя часть левого столбца:А такие стили для ячеек тела таблицы:И вставим иконку до элемента SPAN.

Стиль 3 - .table3

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

Общий стиль для всех ячеек th в хедере будет таким:Пустые ячейки будут без фона и границ:А теперь мы хотим выбрать конкретные ячейки th в хедере и ячейки td в футере и придать каждой из них свой уникальный вид. Пользоваться будем селектором :nth-child( номер ):Стиль для всех ячеек футера будет таким:Добавим внутренние отступы для ячеек:Строка с ценами будет у нас с более крупным и жирным шрифтом:Колонки тела таблицы будут иметь альтернативный стиль, поэтому будем снова использовать селектор :nth-child, но в этот раз со значениями even и odd:Добавим правую границу для последних td в строке:Описание слевой части имеет такой стиль:И добавляем иконку:Ну вот и все три варианта разобраны.

Таблицы в HTML

Тема сегодняшней статьи — создание таблиц, их изменение. Научу делать фон, покажу как сделать таблицу с нуля, объединить ей ячейки, выровнять текст и сделать заголовок. Будет интересно!

Применение таблиц в HTML (см. также что такое html?) достаточно широкое. Можно применять их не только как логичную и понятную для человеческого глаза структуру данных в ячейках, строках и столбцах. При помощи таблиц можно еще очень удобно поместить информацию на странице.

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

Что-то вроде этого и наблюдается при применении табличной верстки. Перейдем к практике.

Как в HTML сделать таблицу

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

Для добавления на страницу таблицы используется тег

. Это основной и главный контейнер, в который помещают элементы таблицы (строки и столбцы). И этот контейнер нужно закрывать —
.

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

Строки таблицы ( ) должны быть помещены строго между . А столбцы таблицы ( ) в свою очередь помещаются строго между тегами .

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

), начало строки ( ), четыре ячейки ( ), конец таблицы (
), конец строки (
).

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

Я поставил ширину таблицы 400 и, как видите, первая и третья ячейка выделены жирным и выравниваются по центру. Остальные — по левому краю. Я рекомендую всегда уделять достаточное количество времени форматированию кода, чтобы не запутаться в нем. В маленькой таблице это может не играть большой роли, но вот в большой…

Давайте немного подробнее о ширине, раз я ее упомянул. Ширина таблицы задается атрибутом width, высота — height. Изменять подобным образом можно не только ширину и высоту таблицы, но и размеры ячеек (они все должны помещаться в таблицу, иначе браузер не поймет, что вы от него хотите).

Эти значения (ширина и высота) задаются в пикселях, процента. Можно оставить и так, ничего не писать, браузер подумает, что вам лень было писать «px» и сочтет цифру за пиксели.

Ну а если вы хотите выровнять содержимое одной или нескольких табличных ячеек, — используйте атрибут align со значениями left, center, right. Это горизонтальное выравнивание, а есть еще вертикальное и у него свой отдельный атрибут — valign, который может принимать значения: baseline (вертикальное выравнивание точно по базовой линии), bottom (по нижнему краю), middle (значения ячеек будут выравнены вертикально по середине), top (по верхнему краю). По умолчанию браузеры выравнивают ячейки по центру (середине).

Увеличиваем рамку (границы) таблицы и меняем ее цвет

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

Согласитесь, как-то не очень. Но это не проблема для тех, кто уже знаком с HTML-атрибутом border, который я и использовал в примерах в начале поста.

Добавляем всего 1 атрибут и становится уже получше:

Это как в Экселе! Представьте, что не было бы разделения ячеек линиями (сеткой)? Ну ужас же. А вот что будет, если выставить border, равный 10.

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

Давайте изменим цвет этой рамки, ведь для этого тоже есть атрибут — bordercolor. Установим его значение равным «d3d3d3». Результат:

Как сделать отступы в таблице

Отступы в таблице также нужны для повышения «читаемости», как и границы ячеек. Для создания отступов нам понадобится атрибут «cellspacing». Я буду по прежнему работать с нашей 4х4 таблицей, применяя к ней этот атрибут. Актуализирую код для вас (я привожу только одну строку, чтобы не загромождать пост):

Это были отступы снаружи ячеек. Но есть похожий атрибут для задания отступов внутри ячеек — cellpadding, сейчас я сделаю его также равным 10 и вы увидите, как увеличилось расстояние от содержимого ячейки до ее границ (пришлось сделать количество ячеек поменьше, чтобы таблица не разрасталась чрезмерно). Код:

Теперь уберем «cellspacing» и оставим только «cellpadding». Результат:

Вот и разобрались с тем как создать отступы в таблице и управлять ими. Отлично! Если Вас интересуют как делать перенос строки, то об этом написано здесь.

Как грамотно объединить ячейки в таблице

Для объединения ячеек в вашей таблице также есть специальные атрибуты. Это «colspan» и «rowspan». Первый (colspan) объединяет ячейки по столбцам (горизонтали), второй (rowspan) — по строкам или по вертикали. Давайте объединим что-нибудь в нашей таблице.

Здесь внимательно! При объединении ячеек, вам нужно уменьшить их количество на то число (минус один), которое вы прописываете в параметрах атрибута. Если вы будете создавать таблицу в HTML, объединять ячейки не удаляя лишние, то сайт будет ехать. Объединяем две — удаляем одну. Объединяем три — удаляем две. И так далее.

При слиянии ячеек в колонках или столбцах, одну ячейку нужно удалять! И делать это столько раз, сколько ячеек вы объединяете. Сейчас покажу на примере.

При слиянии ячеек в колонках или столбцах, одну ячейку нужно удалять! И делать это столько раз, сколько ячеек вы объединяете.

Сейчас покажу на примере. Вот наша текущая таблица:

Давайте объединим ячейки с номерами «1 и 2», «5 и 9», «4, 8, 12», «6 и 7». Смотрите как круто получилось, я сам не ожидал!

Принцип объединения такой.

При горизонтальном объединении ячейки номер 1 и 2, нужно в первой прописать «colspan=»2″», содержимое второй поместить в первую (мы же объединяем) и удалить вторую ячейку (или скрыть ее от HTML как это сделал я — потом покажу.)

При вертикальном объединении ячеек номер 4, 8, 12, нужно в первой ячейке (номер 4) прописать «rowspan=»2″», а содержимое остальных удалить, предварительно поместив в объединенную ячейку.

Вот какой получился у меня код. Я скрыл ячейки для наглядности (чтобы вам было более понятно), но можно и удалить их.

Надеюсь понятно объяснил и привел хороший пример.

Как сделать заголовок у таблицы

Чтобы задать таблице заголовок — используйте теги после начала таблицы (

), но до начала тега . Вот что получается:

Ну и небольшой HTML-хак для тех, кому нужно разместить заголовок таблицы под самой таблицей. Используйте атрибут align со значением bottom вот так:

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

Итак, мы рассмотрели почти все, за исключением… Фона!

Как сделать красивый фон у ячейки или всей таблицы

HTML позволяет задать цвет не только у всего фона таблицы, но и у каждой отдельной ячейки (если есть такая потребность). Устанавливает цвет фона таблицы или ячейки атрибут «bgcolor».

Давайте я сначала задам фон для всей таблицы. Это будет цвет «»lightgreen»» (а вообще можно задать его и вот так — «»#90EE90″»). Вот так теперь у меня начинается таблица:

Ого, цвет фона ячеек стал очень даже «»lightgreen»». Теперь покрашу одну из ячеек таблицы обратно в белый, присвоив ей такой же атрибут, только с другим цветом:

По-моему круто! Если бы я участвовал в конкурсе креативных таблиц (или обучения дошкольников HTML) — точно бы победил.

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

Отзывы

Михаил
Соломон
Эвелина
Варфоломей
taibaddsifac1994

Написать отзыв

Success! Your message has been sent.