Пыльца сосны Россия
Инструкция
Все нюансы сборки, переработки, заготовки и применения.
-- Купить пыльцу --

Таблица HTML. Всё о таблицах

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

Таблицы HTMl — очень интересный элемент.

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

Например, до появления CSS, все сайты верстались таблицами в несколько слоёв. Пример многослойной таблицы: Код сайта на чистом HTML.

Таблица может состоять из множества слоёв, в неё, при желании, вставляются изображения и скрипты, а с появлением CSS возможности оформления таблиц ещё расширились.

Поэтому давайте разберём, как эти таблицы создаются с самого начала.

Теги таблицы.

Для создания таблицы применяются теги:

<table></table> — контейнер таблицы
<tr></tr> — строчки таблицы
<th></th> — столбики таблицы
<td></td> — ячейки таблицы
<thead></thead>, <tbody></tbody>, <tfoot></tfoot> — группируют несколько строк (tr) таблицы, для придания им общего оформления, применяются в основном для вёрстки сайта, допускается использовать каждый тег только один раз в указанной последовательности.

Код таблицы записывается следующим образом:


<table>
<tr><th></th><th></th><th></th><th></th></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
</table>

Вручную, при таких повторениях, пишется только первая пара тегов.

Всё остальное делается при помощи копирования, так что если кто ещё не научился, тренируйтесь виртуозно копировать. Пригодится.

Внесём данные в теги th и td


<table>
<tr><th>One</th><th>Two</th><th>Three</th><th>Four</th></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1a</td><td>2a</td><td>3a</td><td>4a</td></tr>
<tr><td>1b</td><td>2b</td><td>3b</td><td>4b</td></tr>
<tr><td>1c</td><td>2c</td><td>3c</td><td>4c</td></tr>
</table>

Вот что отобразится в браузере.

Уже можно понять что это таблица, но не доработанная.

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

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

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

Атрибуты таблицы.

1. width — ширина таблицы.

2. frame — создаёт границы вокруг таблицы.

3. align — выравнивание таблицы на странице.

4. border — создаёт рамку таблицы и ячеек.

5. bordercolor — цвет рамки.

6. bgcolor — цвет фона таблицы.

7. background — фоновый рисунок в таблице.

8. cellpadding — расстояние между рамкой и содержимым ячейки.

9. cellspacing — расстояние между ячейками.

10. rules — отменяет действие атрибута cellspacing.

11. summary — краткое описание таблицы

12. cols — указывает число столбцов, чем ускоряет загрузку таблицы.

13. colspan — объединяет ячейки по горизонтали.

14. rowspan — объединяет ячейки по вертикали.

Атрибуты указывают на определённое действие.

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

Прежде чем перейти к оформлению таблицы, должен предупредить.

Если ваш сайт управляется CMS, то в стилях шаблона скорее всего уже задано оформление таблиц, и если что-то менять, то начинать это делать нужно будет в файле style.css.

Стили для таблиц можно вводить как в файл style.css, так и непосредственно в тег <table>, и другие теги таблицы.

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

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

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

В чём отличие атрибута style от тега style можно узнать в статье Style html тег и атрибут

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

Рассмотрим по порядку.

Ширина таблицы

может быть задана во всех доступных в web единицах размеров.

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


Файл style.css

table{
width: 100%;
}

Прямое включение

<table style="width: 100%;">....</table>

Границы и рамки таблицы.

Рамки и границы — основной элемент таблиц. Задаётся свойством css border.

Свойством border можно создать как рамку вокруг элемента, так и границу по сторонам элемента.

Для этого в название добавляется указание стороны, с которой будет отображаться граница: border-left, border-right, border-top, border-bottom.

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

Внешний вид рамки задаётся значениями. Как это делается смотрите в статьях Создание рамок средствами CSS и Рамки html


Файл style.css

table{
border: 2px solid #777;
}

Прямое включение

<table style="border: 2px solid #777;">
..........
</table>

Теперь зададим рамку для каждой ячейки.


Файл style.css

table{
border: 2px solid #777;
}
td, th{
border:2px solid #777;
}

Прямое включение

<table style="border: 2px solid #777;">
<tr>
<th style="border:2px solid #777;">Oдин</th>
<th style="border:2px solid #777;">Два</th>
<th style="border:2px solid #777;">Три</th>
<th style="border:2px solid #777;">Четыре</th>
</tr>
<tr>
<td style="border:2px solid #777;">1</td>
<td style="border:2px solid #777;">2</td>
<td style="border:2px solid #777;">3</td>
<td style="border:2px solid #777;">4</td>
</tr>
<tr>
<td style="border:2px solid #777;">1а</td>
<td style="border:2px solid #777;">2а</td>
<td style="border:2px solid #777;">3а</td>
<td style="border:2px solid #777;">4а</td>
</tr>
<tr>
<td style="border:2px solid #777;">1b</td>
<td style="border:2px solid #777;">2b</td>
<td style="border:2px solid #777;">3b</td>
<td style="border:2px solid #777;">4b</td>
</tr>
<tr>
<td style="border:2px solid #777;">1c</td>
<td style="border:2px solid #777;">2c</td>
<td style="border:2px solid #777;">3c</td>
<td style="border:2px solid #777;">4c</td>
</tr>
</table>

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

Можно сделать рамки разной толщины и формы для каждой ячейки.

Если кажется, что прямое включение сложновато, то это только по началу.

А так всё просто — пишется только одна строка, всё остальное делается копированием. Меняются только данные в ячейках.

Чтоб убрать отступы и разделить ячейки таблицы одной линией, в тег table вводится свойство border-collapse со значением collapse


Файл style.css

table{
border: 2px solid #777;
border-collapse: collapse;
}

Прямое включение

<table style="border: 2px solid #777; border-collapse: collapse;">
..........
</table>

Фон, цвет рамки, стиль шрифта

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

Например


<table style="border:5px solid blue;">
<tr style="background:#FFE4B5;">
<th style="border:2px solid #228B22;">Oдин</th>
<th style="border:2px solid #228B22;">Два</th>
<th style="border:2px solid #228B22;">Три</th>
<th style="border:2px solid #228B22;">Четыре</th>
</tr>
<tr style="background:#FFDAB9;">
<td style="border:2px solid #00FF7F;">1</td>
<td style="border:2px solid #00FF7F;">2</td>
<td style="border:2px solid #00FF7F;">3</td>
<td style="border:2px solid #00FF7F;">4</td>
</tr>
<tr style="background:#EEE8AA;">
<td style="border:2px solid #00FF7F;">1а</td>
<td style="border:2px solid #00FF7F;">2а</td>
<td style="border:2px solid #00FF7F;">3а</td>
<td style="border:2px solid #00FF7F;">4а</td>
</tr>
<tr style="background:#F0E68C;">
<td style="border:2px solid #00FF7F;">1b</td>
<td style="border:2px solid #00FF7F;">2b</td>
<td style="border:2px solid #00FF7F;">3b</td>
<td style="border:2px solid #00FF7F;">4b</td>
</tr>
<tr style="background:#FFFF00;">
<td style="border:2px solid #00FF7F;">1c</td>
<td style="border:2px solid #00FF7F;">2c</td>
<td style="border:2px solid #00FF7F;">3c</td>
<td style="border:2px solid #00FF7F;">4c</td>
</tr>
</table>

А если убрать border-collapse, то будет так:

Выравнивание и отступы.

а) Выравнивание и отступы на странице.

Для выравнивания таблицы по центру страницы применяется свойство margin со значением auto


Файл style.css

table{
margin: auto;
}

Прямое включение

<table style="margin: auto; border:5px solid blue; border-collapse: collapse;">
..........
</table>

Для выравнивания таблицы по краям страницы, в тег table вводится свойство float, которое принимает значения left или right.

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

Причём, если текст заключён в блочный тег, то ему нужно нужно задать свойство display: inline;, иначе float:left; может не сработать.


Файл style.css

table{
float: left;
border: 5px solid blue;
border-collapse: collapse;
}
p{
display: inline;
}

Прямое включение

<table style="float: left; border:5px solid blue; border-collapse: collapse;">
..........
</table>
<p style="display: inline;">Бла-бла-бла-бла-Бла-бла-бла-бла
Бла-бла-бла-бла-Бла-бла-бла-бла
Бла-бла-бла-бла-Бла-бла
бла-бла</p>

Бла-бла-бла-бла-Бла-бла-бла-бла-Бла-бла-бла-бла-Бла-бла-бла-бла-Бла-бла-бла-бла-Бла-бла-бла-бла-Бла-бла-бла-бла-Бла-бла-бла-бла-Бла-бла-бла-бла-Бла-бла-бла-бла-Бла-бла-бла-бла-Бла-бла-бла-бла-Бла-бла-бла-бла-Бла-бла-бла-бла-Бла-бла-бла-бла-Бла-бла-бла-бла

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

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

Отступы указываются во всех доступных в web единицах длины.

margin: 10px 20px 20px 40px;

Где первая цифра — отступ сверху.

Вторая цифра — отступ справа.

Третья цифра — отступ снизу.

Четвёртая цифра — отступ слева.

При использовании значения auto указываются только три значения

margin: 10px auto 20px;

Первая цифра — отступ сверху.

auto — выравнивание по центру.

Третья цифра — отступ снизу.

б) Выравнивание и отступы внутри таблицы.

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

Для наглядности я увеличу ширину таблицы.


Файл style.css

table{
width: 350px;
border: 5px solid blue;
border-collapse: collapse;
}

Прямое включение

<table style="width: 350px; border:5px solid blue; border-collapse: collapse;">
..........
</table>

Для выравнивания содержания всех ячеек таблицы, применяется свойство text-align которому можно задать значения left, center, right.

Так как по умолчанию браузеры выравнивают текст по левому краю, то в основном используется center.


Файл style.css

table{
text-align: center;
width: 350px;
border: 5px solid blue;
border-collapse: collapse;
}

Прямое включение

<table style="text-align: center; width: 350px; border:5px solid blue; border-collapse: collapse;">
..........
</table>

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

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

Свойство padding вводится в теги th, td.

В значении указываются все доступные в web размеры длины.


Файл style.css

table{
text-align: center;
width: 350px;
border: 5px solid blue;
border-collapse: collapse;
}
th, td{
padding: 10px;
}

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

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


<table style="border:5px solid blue; border-collapse: collapse;">
<tr style="background:#FFE4B5;">
<th style="padding: 10px; border:2px solid #228B22;">Oдин</th>
<th style="border:2px solid #228B22;">Два</th>
<th style="border:2px solid #228B22;">Три</th>
<th style="border:2px solid #228B22;">Четыре</th>
</tr>
<tr style="background:#FFDAB9;">
<td style="padding: 10px; border:2px solid #00FF7F;">1</td>
<td style="border:2px solid #00FF7F;">2</td>
<td style="border:2px solid #00FF7F;">3</td>
<td style="border:2px solid #00FF7F;">4</td>
</tr>
<tr style="background:#EEE8AA;">
<td style="padding: 20px; border:2px solid #00FF7F;">1а</td>
<td style="border:2px solid #00FF7F;">2а</td>
<td style="border:2px solid #00FF7F;">3а</td>
<td style="border:2px solid #00FF7F;">4а</td>
</tr>
<tr style="background:#F0E68C;">
<td style="padding: 25px; border:2px solid #00FF7F;">1b</td>
<td style="border:2px solid #00FF7F;">2b</td>
<td style="border:2px solid #00FF7F;">3b</td>
<td style="border:2px solid #00FF7F;">4b</td>
</tr>
<tr style="background:#FFFF00;">
<td style="padding: 30px; border:2px solid #00FF7F;">1c</td>
<td style="border:2px solid #00FF7F;">2c</td>
<td style="border:2px solid #00FF7F;">3c</td>
<td style="border:2px solid #00FF7F;">4c</td>
</tr>
</table>

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

Объединение ячеек таблицы.

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

Хотя выполнит её с помощь css можно, но это будет настолько заморочно, что атрибуты объединения ещё долго будут актуальны.

Атрибуты объединения ячеек применяются к тегам th, td.

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

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


<table style="border:5px solid blue; border-collapse: collapse;">
<tr style="background:#FFE4B5;">
<th colspan="2" style="padding: 10px; border:2px solid #228B22;">Oдин</th>
<th colspan="2" style="border:2px solid #228B22;">Два</th>
</tr>
<tr style="background:#FFDAB9;">
<td style="padding: 10px; border:2px solid #00FF7F;">1</td>
<td style="border:2px solid #00FF7F;">2</td>
<td style="border:2px solid #00FF7F;">3</td>
<td style="border:2px solid #00FF7F;">4</td>
</tr>
<tr style="background:#EEE8AA;">
<td style="padding: 10px; border:2px solid #00FF7F;">1а</td>
<td style="border:2px solid #00FF7F;">2а</td>
<td style="border:2px solid #00FF7F;">3а</td>
<td style="border:2px solid #00FF7F;">4а</td>
</tr>
<tr style="background:#F0E68C;">
<td style="padding: 10px; border:2px solid #00FF7F;">1b</td>
<td style="border:2px solid #00FF7F;">2b</td>
<td style="border:2px solid #00FF7F;">3b</td>
<td style="border:2px solid #00FF7F;">4b</td>
</tr>
<tr style="background:#FFFF00;">
<td style="padding: 10px; border:2px solid #00FF7F;">1c</td>
<td style="border:2px solid #00FF7F;">2c</td>
<td style="border:2px solid #00FF7F;">3c</td>
<td style="border:2px solid #00FF7F;">4c</td>
</tr>
</table>

Для объединения ячеек по вертикали применяется атрибут rowspan, в значении которого указывается число объединяемых ячеек.


<table style="border:5px solid blue; border-collapse: collapse;">
<tr style="background:#FFE4B5;">
<th colspan="2" style="padding: 10px; border:2px solid #228B22;">Oдин</th>
<th colspan="2" style="border:2px solid #228B22;">Два</th>
</tr>
<tr style="background:#FFDAB9;">
<td rowspan="2" style="padding: 10px; border:2px solid #00FF7F;">1</td>
<td style="border:2px solid #00FF7F;">2</td>
<td style="border:2px solid #00FF7F;">3</td>
<td style="border:2px solid #00FF7F;">4</td>
</tr>
<tr style="background:#EEE8AA;">
<td style="padding: 10px; border:2px solid #00FF7F;">2а</td>
<td style="border:2px solid #00FF7F;">3а</td>
<td style="border:2px solid #00FF7F;">4а</td>
</tr>
<tr style="background:#F0E68C;">
<td rowspan=2" style="padding: 10px; border:2px solid #00FF7F;">1b</td>
<td style="border:2px solid #00FF7F;">2b</td>
<td style="border:2px solid #00FF7F;">3b</td>
<td style="border:2px solid #00FF7F;">4b</td>
</tr>
<tr style="background:#FFFF00;">
<td style="padding: 10px; border:2px solid #00FF7F;">2c</td>
<td style="border:2px solid #00FF7F;">3c</td>
<td style="border:2px solid #00FF7F;">4c</td>
</tr>
</table>

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

Фоновые изображения и картинки в таблицу.

Фоновое изображение в таблицу вставляется с помощью стилевого свойства background-image.


В файле style.css
table{
background-image:url(images/168.png);
text-align: center;
border:5px solid blue;
width: 80%;
border-collapse: collapse;
}
Прямое включение
<table style="
background-image:url(images/168.png);
text-align: center;
width: 80%;
border:5px solid blue;
border-collapse: collapse;
">
..........
</table>

Фоновое изображение можно установить отдельно в любую ячейку таблицы, или в каждую ячейку своё фоновое изображение. Только прямым включением.

Для этого свойство background-image вводится в тег <td>.

Oдин Два
1 2 3 4
1b 2b 3b 4b
2c 3c 4c

Так-же в любую ячейку таблицы можно вставить картинку, не являющуюся фоновой. Только прямым включением.

Картинка вставляется как содержимое ячейки, между тегами <td></td>.

Чтобы картинка не сдвигала содержимое ячейки, делается следующее:

1. В тег <td> вводится стилевое свойство position:relative.

2. В тег <img> вводится стилевое свойство position:absolute, с указанием места для картинки top:0; left:0;


Прямое включение
<table style="
text-align: center;
width: 80%;
border:5px solid blue;
border-collapse: collapse;
">
<tr>
<td rowspan="2" style="
position:relative;
padding: 10px;
border:2px solid #00FF7F;
">
<img src="images/75.png"
style="position:absolute; top:0; left:0;">1</td>
<td style="border:2px solid #00FF7F;">2</td>
<td style="border:2px solid #00FF7F;">3</td>
<td style="border:2px solid #00FF7F;">4</td>
</tr>
..........
</table>
Oдин Два
1 2 3 4
1b 2b 3b 4b
2c 3c 4c

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

Скрипт в таблицу.

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

Позиционируется скрипт так же как картинка.

Для примера вставим в таблицу скрипт текущего времени.

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

Если нет запуска, то можно установить скрипт полностью.


Прямое включение
<table style="
text-align: center;
width: 80%;
border:5px solid blue;
border-collapse: collapse;
">
<tr>
<td rowspan="2" style="
position:relative;
padding: 10px;
border:2px solid #00FF7F;
">
<span id="doc_time" style="
font-family: Arial;
color: #777;
font-style: italic;
font-size:12px;
position:absolute;
top:3px;
left:3px;
"></span>
<script>clock();</script>
1</td>
<td style="border:2px solid #00FF7F;">2</td>
<td style="border:2px solid #00FF7F;">3</td>
<td style="border:2px solid #00FF7F;">4</td>
</tr>
..........
</table>
Oдин Два

1

2 3 4
1b 2b 3b 4b
2c 3c 4c

Формы обратной связи добавляются в таблицу так-же как скрипты и картинки.

Многослойность таблицы.

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

Именно эта возможность в полной мере используется при табличной вёрстке сайта.

Основная таблица

1-я таблица в ячейке основной таблицы
2-я таблица в ячейке основной таблицы. Первая ячейка Вторая ячейка
3-я таблица в ячейке основной таблицы

<table border="1" align="center" style="width:500px; padding:40px; margin-bottom:20px; background: #F4A460">
<tr>Основная таблица
<td style="border-radius:5px; background: #fff">

<table border="1" height="100" style="width:100%; border-radius:5px; background: #7FFFD4">
<tr>
<td>1-я таблица в ячейке основной таблицы</td>
</tr>
</table>

<table border="1" height="300" style="width:100%;">
<tr>
<td style="width:80%; border-radius:5px;">2-я таблица в ячейке основной таблицы. Первая ячейка</td>
<td style="width:20%; border-radius:5px;">Вторая ячейка</td>
</tr>
</table>

<table border="1" height="100" style="width:100%; border-radius:5px; background: #7FFFD4">
<tr>
<td>3-я таблица в ячейке основной таблицы</td>
</tr>
</table>
</td>
</tr>
</table>

Это всё, что нужно знать про таблицы HTML.

Неужели не осталось вопросов? Спросить

Короткий отдых
Перемена

Отец провожает своего сына на курорт - тот едет впервые в жизни...Приехали с деревни на станцию на телеге, отец напутствует:
- Ну шо ж сынку...буть дуже внимательный...Там знаешь какие могут быть женщины коварные...Привезёшь домой заразу!...Заразишь свою жену...Она - меня...Я - твою мать...А ты ж знаешь свою маму - вымрет всё село!

Ссылки в HTML. < < < В раздел > > > Что такое спецсимволы html

Запись опубликована в рубрике HTML основы. Добавьте в закладки постоянную ссылку.
А так же:

26 комментариев на «Таблица HTML. Всё о таблицах»

  1. stariс говорит:

    Привет Бахтияр. Копируйте и создавайте сайт, без проблем. В этом случае с моей стороны претензий не будет. Для того и написано Но вот если я, при очередной проверке, увижу свою статью, не сайт на моём коде, а именно эту статью, на чужом сайте, без ссылки на источник, то есть на этот сайт, то тогда буду принимать меры.

  2. Бахтияр говорит:

    Здравствуйте, Сергей! У меня такой вопрос: можно ли мне скопировать код вашего сайта (в общем) и сделать собственный поменяв ссылки, фотографии в общем поменять всё, кроме дизайна (в смысле создать уже собственный сайт с этим же дизайном)? Просто скопировав весь код в конце я заметил один текст: Копирование и переписывание информации с сайта без письменного согласия с администрацией сайта https://sekretymastera.ru запрещено. Авторские права на все тексты, картинки, дизайн, логотип, дизайн сайта https://sekretymastera.ru принадлежат Кутузову Сергею Юрьевичу.

  3. stariс говорит:

    Я уж не смогу подсказать. Нужно на форумы идти и спрашивать. Может что у него в настройках есть.

  4. DARKINWORCER говорит:

    поправочка у меня не нотпад а простой блокнот там все работает а в саблайме нет вот почему незнаю

  5. DARKINWORCER говорит:

    у меня сестра есть а её муж профессиональный программист вот и купил мне sublime а код в нем я с нуля делаю

  6. stariс говорит:

    Notepad Тоже ставит, про это есть в моей статье. Я зашёл посмотрел.
    Это же тогда можно использовать этот редактор, когда код уже легко читаешь, чтоб ускорить процесс.

  7. DARKINWORCER говорит:

    sublime даже закрывающие теги сам ставит

  8. DARKINWORCER говорит:

    профессиональный редактор кода

  9. stariс говорит:

    А что такое sublime?

  10. DARKINWORCER говорит:

    в этом то вся и проблема sublime не расставляет картинки в табличку

    даже при вашем коде ничего не меняется

  11. DARKINWORCER говорит:

    эх не получилось у меня то sublime, а в нотпаде все работает

  12. stariс говорит:

    Заходи, время будет.

  13. DARKINWORCER говорит:

    Спасибо вам огромное очень помогли

  14. stariс говорит:

    Вот код. Можешь переписать в Notepad, и откроется такая картинка. Только без ошибок.
    http://trueimages.ru/img/b9/bc/93f72645.png
    Можешь свои картинки подставить.

  15. DARKINWORCER говорит:

    да да именно так мне и надо

  16. DARKINWORCER говорит:

    Мне нужно сделать табличку только в место текста должны быть картинки они свое местоположение не меняют, а мне надо сделать таблицу из 3 строчек и 2 столбцов с 6 блоками в каждом должна быть картинка

  17. stariс говорит:

    Вот смотри:

    Если нужно вставить в комментарий код примерно такой таблицы

    <table>

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

    </table>

    То записывается он так:

    &lt;table&gt;

    &lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;

    &lt;/table&gt;

    Это касается только угловых скобок. Стили вставляются так как есть.

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

    Сколько мне присылали код, всегда или скобка, или кавычка пропущена, или в слове ошибка, например вместо u пишут y, и т.д.

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

  18. DARKINWORCER говорит:

    Что-то я не совсем со скобками для вставки кода разбираюсь приведите какой нибудь пример пожалуйста

  19. stariс говорит:

    Здесь тоже в &gt точки с запятой не хватает, и открывающая — &lt

  20. stariс говорит:

    Вот всё что я вижу.

  21. DARKINWORCER говорит:

    &gt div id=»sidebar»>

    </div &gt

  22. DARKINWORCER говорит:

    &lt

    &gt
    &gt

  23. DARKINWORCER говорит:

    хорошо учту

  24. stariс говорит:

    Игорёк, ещё раз прошу, вместо угловых скобок, в комментарии ставь спецсимволы: открывающая скобка — &lt;, закрывающая — &gt;. До меня твой код не доходит. Так уж WP устроен.

  25. DARKINWORCER говорит:

    я попробовал сделать таблицу с картинками вместо текста

    у меня картинки друг на друга наплывают и ничего с этим поделать не могу

    я вот так написал
    пока что

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

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