СОЗДАНИЕ ТАБЛИЦ

Понедельник, 28 Сентября 2015 г. 14:52 + в цитатник

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

Способ первый: между кодами двух кнопок вставьте неразрывный пробел  

Пример: <код первой кнопки> <код второй кнопки> <код третьей кнопки>

Этот способ не работает, если вы хотите поставить что-то рядом с табличкой.

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

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

Табличка из 2 столбцов и 3 строк

Первая строка, первый столбец	Первая строка, второй столбец
Вторая строка, первый столбец	Вторая строка, второй столбец
Третья строка, первый cтолбец	Третья строка, второй столбец

<table<br /> style="width: 100%; text-align: left; margin-left: auto; margin-right: <br /> auto;" border="0" cellpadding="2" cellspacing="2"> <tbody> <br /> <tr> <td style="text-align: center;" <br /> valign="undefined">Первая строка, первый столбец</td> <td <br /> style="text-align: center;" valign="undefined">Первая строка, второй <br /> столбец</td> </tr> <tr> <td style="text-align: <br /> center;" valign="undefined">Вторая строка, первый столбец</td> <br /> <td style="text-align: center;" valign="undefined">Вторая строка, <br /> второй столбец</td> </tr> <tr> <td <br /> style="text-align: center;" valign="undefined">Третья строка, первый <br /> столбец</td> <td style="text-align: center;">Третья строка, <br /> второй столбец</td> </tr> </tbody> </table>

Табличка из 3 столбцов и 3 строк
<table<br /> style="width: 100%; text-align: left; margin-left: auto; margin-right: <br /> auto;" border="0" cellpadding="2" cellspacing="2"> <tbody> <br /> <tr> <td style="text-align: center;" <br /> valign="undefined">Первая строка, первый столбец</td> <td <br /> style="text-align: center;" valign="undefined">Первая строка, второй <br /> столбец</td> </tr> <tr> <td style="text-align: <br /> center;" valign="undefined">Вторая строка, первый столбец</td> <br /> <td style="text-align: center;" valign="undefined">Вторая строка, <br /> второй столбец</td> </tr> <tr> <td <br /> style="text-align: center;" valign="undefined">Третья строка, первый <br /> столбец</td> <td style="text-align: center;">Третья строка, <br /> второй столбец</td> </tr> </tbody> </table>

Первая строка, первый столбец	Первая строка, второй столбец	Первая строка, третий столбец
Вторая строка, первый столбец	Вторая строка, второй столбец	Вторая строка, третий столбец
Третья строка, первый столбец	Третья строка, второй cтолбец	Третья строка, третий столбец

<table<br /> style="width: 100%; text-align: left; margin-left: auto; margin-right: <br /> auto;" border="0" cellpadding="2" cellspacing="2"> <tbody> <br /> <tr> <td style="text-align: center;" <br /> valign="undefined">Первая строка, первый столбец</td> <td <br /> style="text-align: center;">Первая строка, второй столбец</td> <br /> <td style="text-align: center;" valign="undefined">Первая строка, <br /> третий столбец</td> </tr> <tr> <td <br /> style="text-align: center;" valign="undefined">Вторая строка, первый <br /> столбец</td> <td style="text-align: center;" <br /> valign="undefined">Вторая строка, второй столбец</td> <td <br /> style="text-align: center;" valign="undefined">Вторая строка, третий <br /> столбец</td> </tr> <tr> <td style="text-align: <br /> center;" valign="undefined">Третья строка, первый столбец</td> <br /> <td style="text-align: center;" valign="undefined">Третья строка, <br /> второй столбец</td> <td style="text-align: center;" <br /> valign="undefined">Третья строка, третий столбец</td> <br /> </tr> </tbody> </table>

Табличка из 4 столбцов и 3 строк
<table<br /> style="width: 100%; text-align: left; margin-left: auto; margin-right: <br /> auto;" border="0" cellpadding="2" cellspacing="2"> <tbody> <br /> <tr> <td style="text-align: center;" <br /> valign="undefined">Первая строка, первый столбец</td> <td <br /> style="text-align: center;">Первая строка, второй столбец</td> <br /> <td style="text-align: center;" valign="undefined">Первая строка, <br /> третий столбец</td> </tr> <tr> <td <br /> style="text-align: center;" valign="undefined">Вторая строка, первый <br /> столбец</td> <td style="text-align: center;" <br /> valign="undefined">Вторая строка, второй столбец</td> <td <br /> style="text-align: center;" valign="undefined">Вторая строка, третий <br /> столбец</td> </tr> <tr> <td style="text-align: <br /> center;" valign="undefined">Третья строка, первый столбец</td> <br /> <td style="text-align: center;" valign="undefined">Третья строка, <br /> второй столбец</td> <td style="text-align: center;" <br /> valign="undefined">Третья строка, третий столбец</td> <br /> </tr> </tbody> </table>

Первая строка, первый столбец	Первая строка, второй столбец	Первая строка, третий столбец	Первая строка, четвёртый столбец
Вторая строка, первый столбец	Вторая строка, второй столбец	Вторая строка, третий столбец	Вторая строка, четвёртый столбец
Третья строка, первый столбец	Третья строка, второй столбец	Третья строка, третий столбец	Третья строка, четвёртый столбец

<table<br /> style="width: 100%; text-align: left; margin-left: auto; margin-right: <br /> auto;" border="0" cellpadding="2" <br /> cellspacing="2"><tbody><tr><td style="text-align: <br /> center;" valign="undefined">Первая строка, первый <br /> столбец</td><td style="text-align: center;">Первая строка, <br /> второй столбец</td><td style="text-align: center;" <br /> valign="undefined">Первая строка, третий столбец</td><td <br /> style="text-align: center;" valign="undefined">Первая строка, <br /> четвёртый столбец</td></tr><tr><td <br /> style="text-align: center;" valign="undefined">Вторая строка, первый <br /> столбец</td><td style="text-align: center;" <br /> valign="undefined">Вторая строка, второй столбец</td><td <br /> style="text-align: center;" valign="undefined">Вторая строка, третий <br /> столбец</td><td style="text-align: center;" <br /> valign="undefined">Вторая строка, четвёртый <br /> столбец</td></tr><tr><td style="text-align: <br /> center;" valign="undefined">Третья строка, первый <br /> столбец</td><td style="text-align: center;" <br /> valign="undefined">Третья строка, второй столбец</td><td <br /> style="text-align: center;" valign="undefined">Третья строка, третий <br /> столбец</td><td style="text-align: center;" <br /> valign="undefined">Третья строка, четвёртый <br /> столбец</td></tr></tbody></table>

<table<br /> style="width: 100%; text-align: left; margin-left: auto; margin-right: <br /> auto;" border="0" cellpadding="2" <br /> cellspacing="2"><tbody><tr><td style="text-align: <br /> center;" valign="undefined">Первая строка, первый <br /> столбец</td><td style="text-align: center;">Первая строка, <br /> второй столбец</td><td style="text-align: center;" <br /> valign="undefined">Первая строка, третий столбец</td><td <br /> style="text-align: center;" valign="undefined">Первая строка, <br /> четвёртый столбец</td></tr><tr><td <br /> style="text-align: center;" valign="undefined">Вторая строка, первый <br /> столбец</td><td style="text-align: center;" <br /> valign="undefined">Вторая строка, второй столбец</td><td <br /> style="text-align: center;" valign="undefined">Вторая строка, третий <br /> столбец</td><td style="text-align: center;" <br /> valign="undefined">Вторая строка, четвёртый <br /> столбец</td></tr><tr><td style="text-align: <br /> center;" valign="undefined">Третья строка, первый <br /> столбец</td><td style="text-align: center;" <br /> valign="undefined">Третья строка, второй столбец</td><td <br /> style="text-align: center;" valign="undefined">Третья строка, третий <br /> столбец</td><td style="text-align: center;" <br /> valign="undefined">Третья строка, четвёртый <br /> столбец</td></tr></tbody></table>

"Запасные строчки"
Табличка из 2 столбцов и 1 строки

Первая строка, первый столбец

Первая строка, второй столбец

Первая строка, первый столбец

Первая строка, второй столбец

Первая строка, третий столбец

Первая строка, первый столбец

Первая строка, второй столбец

Первая строка, третий столбец

Первая строка, четвёртый столбец

<table<br /> style="width: 100%; text-align: left; margin-left: auto; margin-right: <br /> auto;" border="0" cellpadding="2" <br /> cellspacing="2"><tbody><tr><td style="text-align: <br /> center;" valign="undefined">Первая строка, первый <br /> столбец</td><td style="text-align: center;">Первая строка, <br /> второй столбец</td><td style="text-align: center;" <br /> valign="undefined">Первая строка, третий столбец</td><td <br /> style="text-align: center;" valign="undefined">Первая строка, <br /> четвёртый столбец</td></tr></tbody></table><table<br /> style="width: 100%; text-align: left; margin-left: auto; margin-right: <br /> auto;" border="0" cellpadding="2" <br /> cellspacing="2"><tbody><tr><td style="text-align: <br /> center;" valign="undefined">Первая строка, первый <br /> столбец</td><td style="text-align: center;">Первая строка, <br /> второй столбец</td><td style="text-align: center;" <br /> valign="undefined">Первая строка, третий столбец</td><td <br /> style="text-align: center;" valign="undefined">Первая строка, <br /> четвёртый столбец</td></tr></tbody></table>

Ответы на возможные вопросы:

1. У меня не получается! - Все коды рабочие, пробуйте ещё раз и будьте внимательны.

2. Получается некрасиво!- Сделайте все кнопки (или другие объекты) одного размера, уберите лишние пробелы, которые вы случайно добавили. Попробуйте не переходить из HTML-режима в режим "с оформлением".

3. Помогите, я - "чайник", дайте готовый код с моими кнопками! - Это клуб для тех, кто думает и учится, а не для того, чтобы кто-то делал это за вас.

*********************************************************************************

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

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

Больше на эту тему мне сказать нечего.

UPD от : Есть более легкий вариант всего лишь код, но применять его надо с осторожностью.

<nobr>все,<br /> заключенное в этот контейнер будет находиться на одной строке. <br /> Применять с осторожностью, можно деформировать пост.</nobr>

источник: clubs.ya.ru

********************************************************************************

СТРОИМ ТАБЛИЦУ. УРОК ОТ ДЖУЛИИ

Построим простейшую таблицу, состоящую из одной строки и двух столбцов.
<table><tr><td>Текст1</td><td>Текст2</td></tr></table>

Текст1

Текст2

Теперь добавим рамку к нашей таблице. Для этого нужно в тег <table> добавить border="3" Этот параметр определяет ширину бордюра таблицы. Усли нужна рамка толщиной 10 пиксель то 3 меняем на 10. А если мы хотим сделать нашу таблицу на каком-нибудь фоне, то добавим к таблице параметр background и укажем адрес нашего фона

<table border="3" background="//s60.radikal.ru/i170/0905/cf/597b1b96c0fc.jpg"><tr><td>Текст1</td><td>Текст2</td></tr></table>

Текст1

Текст2

Теперь создадим вот такую таблицу

Первая строка. Текст1	Первая строка. Текст2
Последняя строка. Текст1	Последняя строка. Текст2
Текст1	Текст2

<table border="1" width="100%"><thead align="left"><tr><td>Первая строка. Текст1</td><td>Первая строка. Текст2</td></tr></thead><thead align="right"><tr><td>Последняя cтрока.Текст1</td><td>Последняя строка. Текст2</td></tr></thead><tbody align="center"><tr><td>Текст1</td><td>Текст2</td></tr></tbody></table>

В первой строке текст размещен слева, в последней строке - справа, а в центральной строке - посередине

Таблица с заголовками

Тег <th> предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная.

Располагается этот тег только внутри тега <tr>

<table border="1" width="70%"><tbody align="center"><tr><th>Заголовок1</th><th>Заголовок2</th></tr><tr><td>Текст1</td><td>Текст2</td></tr></tbody></table>

Заголовок1	Заголовок2
Текст1	Текст2

Объеденим несколько ячеек таблицы. Для этого в теге <td> нужно указать colspan - объединяет горизонтальные ячейки, rowspan - вертикальные

Объеденим 2 ячейки первой строки в одну ячейку

<table border="1" width="70%"><tbody align="center"><tr><td colspan="2" rowspan="1">Текст1</td></tr><tr><td>Текст2</td><td>Текст3</td></tr></tbody></table>

Текст1
Текст2	Текст3

Объеденим 2 ячейки первого столбца в одну ячейку

<table border="1" width="70%"><tbody align="center"><tr><td colspan="1" rowspan="2">Текст1</td><td>Текст2</td></tr><tr><td>Текст3</td></tr></tbody></table>

Текст1	Текст2
	Текст3

Параметры тега <table> cellpadding - отступ от рамки до содержимого ячейки и cellspacing- расстояние между ячейками.

<table border="1" cellspacing="10" cellpadding="30"><tbody align="center"><tr><td>Текст1</td><td>Текст2</td></tr><tr><td>Текст3</td><td>Текст3</td></tr></tbody></table></td></tr></table>

Текст1	Текст2
Текст3	Текст3

Желаю удачи!
Источник: blogs.mail.ru/mail/moisin/tag/%ef%ee%ec%ee%f9%fc%20%e1%eb%ee%e3%e3%e5%f0%f3

************************************************

Таблица

<table border="1" width="300"> <tr align="center"><td width="60">1 ячейка</td> <td width="60">2 ячейка</td> <td width="60">3 ячейка</td> </tr><tr align="center"> <td width="60">4 ячейка</td> <td width="60">5 ячейка</td> <td width="60">6 ячейка</td> </tr><tr align="center"> <td width="60">7 ячейка</td> <td width="60">8 ячейка</td> <td width="60">9 ячейка</td></tr></table></b></em></font></center></strong> </fieldset></center></font></td></tr></table>

Серия сообщений "Шаблоны":
Часть 1 - Меняем цвет под определённым участком текста
Часть 2 - Делаем рамочку с картинками
...
Часть 14 - ОКОШКИ ДЛЯ КОДОВ
Часть 15 - Как на ЖЖ сделать ссылку на человека или сообщество
Часть 16 - СОЗДАНИЕ ТАБЛИЦ
Часть 17 - Создание таблиц и картинки в ряд
Часть 18 - Работа с картинками
...
Часть 39 - Полоски или линии которыми можно украсить свой текст
Часть 40 - КОДЫ ОСНОВНЫХ КНОПОЧЕК
Часть 41 - Все о бегущем тексте. Примеры и коды.

Рубрики:

Уроки

Метки: таблицы уроки шаблоны

Процитировано 8 раз
Понравилось: 5 пользователям

<a href="https://www.liveinternet.ru/users/mangiana/post372889461/">РЎРћР—Р”РђРќРР• РўРђР‘Р›РР¦</a><br/>
	
		Р’ РїРѕСЃР»РµРґРЅРёРµ РЅРµСЃРєРѕР»СЊРєРѕ РґРЅРµР№ РѕРґРёРЅ РёР· СЃР°РјС‹С… РїРѕРїСѓР»СЏСЂРЅС‹С… РІРѕРїСЂРѕСЃРѕРІ, РєРѕС‚РѕСЂС‹Р№ РјРЅРµ Р·Р°РґР°РІР°Р»Рё &quot;РљР°Рє РїРѕСЃС‚Р°РІРёС‚СЊ РєРЅРѕРїРєРё СЂСЏРґРѕРј, Р° РЅРµ СЃС‚РѕР»Р±РёРєРѕРј?&quot;. РќРёР¶Рµ РїСЂРёРІРѕР¶Сѓ РґРІР° СЃРїРѕСЃРѕР±Р°, РєРѕС‚РѕСЂС‹Рµ РїРѕРґС…РѕРґСЏС‚ С‚Р°РєР¶Рµ РґР»СЏ РєР°СЂС‚РёРЅРѕРє, С„Р»РµС€РµРє, С‡Р°СЃРёРєРѕРІ, Р»РёРЅРµРµС‡РµРє Рё РІСЃРµРіРѕ С‚РѕРіРѕ, С‡С‚Рѕ РІС‹ РїСЂРёРґСѓРјР°РµС‚Рµ.
		
		 РЎРїРѕСЃРѕР± РїРµСЂРІС‹Р№: РјРµР¶РґСѓ РєРѕРґР°РјРё РґРІСѓС… РєРЅРѕРїРѕРє РІСЃС‚Р°РІСЊС‚Рµ РЅРµСЂР°Р·СЂС‹РІРЅС‹Р№ РїСЂРѕР±РµР» &amp;nbsp;
		
		РџСЂРёРјРµСЂ: &lt;РєРѕРґ РїРµСЂРІРѕР№ РєРЅРѕРїРєРё&gt;&amp;nbsp;&lt;РєРѕРґ РІС‚РѕСЂРѕР№ РєРЅРѕРїРєРё&gt;&amp;nbsp;&lt;РєРѕРґ С‚СЂРµС‚СЊРµР№ РєРЅРѕРїРєРё&gt;
		
		РС‚РѕС‚ СЃРїРѕСЃРѕР± РЅРµ СЂР°Р±РѕС‚Р°РµС‚, РµСЃР»Рё РІС‹ С…РѕС‚РёС‚Рµ РїРѕСЃС‚Р°РІРёС‚СЊ С‡С‚Рѕ-С‚Рѕ СЂСЏРґРѕРј СЃ С‚Р°Р±Р»РёС‡РєРѕР№.
		
		РЎРїРѕСЃРѕР± РІС‚РѕСЂРѕР№: РЅР°СЂРёСЃСѓР№С‚Рµ С‚Р°Р±Р»РёС‡РєСѓ Рё РїРѕРјРµСЃС‚... <a href="https://www.liveinternet.ru/users/mangiana/post372889461/">Р§РёС‚Р°С‚СЊ РґР°Р»РµРµ...</a>

Комментировать

« Пред. запись — К дневнику — След. запись »

Страницы: [1] [Новые]

ЕЛАНОЧКА обратиться по имени Понедельник, 28 Сентября 2015 г. 18:32 (ссылка)

Спасибо большое за пост.

Ответить С цитатой В цитатник

Вторник, 29 Сентября 2015 г. 00:20ссылка

MANGIANA

Пожалуйста, Еланочка !

Ответить С цитатой В цитатник Обратиться по имени

Milagry обратиться по имени Вторник, 29 Сентября 2015 г. 13:08 (ссылка)

Обычно код кнопки или картинки начинается с (img scr=), а перед началом кода стоит (br/) (здесь вместо круглых скобок должны быть <>). В этом случае все кнопки или картинки будут располагаться столбиком. Нужно удалить эти все br/ со скобками перед началом кода кнопки или картинки и они будут один за другим в ряд. Не всегда нужна табличка. Иногда нужно разместить просто по порядку их. Я обычно так делаю.
Спасибо за пост, очень полезные формулы даже не для новичков. Забираю в копилочку.

Ответить С цитатой В цитатник

Вторник, 29 Сентября 2015 г. 14:39ссылка

MANGIANA

На здоровье ! Благодарю за отзыв !

Ответить С цитатой В цитатник Обратиться по имени