HTML Basics III. Learning about tables #5

Добавление второго столбца

Возможно, то, что мы создали таблицу с единственным столбцом, не показалось вам чем - то грандиозным но все же – это отличная работа!

Теперь посмотрим, что у нас есть. Заметьте в первой строке таблицы у нас теперь два столбца.

Добавление второго столбца в таблицу придает более привычный вид. Но во втором столбце всего одна строка давайте исправим это! 

задание

1. добавьте во вторую строку второй столбец со значением 1897
2. добавьте в третью строку второй столбец со значением 1935
3. посмотрите на результаты. Теперь у нас есть 2 столбца и 3 строки и каждой строке есть данные
4. Классно! Теперь вам известны основы работы с таблицами. Перейдите к следующему разделу, чтобы узнать, как добавлять таблицам заголовки и названия.

решение

<html>
    <head>
        <title>Table Time</title>
    </head>
    <body>
        <table border="1px">
            <tr>
                <td>King Kong</td>
                <td>1933</td>    
            </tr>
             
            <tr>
                <td>Dracula</td>
                <td>1897</td>
            </tr>
             
            <tr>
                <td>Bride of Frankenstein</td>
                <td>1935</td>
            </tr>
        </table>
    </body>
</html>


HTML Basics III. Learning about tables #4

Один столбец

Рассмотрите код html сейчас. Можете ли вы сказать, что есть еще три строки? Мы добавили небольшой отступ, чтобы было проще воспринимать деление на строки и столбцы.

Мы добавили единственный тег <td> (“таблица данных”) который, по сути, является первым столбцом таблицы. Если вы посмотрите на вкладку с результатами, вы увидите нарисованную границу вокруг него, это не сильно впечатляет, но не стоит беспокоиться, мы собираемся добавить еще несколько ячеек. Прежде чем начать править  код html убедитесь, что сделали, нужны отступы, чтобы в дальнейшем не запутаться.

задание

1. Добавьте тег <td> </td> во вторую строку таблицы между тегами напишите “два”
2. В третью строку добавьте еще ячейку и напишите в ней “три”
3. Посмотрите на результат. Должна получиться таблица в которой один столбец и три строчки.

подсказка

Между вторым и третьим тегом <tr> вам надо добавить свою ячейку <td> два <td>. Не забывайте про отступы чтобы не запутаться.

решение

<html>
    <head>
        <title>Table Time</title>
    </head>
     
    <body>
         
        <table border="1px">
            <tr>
                <td>Один</td>
            </tr>
                <td>Два</td>   
            <tr>
                <td>Три</td>
            </tr>
                 
            <tr>
                 
            </tr>
        </table>
         
    </body>
 
</html>


HTML Basics III. Learning about tables #3

Строки информации.

Таблица  - это просто набор информации помещенное в строки и столбцы.

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

задание

Добавьте одну стоку в таблиц используя теги <tr> и </tr> на 9 строке нашего кода. Также добавьте еще две дополнительные строки в таблицу на 11 и 12 строке нашего кода.

решение

<html>
    <head>
        <title>Table Time</title>
    </head>
    
    <body>
        
        <table>
            <tr></tr>
            <!-- Add two more rows below this! -->
            <tr></tr>
            <tr></tr>
        </table>
    </body>
</html>

HTML Basics III. Learning about tables #2

Какие таблицы?

Таблицы очень полезны. Мы используем их для хранения табличных данных, поэтому они легко читаются! Если нам надо предоставить информацию аккуратно сложенную в столбцы и строки, как вы могли догадаться,  тег <table> это то, что нам нужно.

Есть много тегов связанных с таблицами, но все начинается с тега <table>, поэтому давайте добавим его первым.

задание

1. Добавьте открытый и закрытый тег <table> в теле html документа
2. Посмотрите на результат. Вы заметите, что ничего не изменилось. Это потому что таблица еще не заполнена. Мы узнаем, как заполнить ее в ближайшее время.

подсказка

Напоминаем что после открытого тега <table> всегда должен идти закрывающий тег </table>.

решение

<html>
    <head>
        <title>Table Time</title>
    </head>
    <body>
    <table></table>
    </body>
</html>

HTML Basics III. Learning about tables #1

Введение

Наше html - путешествие проходит очень хорошо. Мы уже рассмотрели:

1. как настроить скелет html файла
2. заголовки, абзацы, картинки и ссылки
3. цвет шрифта, размер и тип
4. цвет фона, выравнивание текста, жирный и курсивный шрифт

В этом курсе мы рассмотрим некоторые важные структурные аспекты html: <table>, <div> и  <span>!

задание

Давайте разогреемся:
1. Задайте заголовку, стиль пусть он будет красного цвета и шрифт Garamond
2. Добавьте изображение
3. Добавьте второе изображение и сделайте его ссылкой
(Если что то забыли воспользуйтесь подсказкой)

подсказка

Не забудьте обернуть img тег вот так:
<a href="адрес ссылки"><img src="адрес изображения" /></a>

решение

<!DOCTYPE html>
<html>
    <head>
        <title>Table Time</title>
    </head>
    <body>
        <h1 style="color:red; font-family:Garamond">Продолжаем обучение</h1>
        <img src="http://yandex.st/www/1.607/yaru/i/logo.png"/>
        <a href="http://ya.ru"><img src="http://yandex.st/www/1.607/yaru/i/logo.png"/></a>
        
    </body>
</html>