HTML Basics III. Better tables #5

Резюме

Мы много чего узнали.

Чему же вы научились?

1. Писать комментарии в html
2. Создавать списки (нумерованные и маркированные)
3. Выделять текст при помощи тегов <em> и <strong>
4. Изменять цвет, размер и выравнивание текста при помощи атрибута style
5. Создавать html таблицы

Нажмите “Сохранить и Отправить код” чтобы закончить этот курс и перейти к знакомству с двумя невероятно полезными тегами <div> и <span> !

HTML Basics III. Better tables #4

Стиль всему голова!

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

Не стесняйтесь менять любой из атрибутов стилей, которые мы добавили, вы узнаете о них гораздо больше, когда мы начнем изучать css.

Если вы хотите добавить более одного атрибута стилю, просто разделите их точкой с запятой, например:

<th style="font-size:12px; color:red"></th>

задание

1. Выделите "Famous Monster" и "Birth Year" курсивом
2. Сделайте заголовок "Famous Monsters by Birth Year" красным

подсказка

Посмотрите в предыдущих разделах о выделении текста если вы забыли что для этого нужно. Вам надо добавить style в заголовок таблицы чтобы вы могли поменять цвет.

решение

<html>
    <head>
        <title>Table Time</title>
    </head>
     
    <body>
         
        <table style="border-collapse:collapse;">
            <thead>
                <tr>
                    <th colspan="2" style="color:red">Famous Monsters by Birth Year</th>
                </tr>
                <tr style="border-bottom:1px solid black;">
                    <th style="padding:5px"><em>Famous Monster</em></th>
                    <th style="padding:5px;border-left:1px solid black"><em>Birth Year</em></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td style="padding:5px;">King Kong</td>
                    <td style="padding:5px;border-left:1px solid black;">1933</td>    
                </tr>
                 
                <tr>
                    <td style="padding:5px;">Dracula</td>
                    <td style="padding:5px;border-left:1px solid black;">1897</td>
                </tr>
                 
                <tr>
                    <td style="padding:5px;">Bride of Frankenstein</td>
                    <td style="padding:5px;border-left:1px solid black;">1944</td>
                </tr>
            </tbody>
        </table>
         
    </body>
 
</html>


HTML Basics III. Better tables #3

Название вашей таблицы

В нашей таблице отсутствует название. Мы хотим добавить таблице заголовок, который будет занимать первую строчку полностью.

Для этого нам надо добавить атрибут colspan (пер. объединение) в тег <th>. По умолчанию значение равно единице, если мы хотим объединить 3 столбца, то мы должны присвоить атрибуту colspam значение 3

Это выглядит вот так:

<th colspam=”3”>объединяем 3 колонки</th>

задание

1. Посмотрите, что у нас есть. Мы уже добавили заголовок, но он сейчас расположен только в одном столбце.
2. Сделайте так, чтобы наш заголовок занимал оба столбца, для этого добавьте тегу <th> атрибут colspan=”2”
3. Взгляните на результат, наш заголовок должен занять оба столбца.

решение

<html>
    <head>
        <title>Table Time</title>
    </head>
     
    <body>
         
        <table border="1px">
            <thead>
                <tr>
                    <th colspan="2">Famous Monsters by Birth Year</th>
                </tr>
                <tr>
                    <th>Famous Monster</th>
                    <th>Birth Year</th>
                </tr>
            </thead>
            <tbody>
                <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>
            </tbody>
        </table>
         
    </body>
 
</html>


HTML Basics III. Better tables #2

Невидимая голова

Вы заметили, что мы добавили тег <thead> перед <tbody>. Принцип  его работы такой же как и у <tbody> мы можем добавлять данные в <thead>.

Зачем же изучать <thead> и <tbody> если изменения не видны? Это сделано, чтобы разделить страницу на составляющие, т.е. голову и тело, это будет удобно, когда мы начнем изучать таблицы стиля css, о котором вы скоро узнаете.

задание

1. добавьте одну строку (<tr>) в голове таблице
2. в этой строке добавьте две ячейки со значениями “Famous Monster” и ” Birth Year”. (Если ячейки создавались при помощи тега <td>, как вы думаете, получаться ли ячейки в заголовке? Воспользуйтесь подсказкой, если вам нужна помощь.)

подсказка

Помните, что строки таблицы создаются при помощи тегов <tr> </tr>.
Вы можете создать ячейки в заголовке таблицы тегами <th> <th>
И не забывайте о том как правильно теги вкладываются друг в друга.

решение

<html>
    <head>
        <title>Table Time</title>
    </head>
     
    <body>
         
        <table border="1px">
            <thead>
                <tr>
                    <th>Famous Monster</th>
                    <th>Birth Year</th>
                </tr>
            </thead>
            <tbody>
                <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>
            </tbody>
        </table>
         
    </body>
 
</html>


HTML Basics III. Better tables #1

Голова таблицы

Вот таблица которую мы сделали ранее. Она выглядит вполне нормально, но, по сути, у нас есть список голливудских знаменитостей (монстров) и даты их рождения. Чтобы наша таблица выглядела более убедительно, мы будем использовать теги <thead>, <tbody>. Эти теги идут внутри тега <table> и являются головой и телом таблицы соответственно.

<Head> html тег содержащий информацию о странице (например, ее название), а в теге <body> размещено содержимое страницы. Аналогично тег <thead> содержит информацию о таблице, а <tbody> заполняется табличными данными.

задание

Так как у нас уже имеются табличные данные, оберните их в теги <tbody> </tbody>. Голову мы добавим позже.

подсказка

Изначальные <tr> должны быть в <tbody>. <tbody> должен быть внутри <table>.
Вы не заметите визуальный разницы между тем что стало и тем что было.

решение

<html>
    <head>
        <title>Table Time</title>
    </head>
    <body>
        <table border="1px">
            <tbody>
                <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>
            </tbody>
        </table>
    </body>
</html>