Дневник Предпринимателя "inDV"
УстановитеFlash player
On-Line Радио от автора Дневника Предпринимателя "inDV" для действующих и начинающих предпринимателей и бизнесменов.

Формат радиостанции: All Talk

Жанры: House, Trap, Dubstep, Drum&Bass

Сейчас в эфире: Загрузка ...

  • Подписаться на статьи

    Введите свой Email-адрес:

    Подписавшись, вы будете получать все новые статьи себе на почту сразу после их публикации.
Рубрики: Интернет-Бизнес | Разработка | 08.05.2016 | 18:55 | 89 Просмотров

как сделать таблицу на сайте

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

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

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

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

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

Как сделать таблицу на сайте, без знаний HTML кода? (только в WordPress)

Почему я написал: «Только в WordPress?», да потому, что в других CMS я этот способ не проверял, а если решу проверить, то обязательно напишу по этому поводу новую статью, поэтому рекомендую подписаться в боковой колонке, чтобы не упустить об этом новость.

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

У вас установлен на компьютере Microsoft Office? Нет? Тогда установите, потому что нам понадобится Excel. А теперь и сам секрет. Обратите внимание на изображение:

как создать таблицу на сайте

На нем я подготовил таблицу в Excel, и ее сейчас я буду внедрять на сайт безо всяких скриптов и кодов. Я просто выделяю таблицу и нажимаю CTRL + C.

Перехожу в визуальный редактор и вставляю (CTRL + V):

как сделать таблицу на сайте html

Теперь остается настроить видимость границ, перейдя в HTML-редактор (Текст):

как создать таблицу на сайте

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

Для тех, кто хочет разобраться в HTML.

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

Любая таблица начинается с этого кода:

<table>

А заканчивается этим:

</table>

Столбец:

<tr></tr>

Ячейка:

<td></td>

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

Сама таблица:

ячейка ячейка ячейка ячейка
ячейка ячейка ячейка ячейка
ячейка
ячейка ячейка
ячейка

Ее код:

<table style="border-collapse: collapse; width: 240pt;" border="1" width="320" cellspacing="0" cellpadding="0"><colgroup> <col style="width: 48pt;" span="5" width="64" /> </colgroup>
<tbody>
<tr style="height: 15.0pt;">
<td style="height: 15pt; width: 48pt; text-align: center;" width="64" height="20">ячейка</td>
<td style="width: 48pt; text-align: center;" width="64">ячейка</td>
<td class="xl63" style="width: 96pt; text-align: center;" colspan="2" width="128">ячейка</td>
<td style="width: 48pt; text-align: center;" width="64">ячейка</td>
</tr>
<tr style="height: 15.0pt;">
<td style="height: 15pt; text-align: center;" height="20">ячейка</td>
<td class="xl63" style="width: 96pt; text-align: center;" colspan="2" rowspan="4" width="128">ячейка</td>
<td class="xl63" style="width: 48pt; text-align: center;" rowspan="2" width="64">ячейка</td>
<td class="xl63" style="width: 48pt; text-align: center;" rowspan="2" width="64">ячейка</td>
</tr>
<tr style="height: 15.0pt;">
<td style="height: 15pt; text-align: center;" height="20">ячейка</td>
</tr>
<tr style="height: 15.0pt;">
<td style="height: 15pt; text-align: center;" height="20">ячейка</td>
<td class="xl63" style="width: 96pt; text-align: center;" colspan="2" rowspan="2" width="128">ячейка</td>
</tr>
<tr style="height: 15.0pt;">
<td style="height: 15pt; text-align: center;" height="20">ячейка</td>
</tr>
</tbody>
</table>

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

Ширина и высота таблицы и ячеек.

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

Итак, если вы решили задать параметры размера всей таблицы, то прошу обратить внимание на код:

Width – это ширина

Height – это высота

Заключение.

Не все так и сложно, как вы думали, не так ли? Как я и говорил, статья не обещала быть большой, все кратко и понятно. Если вы искали в этой статье коды изменения цветов границ или фона таблицы, то обратитесь на другие сайты, я сторонник того, чтобы все было быстро и чисто, без всяких выкрутасов, да и этот блог посвящен быстрому развитию, процветанию и заработку на своем сайте, поэтому о прелестях мы говорить не будем. На этом я и закончу сегодняшнюю статью о том, как сделать таблицу на сайте. Желаю вам поскорей справить с этим и перейти к главному – написанию статей и их оптимизации! До скорых встреч!

C этой статьей также читают следующие:

Оставить комментарий

Наверх