<MyRusakov.ru />

Профессия Web-разработчик

Профессия Web-разработчик

Этот комплект за 8 месяцев превратит Вас в Web-разработчика с нуля. Учиться достаточно 1 час в день.

Начнёте Вы с HTML, CSS и вёрстки сайтов. Потом перейдёте к программированию и JavaScript. Затем изучите PHP, MySQL, SQL, Python. Изучите Web-фреймворки Laravel и Django. Создадите 5 своих сайтов для портфолио.

Комплект содержит:

- 540 видеоуроков

- 110 часов видео

- 1205 заданий для закрепления материала из уроков

- 5 финальных тестов

- 7 сертификатов

- 12 Бонусных курсов

Подробнее
Подписка

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

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

Создание таблиц в HTML

Создание таблиц в HTML

В этой статье Вы познакомитесь с важнейшим моментом при создании своего сайта - таблицами!

Я думаю, что Вы обратили внимание на то, что в предыдущих статьях мы не занимались выравниванием, если, конечно, не считать выравнивание по левому краю, по центру и по правому краю браузера. Собственно, этого крайне недостаточно для красивого оформления страницы. Яркий тому пример - наша форма, которую мы создали в предыдущей статье. Как можно видеть, форма ОЧЕНЬ НЕРОВНАЯ. Вот, как раз для того, чтобы выравнивать элементы страницы более точно, чем просто по краям браузера, и были придуманы html таблицы.

Давайте для начала создадим простую html таблицу.

Но прежде, чем это делать, давайте восстановим код, который у нас остался после создания формы, то есть вот этот: Создание форм в HTML

Принцип создания таблиц в html таков: создаётся таблица, потом создаётся строка, потом все столбцы данной строки, потом очередная строка, снова все очередные столбцы данной строки и так далее.

Таблица создаётся с помощью тега <table>, а заканчивается тегом </table>. Это, думаю, понятно. У таблицы есть строки и столбцы, поэтому их необходимо создать. Теперь согласно принципу создания таблиц, необходимо создать строку. Строка создаётся с помощью тега <tr>. Соответственно, сигналом к окончанию строки является закрывающий тег </tr>. Внутри тега <tr> необходимо создавать столбцы, которые создаются с помощью тега <td>. И уже внутри этого тега находятся те элементы, которые должны быть расположены внутри данной ячейки. После того, как все элементы уложили, то можно закрывать столбец с помощью тега </td>. Дальше открывается новый тег <td>. В него снова помещаются элементы, после этого закрывается </td>. Это сигнал к концу второго столбца. И так далее, столько столбцов, сколько Вам нужно. В конце закрывается строка тегом </tr>. Затем следующая строка и так далее. А заканчивается всё закрывающим тегом </table>.

Чтобы стало понятнее, давайте сразу после формы напишем следующие строки:

<table>
  <tr>
    <td>(1, 1)</td>
    <td>(1, 2)</td>
  </tr>
  <tr>
    <td>(2, 1)</td>
    <td>(2, 2)</td>
  </tr>
</table>

Здесь мы создали таблицу, состоящую из двух строк (два тега <tr>) и двух столбцов (по два тега <td> в каждом теге <tr>). В качестве элемента я решил взять обычный текст, в виде координат ячейки. Соответственно, первая цифра означает номер строки, а вторая - номер столбца. Это был яркий пример таблицы.

Теперь поговорим об атрибутах. Сначала атрибуты тега <table>.

1) Атрибут "border", значение которого задаёт толщину рамки таблицы в пикселях. По умолчанию, рамки вообще нет. Давайте поставим значение этого атрибута в "2".

2) Атрибуты "width" и "height" задают ширину и высоту таблицы соответственно. Размер может быть указан, как в абсолютных единицах (пиксели, px), так и в относительных (проценты, %). Относительный размер, чем хорош, так это тем, что он всегда подстроится под любое разрешение монитора пользователя и любой браузер. А абсолютные тем хороши, что при любых браузерах и любых разрешениях монитора не будет сюрпризов с дизайном, связанные, например, с растягиванием элементов (если монитор широкоэкранный, к примеру). Какой выбрать: решать Вам, но я, лично, предпочитаю, в основном, относительные размеры, изредка разбавляя абсолютными, в зависимости от ситуации. Давайте поставим значение атрибутов "width" и "height" по "30%".

Думаю, что атрибутов Вам дал достаточно. Таким образом, тег <table> выглядит так:

<table border = "2" width = "30%" height = "30%">

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

Теперь поговорим об атрибутах тега <tr>:

1) Атрибут "height". Заметьте, что у тега <tr> нет атрибута "width", впрочем, это логично, ведь тег <tr> отвечает за строку, а, следовательно, за высоту. А за ширину отвечают столбцы.

Собственно, даже атрибут "height" не особо-то и используется, поэтому можно сказать, что атрибутов у тега <tr> и вовсе нету.

Наиболее богатым по количеству атрибутов является тег <td>, отвечающий за ячейку таблицы:

1) Атрибут "width". Объяснение то же, что и для атрибута тега <tr>. Соответственно, атрибута "height" нет.

2) Атрибут "colspan". Значение этого атрибута означает количество столбцов, которое занимает данная ячейка. Поставьте этот атрибут в значение "2", где у нас координаты "(1, 1)". Сразу посмотрите на результат.

3) Атрибут "rowspan". Значение этого атрибута означает количество строк, которое занимает данная ячейка. Поставьте этот атрибут в значение "2", где координаты "(1, 2)". Сразу посмотрите на результат.

4) Атрибут "align". Значение этого атрибута означает выравнивание элемента внутри ячейки по горизонтали. Бывают три значения: "left" (по левому краю), "center" (по центру), "right" (по правому краю). По умолчанию стоит выравнивание по левому краю. Давайте выравняем координаты "(1, 1)" по центру, а координаты "(2, 1)" по правому краю. Посмотрите результат.

5) Атрибут "valign". Значение этого атрибута означает выравнивание элемента внутри ячейки по вертикали. Снова имеются только три значения: "top" (по верху), "middle" (по середине), "bottom" (по низу). По умолчанию стоит значение "middle". Давайте поменяем значение этого атрибута у элемента "(2, 1)" на "top". А также у элемента "(2, 2)" поставим значение "bottom". Сразу посмотрите на результат.

Таким образом, Ваша таблица имеет такой HTML-код:

<table border = "2" width = "30%" height = "30%">
  <tr>
    <td colspan = "2" align = "center">(1, 1)</td>
    <td rowspan = "2">(1, 2)</td>
  </tr>
  <tr>
    <td align = "right" valign = "top" >(2, 1)</td>
    <td valign = "bottom">(2, 2)</td>
  </tr>
</table>

В принципе, с теорией всё. А вот на практике необходимо научиться применять эти знания. И в качестве практики, мы сейчас выравняем нашу форму. Для начала сотрите все теги <br>, так как теперь на новую строку у нас будет переходить тег <tr>.

Теперь помещаем всё содержимое формы в таблицу, то есть сразу после тега <form> пишем тег <table>, а сразу перед тегом </form> закрываем таблицу с помощью тега </table> (не забываем про принцип вложенности!). Рекомендую поставить временно рамку у таблицы, чтобы видеть, как всё выравнивается, и как делится общее пространство между элементами таблицы.

Теперь каждую строку формы помещаем в отдельный тег <tr>. И делаем два столбца: первый для описания элемента, а второй для самого элемента формы. И так делаем вплоть до <textarea>.

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

Далее всё помещаем в одну строку и одну ячейку, но шириной эта ячейка будет в два столбца.

Вот и всё, что необходимо знать для успешного использования таблиц, а дальше лишь надо набивать руку. Я Вам скажу так: таблица наиболее часто используемая возможность при создании HTML-страницы, и без них не обходится почти ни один сайт. Правда, таблицы и наиболее сложная тема в основных знаниях по HTML, для усвоения которой необходимо потренироваться, а также избавиться от стереотипа о том, что элементом таблицы может быть только текст (уж, так нас научили в школе, учебниках и вообще в жизни). И когда Вы избавитесь от этого стереотипа и поймёте, что под элементом может подразумеваться не только текст, но и картинки, ссылки, формы, элементы формы, и даже целые таблицы, тогда можно считать, что дело сделано.

С уважением, Михаил Русаков.

P.S. Если Вы хотите узнать больше по HTML, то посмотрите мой бесплатный курс с примером создания сайта на HTML: http://srs.myrusakov.ru/html

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (97):

XAXATyH2007 XAXATyH2007 15.03.2011 21:55:42

Миша не получается таблица куда именно вставлять вот это <table> <tr> <td>(1, 1)</td> <td>(1, 2)</td> </tr> <tr> <td>(2, 1)</td> <td>(2, 2)</td> </tr> </table> ???

Ответить

Admin Admin 15.03.2011 21:58:27

Таблица, скорее всего, получается, но чтобы её увидеть, добавьте в <table> атрибут border: <table border='1' width='100%'><tr> <td>(1, 1)</td> <td>(1, 2)</td> </tr> <tr> <td>(2, 1)</td> <td>(2, 2)</td> </tr></table> После этого у таблицы появится рамка, и она станет отчётливо видна.

Ответить

848484 848484 04.02.2019 16:17:14

Михаил зацените такую табличку с формой <!DOCTYPE html> <!-- OPEN THIS FILE IN IE6+ --> <html lang="ru"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf8"> <meta http-equiv="pragma" content="no-cache"> <meta name="author" content="Muhammadrasul Abdulhayev"> <meta name="copyright" content="Muhammadrasul Abdulhayev"> <meta name="generator" content="Sublime text"> <meta name="description" content="Form"> <meta name="keywords" content="form"> <meta name="Publisher-Email" content="[email protected]"> <meta name="Publisher-URL" content="http://www.site.ru"> <meta name="revisit-after" content=" 15 days"> <meta name="robots" content="noindex, follow"> <link rel="stylesheet" type="text/css" href="style2.css"> </head> <body> <h1>Заполните форму &dArr;</h1> <div align="left"> <form name="form1" action="script/request.php"> <table width="40%" height="30%" border="5" align="center"> <tr> <td><b>Ваше имя:</b></td> <td colspan="2"><input type="text" name="firstname" title="Напишите ваше имя:"></td> </tr> <tr> <td><b>Ваша эл. почта:</b></td> <td colspan="2"><input type="text" name="e-mail" title="Напишите адрес эл. почты"></td> </tr> <tr> <td><b>Ваш пароль:</b></td> <td colspan="2"><input type="password" name="pass" title="пароль"></td> </tr> <tr> <td><b>Номер вашего тел-а:</b></td> <td colspan="2"><input type="text" name="phone number" title="Ваш номер телефона"></td> </tr> <tr> <td><b>Выберите свой возраст:</b></td> <td colspan="2"><select name="choice"> <option value="1">9-18</option> <option value="2">19-28</option> <option value="3">29-38</option> <option value="4">39-48</option> <option value="5">49-58</option> <option value="6">59-68</option> <option value="7">70+</option> </td> </tr> <tr> <td colspan="3"><b>Ваш пол:</b> <input class="mal" type="radio" name="a"><b>Мужчина</b> <input class="mal" type="radio" name="a"><b>Женщина</b> </td> </tr> <tr> <td><b>Вот здесь напишите что нибудь о себе:</b></td><td colspan="2"><textarea name="message" rows="5" cols="35"></textarea></td> </tr> <tr> <td><b>Дата рождения</b></td> <td colspan="2"><input type="text" name="birth" value="ДД/ММ/ГГГГ"></td> </tr> <tr> <td colspan="3"><b>Согласны ли вы с <a href="index.html">условиями пользования?</a></b><input class="mal" type="checkbox" name="yes"></td> </tr> </table> </form> </div> <p><b>Вы ничего нормального не увидите если это Opera или Firefox, только Google Chrome и Internet Explorer показывают всё нормально</b></p> <p><b>С сайта я ничего не брал но форму я создал благодаря ему то есть я обязан дать вам <a href="https://myrusakov.ru" target="_blank">ссылку!!</a></b></p> </body> </html> а вот css файл: body{ color: #000; font: bold; } h1{ color: #000; font: bold 14px; text-align: center; } p{ color: #000; font: bold; } a{ color: #00f; font: italic +1px; } a:hover{ text-decoration: none; color: #f00 } table{ width: 500px; height: 400px; cellpadding: 5px; cellspacing: 5; border-style: 5px solid dashed; border-color: #000; } tr{ background: #fffacd; border: #000 5px dashed solid; width: 10%; height: 7%; } tr:hover{ background-color: #f86f5f; } td{ border: 5px dashed solid; width: 7%; height: 10%; } input{ background-color: #fffacd; margin-left: 10px; width: 250px; border-color: #f00; border-style: 7px solid dashed; border-width: 5px; } input.mal{ width: 100px; border-color: #f00; border-style: 7px solid dashed; border-width: 5px; } textarea{ border-color: #f00; border-style: 7px dashed solid; border-width: 5px; background-color: #fffacd; }

Ответить

XAXATyH2007 XAXATyH2007 15.03.2011 22:06:41

Экспериментировал и получилась какая то фигня вот: <html> <head> </head> <body> <div align = "center"> <table border = "2" width = "30%" height = "30%"> <tr> <td colspan = "2" align = "center"> <form name = "form1" action = "script/request.php" method = "get"> Ваше имя: <input type = "text" name = "firstname" value = "Тут ваше имя"> </td> <td rowspan = "2">Выберите вариант: <select name ="choice"> <option value ="1">Вариант 1 <option value ="2">Вариант 2 <option value ="3">Вариант 3 </select></td> </tr> <tr> <td align = "right" valign = "top" >Напишите что ни будь: <br> <textarea name ="message" rows = "10" cols = "15">Сообщение</textarea></td> <td valign = "bottom"> Вы согласны с нашими правилами: <input type = "checkbox" name = "terms" value = "yes">Да <input type = "checkbox" name = "terms" value = "no">Нет</td> </tr> </table> <form name = "form1" action = "script/request.php" method = "get"> Ваше имя: <input type = "text" name = "firstname" value = "Тут ваше имя"> <br> Ваш пароль: <input type = "password" name "pass" value = "Тут ваш пароль"> <br> Выберите вариант: <select name ="choice"> <option value ="1">Вариант 1 <option value ="2">Вариант 2 <option value ="3">Вариант 3 </select> <br> Напишите что ни будь: <br> <textarea name ="message" rows = "10" cols = "15">Сообщение</textarea> <br> Виберите что ни будь одно: <input type = "radio" name = "choiceradio" value = "1">Вариант 1 <input type = "radio" name = "choiceradio" value = "2">Вариант 2 <input type = "radio" name = "choiceradio" value = "3">Вариант 3 <br> Вы согласны с нашими правилами: <input type = "checkbox" name = "terms" value = "yes">Да <input type = "checkbox" name = "terms" value = "no">Нет <br> <input type = "file" name = "path"> <br> <input type = "button" name = "start" value = "начать"> <br> <input type = "submit" value = "Отправить"> </form> </div> </body> </html>

Ответить

Admin Admin 15.03.2011 22:14:19

У Вас не соблюдается принцип вложенности. У Вас открывается <table> потом открывается <form>, потом закрывается <table> потом открывается ещё один <form>, и только один из двух <form> закрывается. Так что неудивительно, что ничего не получилось. Поэтому здесь надо внимательнейшим образом проверить вложенность тегов и внимательно проверить, все ли парные теги закрываются.

Ответить

nosferatum nosferatum 25.08.2011 11:06:41

Трям, когда пишу код, ставлю в начале страницы <!DOCTYPE html>, использую ff6, вот встал вопрос нужна таблица, но с <!DOCTYPE html> она отображает какая то узкая, если элемент DOCTYPE убираю, то все корректно отображается, в чем может быть проблема? (проблема в том что таблица не расстягивается на всю страницу)

Ответить

Admin Admin 26.08.2011 21:29:15

Для растягивания таблицы на всю страницу у тега <table> есть атрибут width = "100%". Как раз он, и растянет таблицу на всю допустимую ширину.

Ответить

omen333 omen333 19.11.2011 05:08:51

чет я неправельно сделал подскажите как правельно: <html> <head> </head> <body> <table border = "1"> <tr> <td width = "900" height = "400"></td> <td width = "320" height = "400"> <table border "1" align = "right" valign = "bottom"> <tr> <td valign = "bottom"><b>Login:</b></td> <td valign = "bottom"><input type = "text" name = "login"></td> </tr> <tr> <td valign = "bottom"><b>Pass:</b></td> <td valign = "bottom"><input type = "password" name = "pass"></td> </tr> </table> </td> </tr> </table> </body> </html>

Ответить

omen333 omen333 19.11.2011 05:12:16

таблица логина и пароле нехочет вниз опускатса =(

Ответить

Admin Admin 19.11.2011 14:15:48

Атрибуты align и valign надо давать не тегу <table>, а тегу <td>, в котором находится <table>.

Ответить

omen333 omen333 19.11.2011 15:25:37

Спасибо большое а то я себе чють голову не сломал=) Вообще сайт четкий я до етого качал с интернета много учебников html дак там милиард слов написано и нифига непонятно а тут все коротко и ясно спасибо за твой труд !!!

Ответить

Ледяной Ледяной 12.12.2011 21:59:02

Здравствуйте) у меня вопрос, как это сделать все в одной таблице? <html> <head> </head> <body> <div align = "center"> <form name = "forml" action = "script/request.php" method ="post"> <table border = "2" width = "30%" height = "30%"> <tr> <td> Ваше имя:</td> <td> <input type = "text" name = "name" value = " "> </td> </tr> <tr> <td>ваш e-mail: </td> <td> <input type = "text" name ="firstname" value = ""> </td> </tr> <tr> <td> Ваш пароль: </td> <td> <input type = "password" name = "pass" value = ""> </td> </tr> <tr> <td> Повторите пароль: </td> <td> <input type ="password" name = "pass" value = ""> </td> </tr> <tr> <td> Выберите вариант: </td> <td> <select name = "choice"> <option value = "0"> <option value = "1"> Хочу быть модератором <option value = "2"> Хочу быть участником <option value ="3"> Хочу быть зрителем <option value ="4"> Хочу помогать <option value = "5" > Хочу стать администратором </select> </td> </tr> </table> <table border = "2" width = "30%" height = "30%"> <tr> <td align = "center"> Ваши пожелания: </td> </tr> <tr> <td align = "center"><textarea name = "message" rows = "10" cols = "15"> </textarea> </td> </tr> <tr> <td> Кто Вы: <input type = "radio" name = " что угодно" value = "1"> Оптимист <input type = "radio" name = " что угодно" value = "2"> Песемист <input type = "radio" name = " что угодно" value = "3"> Реалист </td> </tr> <tr> <td aling = "center"> Вы согласны с нашими правилами?: <input type = "checkbox" name =" terms" value ="yes"> </td> </tr> <tr> <td align ="center"> По желанию добавляйте фотографию: <input type ="file" name = "path"> </td> </tr> <tr> <td align = "center"> <input type = "submit" value = "Начать"> </td> </tr> <tr> <td align = "center"> <input type = "button" name ="start" value =" Регистрация "> </td> </tr> </table> </form> </body> </html> КОГДА я пытаюсь делать одной таблицей у меня выдает не правильно. не так как у Вас. а вот как: <html> <head> </head> <body> <div align = "center"> <form name = "forml" action = "script/request.php" method ="post"> <table border = "2" width = "30%" height = "30%"> <tr> <td> Ваше имя:</td> <td> <input type = "text" name = "name" value = " "> </td> </tr> <tr> <td>ваш e-mail: </td> <td> <input type = "text" name ="firstname" value = ""> </td> </tr> <tr> <td> Ваш пароль: </td> <td> <input type = "password" name = "pass" value = ""> </td> </tr> <tr> <td> Повторите пароль: </td> <td> <input type ="password" name = "pass" value = ""> </td> </tr> <tr> <td> Выберите вариант: </td> <td> <select name = "choice"> <option value = "0"> <option value = "1"> Хочу быть модератором <option value = "2"> Хочу быть участником <option value ="3"> Хочу быть зрителем <option value ="4"> Хочу помогать <option value = "5" > Хочу стать администратором </select> </td> </tr> <tr> <td align = "center"> Ваши пожелания: </td> </tr> <tr> <td align = "center"><textarea name = "message" rows = "10" cols = "15"> </textarea> </td> </tr> <tr> <td> Кто Вы: <input type = "radio" name = " что угодно" value = "1"> Оптимист <input type = "radio" name = " что угодно" value = "2"> Песемист <input type = "radio" name = " что угодно" value = "3"> Реалист </td> </tr> <tr> <td aling = "center"> Вы согласны с нашими правилами?: <input type = "checkbox" name =" terms" value ="yes"> </td> </tr> <tr> <td align ="center"> По желанию добавляйте фотографию: <input type ="file" name = "path"> </td> </tr> <tr> <td align = "center"> <input type = "submit" value = "Начать"> </td> </tr> <tr> <td align = "center"> <input type = "button" name ="start" value =" Регистрация "> </td> </tr> </table> </form> </body> </html> ЧТО я не правильно сделал???=(

Ответить

Admin Admin 12.12.2011 22:02:23

Вы зачем-то после выпадающего списка закрываете тег <table> и открываете новый. Вот этого делать и не надо.

Ответить

Ледяной Ледяной 12.12.2011 22:03:22

У меня получается по другому, я тоже скинул как получается, посмотрите пожалуйста)

Ответить

Admin Admin 12.12.2011 22:05:25

<tr> <td align = "center"> Ваши пожелания: </td> </tr> - здесь надо добавить colspan="2" То же самое и в остальных местах, где всего одна ячейка в строке.

Ответить

Ледяной Ледяной 12.12.2011 22:12:20

все, заработало хорошо) Спасибо Вам огромное=)

Ответить

selena selena 25.12.2011 18:12:09

приветствую знатоков! помогите советом! перед таблицей на сайте после текста образуется пропуск почти в страницу. сайт сделан на Drupal (сильно не критикуйте, не мое изобретение). решила было улучшить его примитивный внешний вид с помощью таблиц...

Ответить

Pingvusha Pingvusha 10.03.2012 08:52:55

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

Ответить

Admin Admin 10.03.2012 12:14:04

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

Ответить

NightRock NightRock 13.05.2012 13:03:26

Михаил Здравствуйте! возможно я не сюда пишу но у меня вопрос, Генератор для браузерной игры Вы тоже писали как его создать? просто я не все смотрел!на данный момент я изучаю HTML, прикольно, от Души спасибо!!!

Ответить

Admin Admin 13.05.2012 13:08:00

Какой ещё генератор для браузерной игры? Ничего подобного я не писал.

Ответить

NightRock NightRock 13.05.2012 20:32:22

http://myrusakov.ru/sozdanie-tablic-html.html тут на верху в первой картинке, если не сложно, напиши скрипт как создать эту таблицу, я не понял как ее создать!!!

Ответить

Admin Admin 13.05.2012 20:39:17

Достаточно поставить у тега <table> атрибут border="1".

Ответить

Merrick Merrick 17.05.2012 21:47:10

возникли 2 проблемки. строка "вы согласны с нашими правилами" не переносится на следующую, тоесть остается на строке с радио кнопками и в конце кода почему то кнопка "отправить не растягивается на 3 строки" <body> <div align = "center"> <form name = "form1" action = "script/request.php" method = "get"> <table border = "2" width "50%" height = "50%"> <tr> <td>Ваше имя:</td><td> <input type = "text" name = "firstname" value = "Тут ваше имя"></td> </tr> <tr> <td>Ваш пароль:</td><td> <input type = "password" name "pass" value = "Тут ваш пароль"></td> </tr> <tr> <td>Выберите вариант:</td> <td><select name = "choice"> <option value = "1">Вариант 1 <option value = "2">Вариант 2 <option value = "3">Вариант 3 </select></td> </tr> <tr> <td colspan = "2" align = "center">Напишите что-нибудь:</td> </tr> <tr> <td colspan = "2" align = "center"><textarea name = "message" rows = "10" cols = "15">Сообщение</textarea></td> </tr> <tr> <td rowspan = "2">Выберите что-нибудь одно:<input type = "radio" name = "choiceradio" value = "1">Вариант 1 <input type = "radio" name = "choiceradio" value = "2">Вариант 2 <input type = "radio" name = "choiceradio" value = "3">Вариант 3 </td> </tr> <tr> <td>Вы согласны с нашими правилами: <input type = "checkbox" name = "terms" value = "yes"></td> </tr> <tr> <td colspan = "3" align = "center">Выберите файл для загрузки: <input type = "file" name = "path"></td> </tr> <tr> <td colspan = "3" align = "center"><input type = "button" name = "start" value = "Начать"></td> </tr> <tr> <td rowspan = "3" colspan = "3" align = "right" valign = "top"> <input type = "submit" value = "отправить"></td> </tr> </table> </form> заранее спасибо!

Ответить

Admin Admin 17.05.2012 22:50:24

Не переносится на следующую строку, потому что Вы указали в предыдущей строке rowspan="2", но при этом colspan 2 не равен, следовательно, там появляется пустое место, в которое и встаёт эта строка. А кнопка "отправить" не растягивается на 3 строки просто потому, что внизу уже ничего нет.

Ответить

bosna bosna 29.05.2012 22:20:31

Доброго времени! Не получается сделать таблицу, чтоб верхняя и нижняя строки были с разным количеством столбцов. нижняя постоянно выравнивается по верхней, а на верхней появляется дополнительный столбец. Подскажите, где ошибка. второй день бьюсь((( код: <table border = "2" width = '100%'> <tr> <td width = '20%' height = '100px'></td> <td width = '60%'></td> <td width = '20%'></td> </tr> <tr> <td height = '50px'></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table>

Ответить

Admin Admin 29.05.2012 22:35:03

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

Ответить

bosna bosna 29.05.2012 22:41:13

честно говоря, не поняла. <tr> это строка, <td> - столбец, почему в разных строках не может быть разного количества столбцов? или их количество не определяется количеством <td></td>, т.е. сколько раз их повторишь, столько и столбцов будет? я что-то упустила(((

Ответить

Admin Admin 29.05.2012 22:45:06

Сколько раз <td> повторите столько и будет столбцов. Другое дело, что если использовать атрибут colspan, то 1 столбец можно растягивать по ширине на несколько.

Ответить

bosna bosna 29.05.2012 22:45:58

кажется, поняла. спасибо! буду разбираться

Ответить

bosna bosna 29.05.2012 22:58:27

ура! получилось! еще вопрос. как сделать, чтобы между широкой частью таблицы не было бордера, а по краям слева и справа строки разделялись? вот в этом случае: <table border = "2" width = '100%'> <tr> <td height = '100px'></td> <td colspan = '6'></td> <td></td> </tr> <tr> <td height = '50px'></td> <td colspan = '6'></td> <td></td> </tr> </table>

Ответить

Admin Admin 29.05.2012 22:59:57

Это уже значительно сложнее, и нужно использовать CSS.

Ответить

bosna bosna 29.05.2012 23:02:52

поняла, спасибо большое!

Ответить

Mondarin Mondarin 13.06.2012 13:27:47

Михаил,я только недавно начал изучать интернет программирование,мало,что знаю.У меня несколько вопросов:Как сделать чат?Как сделать форму регистрации?Как сделать чтоб когда выбераешь файл для загрузки он сохранялся?И еще я делаю свою мобильную онлайн игру,как сделать рейтинг игроков?Как сделать несколько ботов 3х уровней сложности?Как сделать чтоб когда совершаешь действие начислялся опыт и деньги?Я знаю что большинство из этого можно сделать с помощью Xhtml.Объясните пожалуйста на доступном языке:)

Ответить

Admin Admin 13.06.2012 13:29:41

Игры не создают на HTML вообще. Ещё как-то можно создавать на JavaScript. А на всё остальное один ответ: изучайте PHP, больше пока здесь добавить нечего, что-либо объяснять также бесполезно.

Ответить

Mondarin Mondarin 14.06.2012 17:05:46

А на пхп как создать?Я хтмл и ява скрипты хорошо знаю,а вот пхп попросту непонимаю:(уже и ваши уроки читал и на других хороших сайтах,но просто неврубаюсь:)может объясните простые скрипты для простой игры?

Ответить

Admin Admin 14.06.2012 17:28:30

Не делают игры на PHP. Изучайте лучше Flash тогда.

Ответить

Анэт 05 Анэт 05 12.07.2012 09:26:16

Здравствуйте Михаил. У меня не получается сделать невидимую таблицу указываю table border = "0" все равно таблица видна, а мне нужно что б ее не видно было на страничке.

Ответить

Admin Admin 12.07.2012 11:13:03

Таблица или рамка? Если таблица, то вот это добавьте style="display: none;" в качестве атрибута тега table.

Ответить

Анэт 05 Анэт 05 12.07.2012 11:41:27

а если рамка?

Ответить

Admin Admin 12.07.2012 11:56:42

Если border="0" не работает, значит, возможно CSS-стиль мешает. Для этого пропишите следующее: style="border: none;"

Ответить

DmFedorov DmFedorov 07.02.2013 16:44:44

Миша. А не могли бы вы дать "нестандартный пример" создания таблицы для новичка. Мне бы хотелось иметь html болванку, которая бы выводила таблицу из текстового файла. 2 файла - два столбца. 3 файла - три столбца. или же один файл где столбцы разделены ТАБ-ом. Итог: я имею болванку. В нужном месте в ней указываю адрес файла или файлов и передо мной таблица. Блин и желательно с сортировкой по столбцам. И желательно чтобы вы меня не отсылали, а болванка содержала бы в себе всё. (Css и прочее что надо). Лишь бы работала.

Ответить

Admin Admin 07.02.2013 17:06:13

Можно написать на PHP подобный скрипт, займёт это у опытного где-то 1 час, у новичка (ему это будет вполне по силам) часа 3-4.

Ответить

DmFedorov DmFedorov 07.02.2013 17:14:05

Может потратите этот час. Вы опытный. Поверте везде где я искал такого нет. (а искал много). Везде лишь ссылки и предложения чего учить и рыть. А так чтоб болванка - этого нет. Странно что нет. Наверное это очень не тривиально сделать так как логика требует: Спрашивается зачем мне мучать текст html для правки с кучей тэгов когда я могу поправить чего надо просто в текст-файле. Все эти Гугли-докс сплошное издевательство. И все умные а на поверку чего надо простому человеку - нет. И мне это 100% не по силам раз на просторах инета нет ни одного примера.

Ответить

Admin Admin 07.02.2013 21:01:36

Я впервые слышу такую просьбу, поэтому это не будет никому интересно, по этой причине этого и нет уже. Можете заказать такой скрипт на фрилансе, он обойдётся Вам в 500-700 рублей. Бесплатно, возможно, тоже согласятся самые новички за отзыв.

Ответить

DmFedorov DmFedorov 07.02.2013 21:17:59

Ок. ПО книжке детей урокам учить тоже должен кто-то. Этого нет как я понял потому что сложно. Конечно легче (но только для тех кто действительно верстает сайты) зайти получить набор любых таблиц и плавать в этом омуте, не вникая в суть. Только одна тема сортировки таблиц http://ir2.ru/tabsort1-3.aspx длится несколько лет. И результат не очень. И это отнюдь не текстовый файл который запрягается в html в качестве столбца. Люблю честные ответы. 15 евро не проблема. Но как я понял вы сами не сделаете. Если да моя почта должна быть вам известна.

Ответить

Spartak_Belarus Spartak_Belarus 26.02.2013 21:12:51

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

Ответить

Admin Admin 26.02.2013 21:14:52

Убрать рамку у внутренней таблицы, а если она нужна, то тогда через CSS поставить у td рамки. Либо ещё можно сделать отступы у ячейки, в которой таблицы, тогда вместо двойной рамки будет небольшое место.

Ответить

Spartak_Belarus Spartak_Belarus 26.02.2013 22:01:57

>>>(1)рамки у внутренней нет - ее создают входящие ячейки;>>>(2)У td рамки и так есть - они и создают двойную линию>>>(3)Отступы приводят к разрывам<!--Пока упражнялся с этим, нашел решение - нужен такой стиль>>>table {width: 100%;border-collapse: collapse;border: 1px solid;} td {border: 1px solid;padding: 0px;} td table {border-style: hidden;}

Ответить

Dimas Dimas 11.03.2013 13:53:01

Исправьте орфографическую ошибку: 1) Атрибут "border", значение которого задаёт толщину рамку(рамки!) таблицы в пикселях.

Ответить

Admin Admin 11.03.2013 23:09:15

Спасибо, исправил!

Ответить

AlexMetal01 AlexMetal01 13.04.2013 13:46:45

Михаил, Я почти сделал таблицу, как на картинке сверху, но у меня третья ячейка сильно сжимается, так что её почти не видно. Что делать? Вот мой код: <html> <head> </head> <body text = "green" bgcolor = "yellow"> <div alight = "center"> <form name = "form1" action = "script/reques.php" method = "post"> <table border = "2" width = "99%" height = "80%"> <tr> <td border = "25%" width = "50%" hight = "5%">Ваше имя: <input type = "text" name = "firstname" value = "Тут Ваше имя"</td> <td border = "25%" width = "50%" hight = "5%"> </tr> <tr> <td border = "25%" width = "50%" hight = "5%"> <td border = "25%" width = "50%" hight = "5%"> </tr> <tr> <td border = "25%" width = "50%" hight = "5%"> <td border = "25%" width = "50%" hight = "5%"> </tr> <tr> <td border = "25%" width = "50%" hight = "5%"> <td border = "25%" width = "50%" hight = "5%"> </tr> <tr height = "4%"> <td rowspan = "3" width = "5%" colspan = "1" </td> <td rowspan = "3" width = "5%" colspan = "1" </td> <td rowspan = "3" width = "5%" colspan = "1" </td> </tr> <tr> </tr> <tr> </tr> <tr> </tr> <tr> </tr> <tr> </tr> </table> <center> До пустых строк я ещё не дошёл.

Ответить

Admin Admin 13.04.2013 21:09:40

height, а не hight.

Ответить

JloruH JloruH 13.04.2013 22:24:17

Спасибо за урок, повозиться конечно пришлось, но не сказал бы что сложно)

Ответить

AlexMetal01 AlexMetal01 14.04.2013 12:31:45

Михаил, а для создания сайта нужно знать только язык html или ещё другие? И я поменял hight на height, но один из трех столбиков все равно сплющен.

Ответить

Admin Admin 14.04.2013 14:08:11

Для создания сайта нужно много чего знать. html - это начало только. Чтобы столбики не были сплющены, нужно, чтобы в них что-нибудь было. А все width и height лучше задавать через css.

Ответить

Lomka Lomka 28.04.2013 15:46:59

Михаил, появилась такая проблема: нужно таблицу, которая заполнена данными из бд MySQL отправить или конвертировать(по нажатию кнопки)в документ с форматом doc или pdf или rtf. Самое главное то, что сделать это нужно средствами языка php. Это возможно? если да, то каким образом, подскажите, пожалуйста

Ответить

Admin Admin 28.04.2013 18:12:25

http://myrusakov.ru/php-tcpdf.html

Ответить

GARRETT GARRETT 07.05.2013 23:59:49

Добрый день, есть ваш диск вёрстка сайта с 0 Так вот там задание после урока таблиц "создать табл из 3- столбов и 3 строк" "1 строка шириной 3 столбца" "1 ячекай 2 й строки высотой 2 строки" "3-я строка шириной 3 столбца" всё вроде получается но вот 3 строка не хочет идти на 3 столбца толька на 2. что не так делаю? вот код таблицы <table border="2" width="30%"> <tr> <td colspan="3"> 1 </td> </tr> <tr> <td rowspan="2"> 4 </td> <td> 5 </td> <td> 6 </td> </tr> <tr> <td colspan="3"> 7 </td> </tr> </table>

Ответить

Admin Admin 08.05.2013 11:27:09

Вопросы по курсу задавайте на [email protected]

Ответить

pavell pavell 09.06.2013 19:10:10

Доброго времени суток. А может быть таблица в таблице? я например сверстал сайт табличной вёрсткой а теперь хочу в контенте разместить таблицу но сам контент уже в таблице.

Ответить

Admin Admin 09.06.2013 20:58:32

Да, может.

Ответить

limetan limetan 11.06.2013 01:18:45

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

Ответить

limetan limetan 11.06.2013 08:34:28

<html> <head> <title> мой сайт</title> <meta http-equiv = "content type" content = "text/html";charset = "1251"> </head> <body text = "red" bgcolor = "yellow"> <div align = "center"> <form name = "form1" action = "script/reques.php" method = "post"> <table border = "2" width = "30%" height = "20%"> <tr> <td border="3" width="99%" height="5%"> Ваше имя: <input type = "text" name = "firstname" value = "Тут ваш пароль"></td> <td border="2" width="99%" height="5%"</td> </tr> <tr> <td border = "2" width ="99%" height ="5%">Ваш пароль:<input type = "password" name = "pass" value = "Тут ваш пароль"</td> <td border = "2" width ="99%" height ="5%"</td> </tr> <tr> <td border ="2" width ="99%" height ="5%">Вибирите один из вариантов: <input type = "radio" name = "choiceradio" value = "1">Вариант 1 <input type = "radio" name = "choiceradio" value = "2">Вариант 2 <input type = "radio" name = "choiceradio" value = "3">Вариант 3 </td> <td border ="2" width ="99%" height = "5%"</td> </table> </body> </html> поправте меня что не так я делаю за ранее спс.

Ответить

Admin Admin 11.06.2013 10:03:38

Ваше имя: <input - должны быть в разных <td>, а не в одном.

Ответить

limetan limetan 11.06.2013 13:41:37

а на примере можете показать ? так точно освою и закреплю практикой,за ранее спс,а то не очень понятно как это в разных <td>.

Ответить

Admin Admin 11.06.2013 14:51:28

<tr><td>Ваше имя:</td><td><input type="text" name="name" /></td></tr> - аналогично и другие строки с другими полями.

Ответить

pavell pavell 23.06.2013 13:50:07

Здравствуйте! У меня такая проблема. Я создаю таблицу и в одну из ячеек вставляю картинку но как только вставляю картинку <tr><td><img src = URL alt = картинка> То ячейка сразу становится больше и появляется много свободного места в ячейке. А до того как в ячейке просто текст тогда ячейка нормальная. Я задавал размеры ячейки и в процентах <td width = 15%> и в пикселях пробовал <td width = 230px>. Но бесполезно всё-равно растягивается и много свободного места. Размеры картинки я не задавал. Можно как-то стилями задать?

Ответить

Admin Admin 23.06.2013 14:37:04

Надо размеры картинки устанавливать, чтобы всё было фиксировано.

Ответить

pavell pavell 23.06.2013 19:39:25

Спасибо большое получилось! выставил значение width у картинки 100% и и тогда картинка стала на всю ячейку (я так и расчитовал.

Ответить

Liberty001 Liberty001 29.06.2013 21:35:10

<html> <head> </head> <body> <div align = "center"> <form name = "form1" action = "script/request.php" method = "get"><table border = "1"> <tr><td>Ваше имя:</td> <td><input type = "text" name = "firstname" value = "Тут Ваше имя"></td></tr> <tr><td>Ваш пароль:</td> <td><input type = "password" name = "pass" value = "Тут Ваш пароль"></td></tr> <tr><td>Выберите вариант:</td></tr> <tr><td><select name = "choice"> <option value = "1">Вариант 1 <option value = "2">Вариант 2 <option value = "3">Вариант 3 </select></td></tr> <tr><td colspan = "2" aligin = "center">Напишите что-нибудь:</td></tr> <tr><td aligin = "center"><textarea name = "message" rows = "10" cols = "15">Сообщение</textarea></td><tr> <tr><td rowspan = "2">Выберите что-нибудь одно: <input type = "radio" name = "choiceradio" value = "1">Вариант 1 <input type = "radio" name = "choiceradio" value = "2">Вариант 2 <input type = "radio" name = "choiceradio" value = "3">Вариант 3</td></tr> <tr><td colspan = "2">Вы согласны с нашими правилами: <input type = "checkbox" name = "terms" value = "yes"> Выберите файл для загрузки: <input type = "file" name = "path"> <input type = "button" name = "start" value = "Начать"> <input type = "submit" value = "Отправить"> </table></form></td></tr> <table border = "2" width = "30%" height = "30%"> <tr> <td colspan = "2" align = "center">(1, 1)</td> <td rowspan = "2">(1, 2)</td> </tr> <tr> <td align = "right" valign = "top">(2, 1)</td> <td valign = "bottom">(2, 2)</td> </tr> </div> </body> </html> Здравствуйте Михаил, вот мой код, если вы скопируете его и откроете в браузере, то увидите, что вся таблица странно смещается. Скажите пожалуйста в чем моя ошибка. Заранее спасибо.

Ответить

Admin Admin 30.06.2013 05:58:11

Никаких странностей не вижу.

Ответить

Liberty001 Liberty001 30.06.2013 09:20:40

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

Ответить

Admin Admin 30.06.2013 11:48:56

Первые 2 поля правильные. Проблема начинается с select, его нужно помещать в отдельную ячейку, а не на новую строку. Добейтесь сначала этого, а потом переходите к следующему элементу.

Ответить

natali natali 09.07.2013 13:35:44

Здравствуйте Михаил. Я создала таблицу, (хотела выслать как она выглядит). Одна проблема: все ячейки одной высоты !!! Вот код: <html> <head> <title>9июля рабочий день</title> </head> <body> <table border = "2" width = "80%" height = "100%"> <tr> <td colspan = "8" align = "center">туристам берлина</td> </tr> <tr> <td colspan = "1" align = "center">кнопка </td> <td colspan = "1" align = "center">кнопка </td> <td colspan = "1" align = "center">кнопка </td> <td colspan = "1" align = "center">кнопка </td> <td colspan = "1" align = "center">кнопка </td> <td colspan = "1" align = "center">кнопка </td> <td colspan = "1" align = "center">кнопка </td> <td colspan = "1" align = "center">кнопка </td> </tr> <tr> <td rowspan = "4"colspan = "2" align = "center">наши услуги </td> <td rowspan = "4"colspan = "3" align = "center">картинка</td> <td rowspan = "4"colspan = "3" align = "center">заполните заявку</td> </tr> </table> </body> </html>

Ответить

Admin Admin 09.07.2013 16:18:19

colspan="1" можно и не указывать. Указывать rowspan="4" в последней строке смысла нет. Его нужно указывать в предыдущих строчках.

Ответить

natali natali 09.07.2013 22:02:22

Спасибо. У меня еще такой вопрос: какими должны быть значения width и height для картинки, чтобы эта картинка ложилась ровно по ширине и длинне ячейки? вот я написала не верно, а как правильно??? <td colspan ="4" height="63%"><img src="картинки/мост1" weigth ="30%" height="63%"></td> спасибо )

Ответить

alik alik 28.07.2013 14:12:50

Уважаемый Михаил доброго времени суток при проверки валидности указывают на ошибку (нет атрибута высота,нет атрибута rowspan или нет атрибута alt)в чём дело как исправить зарание спасибо

Ответить

Admin Admin 28.07.2013 23:49:54

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

Ответить

Oleg-yak1 Oleg-yak1 27.08.2013 19:20:53

когда закрашиваю фон в боди, то таблица тоже закрашивается можно как-то незакрашивать таблицу

Ответить

Admin Admin 27.08.2013 20:21:47

Сделать фон в таблице.

Ответить

Инкогнито Инкогнито 13.09.2013 21:43:16

У меня к вам такой вопрос: имею вот такую таблицу <table> <tr> <td colspan = "3"> </td> </tr> <tr> <td colspan = "3"> </td> </tr> <tr> <td> 1-я </td> <td> 2-я </td> <td> 3-я </td> </tr> </table> и мне надо в нутри ячейки где "2-я" сделать еще несколько строк и столбцов не нарушая DOCTYPE xhtml 1.1 или проще говоря как мне зделать таблицу внутри табицы?

Ответить

Admin Admin 14.09.2013 18:01:58

Только добавить ещё один table в ячейку, больше никак.

Ответить

Инкогнито Инкогнито 14.09.2013 18:20:34

Пробовал как бы все нормально работает. Но по проверке на валидность пишет так делать нельзя. Спасибо за ответ.

Ответить

oxob123 oxob123 09.11.2013 21:51:59

Доброго времени суток ,Михаил.Я новичок и наверное это тупой вопрос, но подскажите как мне сделать какой то текст или область шириной в два столбца.И я вообще не могу понять что делать с этой текстовой областью.Заранее спасибо.

Ответить

Admin Admin 10.11.2013 12:32:00

Надо сделать ячейку шириной в 2 столбца, а внутреннее содержимое через CSS сделать width: 100%;

Ответить

mmgfs mmgfs 10.04.2014 19:50:47

Напишите пожалуйста в самом низу урока полностью готовый код, (как в перд. уроке) потому что самому вовек не разобраться. Вот это не понятно """Теперь каждую строку формы помещаем в отдельный тег <tr>. И делаем два столбца: первый для описания элемента, а второй для самого элемента формы. И так делаем вплоть до <textarea>. С текстовой областью поступаем так: во-первых, пояснение (далее буду называть меткой) запихиваем в одну строку, причём ширину делаем в два столбца. Текстовую область на следующей строке таблицы, и также шириной в два столбца. Более того, выравниваем и метку, и текстовую область по центру. Далее всё помещаем в одну строку и одну ячейку, но шириной эта ячейка будет в два столбца"""

Ответить

saira saira 28.05.2014 07:46:06

У вас самые классные уроки!!! Спасибо Вам большое!!!

Ответить

intensiv intensiv 30.11.2014 12:45:22

Здравствуйте, Михаил! Подскажите, пожалуйста! Сделала таблицу- 2 столбца: в одном картинки, в другом текст к картинке. Проблема: текст слазит, он ниже по диагонали от картинки и никак не хочет становится на уровне картинки. В чем может быть причина?

Ответить

alexandrdante alexandrdante 30.11.2014 15:27:19

2 ячейки td в одной текст,в другой картинка - и не будет проблем. если хотите напрямую с картинкой,то надо указывать свойства valign и обтекание

Ответить

intensiv intensiv 30.11.2014 15:47:42

Так я так и сделала, в одной ячейке текст, а в другой картинка, но текст почему-то ниже получается... Вот мой код, может где-то ошибка? <table border="1" cellspacing="0" cellpadding="0"> <tbody> <tr> <td style="text-align: left;" valign="top" width="250"><strong> <a href="http://orphey.com.ua/naidiotlichiya/">Найди отличия</a></strong><a href="http://orphey.com.ua/naidiotlichiya/"><img class="alignright size-full wp-image-2096" alt="Untitled-1" src="http://orphey.com.ua/wp-content/uploads/2014/10/Untitled-12.png" width="150" height="150" /></a></td> <td valign="top" width="350"> <p style="text-align: left;">Такие упражнения для развития внимания очень нравится детям, выполняют они их с большим удовольствием. Для сравнения детям дают две «практически» одинаковые картинки, отличающиеся друг от друга определенным числом деталей, которые нужно найти и отметить. Подробное описание читайте<a href="http://orphey.com.ua/naidiotlichiya/"> здесь</a>.</p> </td> </tr> </tbody> </table> <strong><a href="http://orphey.com.ua/trenirovka-vnimaniya-labirintyi/">Лабиринты</a></strong> <table border="1" cellspacing="0" cellpadding="0"> <tbody> <tr> <td style="text-align: left;" valign="top" width="250"><a href="http://orphey.com.ua/trenirovka-vnimaniya-labirintyi/"><img class="alignright size-full wp-image-2115" alt="Untitled-2" src="http://orphey.com.ua/wp-content/uploads/2014/10/Untitled-2.png" width="150" height="150" /></a></td> <td valign="top" width="350"> <p style="text-align: left;">Ни для кого не секрет, что все дети любят разгадывать лабиринты. И это хорошо, ведь лабиринты – отличная тренировка внимания. Много красочных и интересных лабиринтов можно найти на просторах интернета, просто введите в строку поиска фразу «лабиринты для детей» и среди картинок найдете и распечатаете то, что вам понравилось. Правила читайте <a href="http://orphey.com.ua/trenirovka-vnimaniya-labirintyi/">здесь</a>.</p> </td> </tr> </tbody> </table> <strong><a href="http://orphey.com.ua/memory/">Парочки</a></strong> <table border="1" cellspacing="0" cellpadding="0"> <tbody> <tr> <td style="text-align: left;" valign="top" width="250"><a href="http://orphey.com.ua/wp-content/uploads/2014/10/Untitled-31.png"><img class="alignright size-full wp-image-2142" alt="Untitled-3" src="http://orphey.com.ua/wp-content/uploads/2014/10/Untitled-31.png" width="150" height="150" /></a></td> <td valign="top" width="350"> <p style="text-align: left;">Вот еще одна отличная игра из серии игры для памяти, игры на внимание. В магазинах вы можете встретить ее под названием “Memory”, “Memoria”, “Danko toys” (поспрашивайте в детских магазинах или в канцелярских товарах. Как вариант- можно купить 2 колоды детских игральных карт с картинками и смешать их – получится та же Memory). Игра состоит из парных карточек на различную тематику: техника, животные, сказки и др. Правила игры читайте<a href="http://orphey.com.ua/memory/"> здесь</a>.</p> <p style="text-align: center;"></p> </td> </tr> </tbody> </table> <strong><a href="http://orphey.com.ua/dobbl/">Доббль</a></strong> <table border="1" cellspacing="0" cellpadding="0"> <tbody> <tr> <td style="text-align: left;" valign="top" width="250"><a href="http://orphey.com.ua/dobbl/"><img class="alignright size-full wp-image-2148" alt="Untitled-4" src="http://orphey.com.ua/wp-content/uploads/2014/10/Untitled-4.png" width="150" height="150" /></a></td> <td valign="top" width="350"> <p style="text-align: left;">А сейчас мы познакомим вас с замечательнейшей игрой для развития внимания, скорости реакции и зрительного восприятия. Это игра Dobble (Доббл или Spot It!). Весёлая игра для всей семьи, даже дети-непоседы увлекаются ею и с огромным удовольствием играют. Правила игры читайте<a href="http://orphey.com.ua/dobbl/"> здесь</a>.</p> <p style="text-align: center;"></p> </td> </tr> </tbody> </table>

Ответить

OlgaNovikova OlgaNovikova 18.02.2015 17:52:50

Здравствуйте, подскажите, пожалуйста, атрибуты "cellpading" и "cellspasing" с помощью которых можно задавать отступы между ячейками и содержимым, на сегодняшний день вообще правильно использовать??? Или их необходимо заменять чем то другим?

Ответить

FIN FIN 09.04.2015 13:22:44

Большое спасибо, очень помогла данная тема.

Ответить

Demidich Demidich 28.07.2015 20:46:20

Помогите пожалуйста сделать таблицу уже, так как у вас на скрине. http://cssdeck.com/labs/k6clwp8g

Ответить

newJS newJS 03.01.2016 08:12:24

Зачем просить кого то, можно сделать самому. вот тема здесь на форуме _http://myrusakov.ru/forum.html?act=thread&id=2914_ вот прямая ссылка на мой сайт _http://newjs.my1.ru/load/generator_html_tablic/1-1-0-1_

Ответить

Tisani Tisani 21.01.2016 18:41:08

Спасибо вам огромное!!! Только по вашим урокам все получается легко и понятно) Давно хотела освоить языки верстки, и только благодаря вам моя мечта сбывается))) Вот моя таблица, все просто и понятно) <html> <head> </head> <body> <br> <div align="center"> <form name="form1" action="script/request.php" method="post"> <table border="2" width="30%" height="30%"> <tr> <td>Ваше имя</td> <td><input type="text" name="firstname" value="Тут ваше имя"></td> </tr> <tr> <td>Ваш пароль</td> <td><input type="password" name="pass" value="Тут ваш пароль"></td> </tr> <tr> <td>Выберите вариант</td> <td><select name="choice"> <option value="1">Вариант 1 <option value="2">Вариант 2 <option value="3">Вариант 3 <select></td> </tr> <tr> <td colspan="2" align="center">Напишите что-нибудь о себе</td> </tr> <tr> <td colspan="2" align="center"><textarea name="message" rows="10" cols="30"> Сообщение </textarea></td> </tr> <tr> <td colspan="2">Выберите что-нибудь одно <input type="radio" name="choiceradio" value="1">Вариант 1 <input type="radio" name="choiceradio" value="2">Вариант 2 <input type="radio" name="choiceradio" value="3">Вариант 3</td> </tr> <tr> <td colspan="2">Вы согласны с нашими правилами? <input type="checkbox" name="terms" value="yes"></td> </tr> <tr> <td colspan="2">Выберите файл для загрузки <input type="file" name="path"></td> </tr> <tr> <td colspan="2" align="center"><input type="button" name="start" value="Начать"></td> </tr> <tr> <td colspan="2" align="center"><input type="submit" value="Готово"></td> </table> </form> <table border="2" width="30%" height="30%"> <tr> <td colspan="2" align="center">(1, 1)</td> <td rowspan="2">(1, 2)</td> </tr> <tr> <td align="right" valign="top">(2, 1)</td> <td valign="bottom">(2, 2)</td> </tr> </table> </div> </body> </html>

Ответить

Scholar Scholar 23.01.2017 18:08:04

Здравствуйте. У меня возникла проблема с приоритетностью атрибутов colspan и rowspan: когда прописал <table border="4" width="50%" height="60%"> <tr height="70%"> <td width="30%" colspan="2">1.1</td> <td rowspan="2">1.2</td> </tr> <tr> <td align="center" valign="bottom">2.1</td> <td align="right" valign="top">2.2</td> </tr> </table> - все нормально работает, но возможно ли дать приоритет атрибуту rowspan? Если возможно то как это сделать? И еще вопрос - может ли rowspan адекватно функционировать без colspan?

Ответить

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