Когда я только начинала изучать как и многие из вас все детали,что такое коды,как ставить,где ставить-возникало много вопросов и ведь каждый раз требовались ответы на них.Я сама столкнулась и ещё столкнусь уверена,что бывает нужно спросить и не у кого...Как неохотно отвечают на вопросы новичков уже "повзрослевшие" пользователи,как будто и сами не были чайниками.Нет времени и это понятно.Ведь нужно всё разжевать и понятным языком объяснить,куда,как и для чего... Многие не знают
Как расположить несколько элементов на страничке рядом друг с другом.Например,как выставить рядом картинки,смайлики или снежинки...Я тоже раньше не могла и спрашивать было некого,лишний раз не хотела раздражать своими вопросами.Сегодня я попробую вам объяснить,как это делать и с помощью чего...Первые шаги так сказать для начинающих,кто только начал делать шаги в области постов с картинками
ИТАК ПОЕХАЛИ:
Пока я знаю только два способа,которые подходят для картинок, флешек, часиков, линеечек и так далее
Первый способ: МЕЖДУ КОДАМИ ДВУХ КАРТИНОК ВСТАВЬТЕ НЕРАЗРЫВНЫЙ ПРОБЕЛ
ПРИМЕР:<код первой кнопки> <код второй кнопки> <код третьей кнопки>
Но учтите: этот способ не работает, если вы хотите поставить что-то рядом с табличкой.Например,под картинкой поставить код.
Второй способ намного сложнее:
Ниже я выложила коды табличек,так же вы можете сами их выстраивать.Но для этого нужен ещё один урок.
А пока для примера вот вам работа для размышлений,они помогут вам понять структуру кодов и помогут в работе.
Поехали:
Вот табличка из 2 столбцов и 3 строк
Вот так будет выглядеть расклад ваших картинок или кнопок,состоящих из 2-х столбиков и в три строки.
|
Первая строка, первый столбец |
Первая строка, второй столбец |
|
Вторая строка, первый столбец |
Вторая строка, второй столбец |
|
Третья строка, первый столбец |
Третья строка, второй столбец |
.
Вот код этой таблицы
<table style="width: 100%; text-align: left; margin-left: auto; margin-right: auto;" border="0" cellpadding="2" cellspacing="2"> <tbody> <tr> <td style="text-align: center;" valign="undefined">Первая строка, первый столбец</td> <td style="text-align: center;" valign="undefined">Первая строка, второй столбец</td> </tr> <tr> <td style="text-align: center;" valign="undefined">Вторая строка, первый столбец</td> <td style="text-align: center;" valign="undefined">Вторая строка, второй столбец</td> </tr> <tr> <td style="text-align: center;" valign="undefined">Третья строка, первый столбец</td> <td style="text-align: center;">Третья строка, второй столбец</td> </tr> </tbody> </table>
Вот что получилось у меня...
************************************************
Табличка из 3 столбцов и 3 строк
|
Первая строка, первый столбец |
Первая строка, второй
столбец |
Первая строка, третий столбец |
|
Вторая строка, первый столбец |
Вторая строка, второй столбец |
Вторая строка, третий столбец |
|
Третья строка, первый столбец |
Третья строка, второй столбец |
Третья строка, третий столбец |
Вот код этой таблицы
<table style="width: 100%; text-align: left; margin-left: auto; margin-right: auto;" border="0" cellpadding="2" cellspacing="2"> <tbody> <tr> <td style="text-align: center;" valign="undefined">Первая строка, первый столбец</td> <td style="text-align: center;">Первая
строка, второй столбец</td> <td style="text-align: center;" valign="undefined">Первая строка, третий столбец</td> </tr> <tr> <td style="text-align: center;" valign="undefined">Вторая строка, первый столбец</td> <td style="text-align: center;" valign="undefined">Вторая строка, второй столбец</td> <td style="text-align: center;" valign="undefined">Вторая строка, третий столбец</td> </tr> <tr> <td style="text-align: center;" valign="undefined">Третья строка, первый столбец</td> <td style="text-align: center;" valign="undefined">Третья строка, второй столбец</td> <td style="text-align: center;" valign="undefined">Третья строка, третий столбец</td> </tr> </tbody> </table>Табличка из 4 столбцов и 3 строк
|
Первая строка, первый столбец |
Первая строка, второй столбец |
Первая строка, третий столбец |
Первая строка, четвёртый столбец |
|
Вторая строка, первый столбец |
Вторая строка, второй столбец |
Вторая строка, третий столбец |
Вторая строка, четвёртый столбец |
|
Третья строка, первый столбец |
Третья строка, второй столбец |
Третья строка, третий столбец |
Третья строка, четвёртый столбец |
Вот код этой таблицы
<table style="width: 100%; text-align: left; margin-left: auto; margin-right: auto;" border="0" cellpadding="2" cellspacing="2"><tbody><tr><td style="text-align:
center;" valign="undefined">Первая строка, первый столбец</td><td style="text-align: center;">Первая строка, второй столбец</td><td style="text-align: center;" valign="undefined">Первая строка, третий столбец</td><td style="text-align: center;" valign="undefined">Первая строка, четвёртый столбец</td></tr><tr><td style="text-align: center;" valign="undefined">Вторая строка, первый столбец</td><td style="text-align: center;" valign="undefined">Вторая строка, второй столбец</td><td style="text-align: center;" valign="undefined">Вторая строка, третий столбец</td><td style="text-align: center;" valign="undefined">Вторая строка, четвёртый столбец</td></tr><tr><td style="text-align: center;" valign="undefined">Третья строка, первый столбец</td><td style="text-align: center;" valign="undefined">Третья строка, второй столбец</td><td style="text-align: center;" valign="undefined">Третья строка, третий столбец</td><td style="text-align: center;" valign="undefined">Третья строка, четвёртый столбец</td></tr></tbody></table>
******************************************
Табличка из 2 столбцов и 1 строки
|
Первая строка, первый столбец |
Первая строка, второй
столбец |
Вот код этой таблицы
<table style="width: 100%; text-align: left; margin-left: auto; margin-right: auto;" border="0" cellpadding="2" cellspacing="2"><tbody><tr><td style="text-align: center;" valign="undefined">Первая строка, первый столбец</td><td style="text-align: center;">Первая строка, второй столбец</td></tr></tbody></table>
*****************************************
Табличка из 3 столбцов и 1 строки
|
Первая строка, первый столбец |
Первая строка, второй столбец |
Первая строка, третий столбец |
Вот код этой таблицы
<table style="width: 100%; text-align: left; margin-left: auto; margin-right: auto;" border="0" cellpadding="2" cellspacing="2"><tbody><tr><td style="text-align: center;" valign="undefined">Первая строка, первый столбец</td><td style="text-align: center;"
valign="undefined">Первая строка, второй столбец</td><td style="text-align: center;">Первая строка, третий столбец</td></tr></tbody></table>
******************************************
Табличка из 4 столбцов и 1 строки
|
Первая строка, первый столбец |
Первая строка, второй столбец |
Первая строка, третий столбец |
Первая строка, четвёртый столбец |
Вот код этой таблицы
<table style="width: 100%; text-align: left; margin-left: auto; margin-right: auto;" border="0" cellpadding="2" cellspacing="2"><tbody><tr><td style="text-align: center;" valign="undefined">Первая строка, первый столбец</td><td style="text-align: center;">Первая
строка, второй столбец</td><td style="text-align: center;" valign="undefined">Первая строка, третий столбец</td><td style="text-align: center;" valign="undefined">Первая строка, четвёртый столбец</td></tr></tbody></table>
*************************************
Вот то,чем я сама пользуюсь.Хочу подчеркнуть для тех кто будет применять эти коды в работе:очень осторожно и внимательно.Работа кропотливая и кто уже сталкивался с ними,тот знает.Я отключаюсь полностью,никакого ТВ,потому что малейшая ошибка и всё надо будет начинать заново.Это касается тех,кто будет выставлять свои работы с кодами.Если кому-то что-то не понятно или какие-то трудности,пишите,я обязательно отвечу.И желательно в личку,отвечу обязательно..Особая благодарность клубу "Не хочу быть "чайником"!Только заходя туда и читая в одиночку и методом тыка я освоила эти таблицы,спасибо Диане.
Ещё один момент,если выставляете много картинок,линеек,разделителей,то понятно,что нужно использовать код несколько раз.
Удачи всем!!!
Arnusha
