Твитнуть об этом видео
Поделиться на Facebook
Поделиться по E-mail
Скачать исходники к 12 видеоуроку по HTML Размер: 86.22 kB, скачали: 431 раз.
Скачать Pixie Размер: 8.04 kB, скачали: 659 раз.
- Разархивировать скачанный файл.
- Открыть папку index.
- Запустить файл index.html в браузере.
Как сделать таблицу?
Давайте перейдем в код. Не будем тратить время на ерунду и сразу же начнем заниматься нашей табличкой. Открываем страницу about.html. Почему именно about.html – думаю понятно. Страница index.html у нас заполнена и, поэтому, для простоты обзора нашей таблицы, мы будем использовать about.html.
Итак, сначала прописываем таблицу. Прописывается она в тегах <table></table>. Тег <table> может иметь внутри себя теги строк <tr></tr> и теги столбцов <td></td>.
<table> <tr> <td> </td> </tr> </table>
Давайте посмотрим на нашу табличку: она состоит из двух столбцов и трех строк. Так как сначала прописываются строки, а первую строку и первый столбец мы уже прописали, то давайте пропишем второй столбец и еще две строки.
<table> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table>
Прописали.
Для того, чтобы таблица отображалась, нам нужно задать какое-нибудь значение в ячейках. Это может быть текст или изображение. Введем сначала текст: «1 ячейка», «2 ячейка» , «3 ячейка» , «4 ячейка» , «5 ячейка» , «6 ячейка».
<table> <tr> <td>1 ячейка</td> <td>2 ячейка</td> </tr> <tr> <td>3 ячейка </td> <td>4 ячейка </td> </tr> <tr> <td>5 ячейка </td> <td>6 ячейка </td> </tr> </table>
Сохраним документ и проверим в браузере. Как мы видим, задано шесть ячеек. Посмотрим на наш пример снова. Каждая ячейка имеет свой цвет. Цвет можно задать или отдельно для каждой ячейки, или задать фоновый цвет и некоторым ячейкам задать свой цвет. Мы воспользуемся вторым способом. Фоновый цвет у нас будет голубым, так как это наиболее используемый цвет в наших ячейках. А трем ячейкам установим свой цвет.
Как же узнать цвет ячейки? Для этого нам нужно использовать специальную бесплатную программку «Pixel». Она достаточно проста в использовании. Наводим мышь на нужную нам область экрана и копируем с помощью горячих клавиш Ctrl+Alt+C. Скопировали, сворачиваем программу, открываем код и задаем цвет нашей таблице. Цвет, как вы помните, у нас задается с помощью атрибута bgcolor. Не забываем вводить решетку, и вставляем код цвета.
<table bgcolor = "#00D9FA"> <tr> <td>1 ячейка</td> <td>2 ячейка</td> </tr> <tr> <td>3 ячейка </td> <td>4 ячейка </td> </tr> <tr> <td>5 ячейка </td> <td>6 ячейка </td> </tr> </table>
Давайте сохраним и проверим снова. Теперь стало больше походить на таблицу, но все же не до конца.
Давайте зададим рамку нашей таблице, а также оставшиеся цвета ячеек. Начнем с цветов. Копируем цвет и задаем его, с помощью того же атрибута, соответствующей ячейке. Проделываем эти действия со второй, третьей и шестой ячейками.
<table bgcolor = "#00D9FA"> <tr> <td>1 ячейка</td> <td bgcolor = "#FFCA8D">2 ячейка</td> </tr> <tr> <td bgcolor = "#3CF995">3 ячейка </td> <td>4 ячейка </td> </tr> <tr> <td>5 ячейка </td> <td bgcolor = "#F3F881">6 ячейка </td> </tr> </table>
Сохраняем. Посмотрим, что у нас получилось — более-менее. Скачать браузеры вы можете из первого видеоурока по HTML.
Теперь зададим рамку. Рамка задается с помощью атрибута border. Поставим, например, три пикселя.
<table bgcolor = "#00D9FA" border = "3"> <tr> <td>1 ячейка</td> <td bgcolor = "#FFCA8D">2 ячейка</td> </tr> <tr> <td bgcolor = "#3CF995">3 ячейка </td> <td>4 ячейка </td> </tr> <tr> <td>5 ячейка </td> <td bgcolor = "#F3F881">6 ячейка </td> </tr> </table>
Теперь стало видно, что это все-таки у нас таблица.
Давайте зададим цвет нашей рамке. Делается это с помощью атрибута bordercolor. Этот атрибут можно было использовать так же, как в уроке про изображения. Там тоже при ссылках задавалась рамка. Минус данного атрибута – он не поддерживается в браузере Opera. Поэтому далее мы будем тестировать наш сайт в браузере Mozilla Firefox. Итак, зададим цвет нашей рамки, как в примере. Снова воспользуемся программой «Pixel». Наводим курсор на рамку, копируем и вставляем в код.
<table bgcolor = "#00D9FA" border = "3" bordercolor = "#6C6C6C"> <tr> <td>1 ячейка</td> <td bgcolor = "#FFCA8D">2 ячейка</td> </tr> <tr> <td bgcolor = "#3CF995">3 ячейка </td> <td>4 ячейка </td> </tr> <tr> <td>5 ячейка </td> <td bgcolor = "#F3F881">6 ячейка </td> </tr> </table>
Сохраняем, проверяем в браузере Opera. Как видим, ничего не изменилось, поэтому закрываем браузер и открываем нашу страничку в браузере Mozilla Firefox. Как мы видим, цвет у рамки стал серым. Не понятно лишь одно: почему рамка у нас совсем не похожа на ту, которая в примере, и почему в примере ячейки шире.
Давайте зададим ширину и высоту наших ячеек. Для этого используем атрибуты height (высота) и width (ширина). Я задал высоту и ширину 200×200 пикселей. Задаем эти атрибуты для всех ячеек.
<table bgcolor = "#00D9FA" border = "3" bordercolor = "#6C6C6C"> <tr> <td height = "200" width = "200">1 ячейка</td> <td height = "200" width = "200" bgcolor = "#FFCA8D">2 ячейка</td> </tr> <tr> <td height = "200" width = "200" bgcolor = "#3CF995">3 ячейка </td> <td height = "200" width = "200" >4 ячейка </td> </tr> <tr> <td height = "200" width = "200" >5 ячейка </td> <td height = "200" width = "200" bgcolor = "#F3F881">6 ячейка </td> </tr> </table>
Сохраняем, проверяем в браузере Mozilla Firefox. Размер ячеек изменился.
Теперь поработаем над рамкой. Давайте разберемся, что за расстояния у нас получились. На самом деле это у нас не рамка. Рамка – это однопиксельная полоса. А пространство между рамками – это отступ от ячеек. Давайте его уберем, а именно, зададим значение, равное нулю. Прописываем атрибут cellspacing, который означает «расстояние между ячейками». Ставим значение, равное нулю.
<table bgcolor = "#00D9FA" border = "3" bordercolor = "#6C6C6C" cellspacing="0"> <tr> <td height = "200" width = "200">1 ячейка</td> <td height = "200" width = "200" bgcolor = "#FFCA8D">2 ячейка</td> </tr> <tr> <td height = "200" width = "200" bgcolor = "#3CF995">3 ячейка </td> <td height = "200" width = "200" >4 ячейка </td> </tr> <tr> <td height = "200" width = "200" >5 ячейка </td> <td height = "200" width = "200" bgcolor = "#F3F881">6 ячейка </td> </tr> </table>
Сохраним и проверим. Да, стало значительно красивее.
Имеется похожий на cellspacing атрибут — cellpadding . Их нужно различать. Cellpaddig означает отступ от рамки до содержимого ячейки. Давайте мы его тоже поставим, например, равный трем.
<table bgcolor = "#00D9FA" border = "3" bordercolor = "#6C6C6C" cellspacing="0" cellpadding = "3"> <tr> <td height = "200" width = "200">1 ячейка</td> <td height = "200" width = "200" bgcolor = "#FFCA8D">2 ячейка</td> </tr> <tr> <td height = "200" width = "200" bgcolor = "#3CF995">3 ячейка </td> <td height = "200" width = "200">4 ячейка </td> </tr> <tr> <td height = "200" width = "200">5 ячейка </td> <td height = "200" width = "200" bgcolor = "#F3F881">6 ячейка </td> </tr> </table>
Сохраним, обновим. Вот появился наш отступ в три пикселя.
Давайте сделаем так, чтобы наш текст в ячейке отображался по центру. Осуществим это либо с помощью тега <center>, либо с помощью атрибута align. Давайте для первой ячейки зададим с помощью тега <center>, а для остальных – с помощью атрибута align.
<table bgcolor = "#00D9FA" border = "3" bordercolor = "#6C6C6C" cellspacing="0" cellpadding = "3"> <tr> <td height = "200" width = "200"><center>1 ячейка</center></td> <td align = "center" height = "200" width = "200" bgcolor = "#FFCA8D">2 ячейка</td> </tr> <tr> <td align = "center" height = "200" width = "200" bgcolor = "#3CF995">3 ячейка </td> <td align = "center" height = "200" width = "200">4 ячейка </td> </tr> <tr> <td align = "center" height = "200" width = "200" >5 ячейка </td> <td align = "center" height = "200" width = "200" bgcolor = "#F3F881">6 ячейка </td> </tr> </table>
Сохраняем. Проверяем. Как мы видим, разницы между двумя способами нет.
Что делать, если возникнет необходимость в том, чтобы текст в ячейке располагался сверху или снизу? Насколько вы помните, мы проходили данный атрибут. Он означает вертикальное выравнивание – vertical align. Перейдем в код, и для первых двух ячеек зададим его. Для первой становим значение top, а для второй – bottom. Насколько мы помним, существует третье значение, которое устанавливается по умолчанию – middle.
<table bgcolor = "#00D9FA" border = "3" bordercolor = "#6C6C6C" cellspacing="0" cellpadding = "3"> <tr> <td valign = "top" height = "200" width = "200"><center>1 ячейка</center></td> <td valign = "bottom" align = "center" height = "200" width = "200" bgcolor = "#FFCA8D">2 ячейка</td> </tr> <tr> <td align = "center" height = "200" width = "200" bgcolor = "#3CF995">3 ячейка </td> <td align = "center" height = "200" width = "200">4 ячейка </td> </tr> <tr> <td align = "center" height = "200" width = "200" >5 ячейка </td> <td align = "center" height = "200" width = "200" bgcolor = "#F3F881">6 ячейка </td> </tr> </table>
Сохраним и проверим. Всё получилось.
Сейчас мы немножко поиграем с нашей таблицей. Давайте изменим ее вид: у нас пойдет первая ячейка, длиной в две ячейки, потом идет вторая ячейка, высотой в две ячейки и далее – третья и четвертая ячейки обычного размера. Это можно сделать, просто прописав код с помощью <tr> и <td>, а можно сделать это с использованием специальных атрибутов. Давайте рассмотрим это. Растягиваются наши ячейки с помощью атрибутов colspan и rowspan. Сначала давайте удалим вторую ячейку. Теперь вводим атрибут colspan со значением «2» в первую ячейку. Теперь удалим пятую ячейку, так как, как мы видели на примере, у нас ее не будет. Задаем атрибут rowspan третьей ячейке.
<table bgcolor = "#00D9FA" border = "3" bordercolor = "#6C6C6C" cellspacing = "0" cellpadding = "3"> <tr> <td valign = "top" colspan = "2" height = "200" width = "200"><center>1 ячейка</center></td> </tr> <tr> <td align = "center" rowspan = "2" height = "200" width = "200" bgcolor = "#3CF995">3 ячейка </td> <td align = "center" height = "200" width = "200" >4 ячейка </td> </tr> <tr> <td align = "center" height = "200" width = "200" bgcolor = "#F3F881">6 ячейка </td> </tr> </table>
Сохраним и проверим в браузере. У нас получилось так, как мы и задумывали. Хочу заострить ваше внимание на этом пункте, поскольку это довольно важная часть в основе верстки веб-страниц. Поэтому потренируйтесь здесь, а затем нажмите «Play» для продолжения видеоурока.
Как создать вложенные таблицы в HTML?
Сейчас мы займемся такой интересной вещью, как вложенные таблицы. Давайте создадим таблицу в третьей ячейке. Таблица будет состоять из двух столбцов и трех строк, высота которых будет различной: она будет расти от первой строки к последней.
Давайте перейдем в код и найдем третью ячейку. Убираем текст и создаем новую таблицу. Прописываем в ней три строки, а в каждой строке по две ячейки. В первой ячейке будет имя, во второй – число. Например, имя – Олег, число – 10; имя – Дима, число – 9.
<tr> <td align = "center" rowspan = "2" height = "200" width = "200" bgcolor = "#3CF995"> <table> <tr> <td>Имя</td> <td>Число</td> </tr> <tr> <td>Олег</td> <td>10</td> </tr> <tr> <td>Дима</td> <td>9</td> </tr> </table> </td> <td align = "center" height = "200" width = "200" >4 ячейка </td> </tr> <tr>
Сохраним нашу работу. Посмотрим в браузере. Как мы видим, у нас появилась таблица, состоящая из двух столбцов и трех строк. Давайте ей тоже зададим рамку в 1 пиксель и высоту. Цвет рамки укажем черным.
<tr> <td align = "center" rowspan = "2" height = "200" width = "200" bgcolor = "#3CF995"> <table border = "1" bordercolor = "#000000"> <tr height="10"> <td>Имя</td> <td>Число</td> </tr> <tr height="30"> <td>Олег</td> <td>10</td> </tr> <tr height="50"> <td>Дима</td> <td>9</td> </tr> </table> </td> <td align = "center" height = "200" width = "200">4 ячейка </td> </tr> <tr>
Сохраним и посмотрим, что у нас получилось. Наша задача выполнена, только уберем отступы.
<table border = "1" bordercolor = "#000000" cellspacing = "0">
Проверяем – расстояние между ячейками исчезло. Задача выполнена. Однако, давайте зададим другой цвет нашим ячейкам, например розовый. Зададим всей таблице. Кстати, чтобы задать цвет изображениям, мы используем атрибут background и вводим путь для изображения, если конечно оно вам нужно.
<table bgcolor = "FF00CC" border = "1" bordercolor = "#000000"> <tr height="10"> <td>Имя</td> <td>Число</td> </tr> <tr height="30"> <td>Олег</td> <td>10</td> </tr> <tr height="50"> <td>Дима</td> <td>9</td> </tr> </table>
Сохраним. Проверим цвет. Всё получилось.
Теперь давайте проверим нашу страничку в браузерах Internet Explorer и Opera. В браузере IE рамка у нас серого цвета, как положено, а в браузере Opera цвет рамки серым не отображается.
Давайте перейдем к домашнему заданию. Домашнее задание будет такое: вам нужно составить табличку, задать цвет каждой ячейке, ширину и высоту 200×200 пикселей, рамку 4 пикселя, убрать расстояние между ячейками, то есть поставить значение, равное нулю, отобразить текст в ячейке по центру, вертикальное выравнивание тоже сделать по центру, то есть посередине, поэкспериментировать с атрибутами colspan, rowspan и посоздавать еще свои таблицы. После этого вы можете переходить в следующий видеоурок, где мы рассмотрим создание сайта на html-таблицах.
Спасибо за внимание. До встречи в следующем видеоуроке, в котором мы рассмотрим табличную верстку сайта!
Info-line.net
Слава Богу! Олежек, дорогой, получилось =) =) =) На куролесил, конечно по -черному, ошибок куча, я вообще удивляюсь как он еще работает =) ...и снова убеждаюсь, что экспериментировать лучше по утрам, на свежую голову, потому что в конце дня, когда уже переполнен информацией, где-нибудь не там запятую поставишь и уже код не пойдет, а затем уже часами ищешь, а где же эта запятая... А попутно, можешь «натыкать» еще гору запятых, что часто случается))...Тем не менее, получилось, можете посмотреть (P. S. Теперь, через несколько дней ...займусь кнопками). Благодарю сердечно за отзывчивость! Спасибо за советы, всех благ. С ув. Михаил.
Не за что 😉
Привет, Олег...если не секрет, на фрилансе каким видом деятельности занимались? Можно поделиться. =) Бывают свободные минуты и у меня...можно было бы что -то сделать, полезного... И что же там за фразу, такую вескую и действенную, выдал Ваш знакомый, после которой так ревностно и плодотворно продвинулось дело в изучении программирования? Надеюсь, всё было интелегентно? =-O
У меня немного опыта работы на фрилансе в качестве фрилансера. Создал 2 интернет-магазина.
Я же ее написал:
Это был поворотный момент, когда я понял, что если я ничего делать не буду, то у меня ничего и не будет 🙂
Класс)) Хотя богатство не сама цель...но, лучше быть богатым и здоровым...Я получил подобный урок, когда начал строить дом, мой бывший шеф сказал так, что если хочешь чтобы дела продвигались, то хотя бы один гвоздь в день но забей...и таким образом каждый день понемногу дела будут продвигаться...Так оно и произошло...Подобным образом когда-то ответил Н.В. Гоголь, обратившемуся к нему человеку с вопросом как ему удалось стать таким видным писателем. Гоголь ему ответил, что важно писать каждый день, хотя бы по две строчки... Человек переспросил: «А если в голову ничего не лезет?» На что писатель ответил:" Ну тогда бери и пиши две строчки: «В голову ничего не лезет.»... =) ...Все верно: «что если я ничего делать не буду, то у меня ничего и не будет»...от себя только добавлю, делать хотя бы понемногу, но каждый день...Спасибо за уроки, Олег. Вот практический результат после Ваших уроков по таблицам, (в вивере запутался))) тогда перешел в notepad, там где уроки и прописал вручную — получилось так как хотел! =) ...можете взглянуть, внизу страницы под заголовком «Книги є самим надійним засобом від стресу», проще по ссылке Какие еще есть красивые шрифты типа Monotype corsiva? На магазины можно глянуть?
Кроме Monotype Corsiva есть много шрифтов в свободном доступе, но вряд ли они будут у ваших пользователей.
Стандартных шрифтов немного, вы сами можете попробовать каждый из них. Шрифты находятся в «панели управления → шрифты». Мне нравится еще шрифт Comic Sans 🙂
Интернет-магазины сделаны, но находятся в закрытом состоянии. Наверное из-за кризиса, но добавление товаров дело тоже не быстрое.
А как он прописывается в теге, потому что смотрю в списке шрифтов он у меня есть, а прописываю в виде в браузере не отображается? =-O
прописываю в виде font face="Comic Sans" size="3"
Да, забавный =) ...уже разобрался, он у меня отображается при записи font face="Comic Sans MS" size="3" ...Олег, даешь PHP !
Да, я забыл про MS =)
Прописываются так, как и называются. Полное его имя: Comic Sans MS.
It' s very nice for you... Спасибо за Depeche_Mode_-_Personal_Jesus.mp3 ...кстати, я его искал =) а он уже в папке с уроком)). Мне еще понравились Mistral и Algerian ...но, последний англоязычн. Всех благ.Михаил.
Это хорошо 🙂
Еще раз прошу, оставлять комментарии к соответствующим видеоурокам.
Олег привет!!! А когда ты выложишь все про создание интернет магазина? И вообще будет ли такой видео урок?
Интернет-магазин — это обычный сайт, просто еще и магазин 🙂
Возможно будут. Точно пока говорить, не осмелюсь. В ближайшем будущем — не планируется, но я записал себе в очередь.
Олег, спасибо Вам преогромнейшее за Ваш труд. Как просто,
доходчиво, ясно и т. д. изложено. Вы умница и талант в преподавании. Успехов!!!
Спасибо за комплименты 🙂 Рад стараться.
Здравствуйте Олег. У меня вопрос по таблице . не знаю как прикрепить тут скриншоты потому как объяснить тяжеловато. ок. таблица из трех строк и трех колонок ,решила попробовать сделать так 1+2вместе под номером 1
.3+6под номером 2
4+7под номером 3
8+9под номером 4 а последняя cell в одну клетку посередине -5 но почему-то первая и вторая выглядят нормально,целостно,а 3,4 пополам разделены линией яб на месте этой лии цифру бы поставила ,но как?((( чо я не так делаю
было:
123
456
789
стало:
112
352
344
1
2
3
5
4
Здравствуйте. Все-таки попробуйте пожалуйста задать вопрос, используя скриншоты и вставку html-кода. Чуть ниже объясню как.
Как прикрепить скриншот:
1. Загружаете скриншот на фото-хостинг типа . Получаете ссылку на изображение.
2. На моем сайте, чуть выше области комментирования, жмете кнопку «Изображение» и вводите туда эту ссылку.
Как вставить html-код:
1. Нажмите на кнопку «HTML» на моем сайте, чуть выше области комментирования.
2. Добавьте код.
3. Закройте тег, еще одним нажатием на кнопку «HTML».
А для чего нужен Pixie?
Для определения кода цвета. Наводите мышку на цвет, он вам показывает код этого цвета в окошке, который Вы можете скопировать для дальнейшего использования.