Html academy испытание таблица посложнее

Please complete the security check to access codepen.io

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 538896a21ea0c2ae • Your IP : 78.85.5.224 • Performance & security by Cloudflare

Please note that GitHub no longer supports your web browser.

We recommend upgrading to the latest Google Chrome or Firefox.

Join GitHub today

GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.

HtmlAcademy / src / 005-Знакомство_с_таблицами / 017-Испытание_таблица_посложнее.html

Users who have contributed to this file

html >
head >
meta charset = " utf-8 " >
title >Таблица посложнее title >
link rel = " stylesheet " type = " text/css " href = " 017-CSS.css " >
head >
body >
table >
caption >Посещения по городам caption >
tr >
th >Город th >
th >Посещения th >
th >Страниц th >
th >Время th >
tr >
tr >
td >СПб td >
td >199 td >
td >18,02 td >
td >00:13:45 td >
tr >
tr >
td >Москва td >
td >69 td >
td rowspan = " 2 " >нет данных td >
td >00:00:44 td >
tr >
tr >
td >Киев td >
td >5 td >
td >00:18:07 td >
tr >
tr >
td colspan = " 3 " >Всего посещений td >
td >273 td >
tr >
table >
body >
html >
  • © 2019 GitHub, Inc.
  • Terms
  • Privacy
  • Security
  • Status
  • Help
Читайте также:  Html table border bottom

You can’t perform that action at this time.

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

Добавляем строки [2/23]

Простейшая таблица описывается с помощью трёх тегов:

1.

обозначает таблицу.

2.

расшифровывается как «table row», обозначает строку таблицы.

3.

расшифровывается как «table data», обозначает ячейку внутри строки таблицы.

Теги

располагаются внутри тегов

, а те, в свою очередь, внутри

. Почти всё текстовое содержимое таблицы размещается внутри тегов
.

В простейшей таблице в каждой строке должно быть одинаковое количество ячеек, то есть внутри всех

должно быть одинаковое количество

.

Потренируйтесь добавлять строки в таблицу.

Добавляем столбцы [3/23]

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

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

добавить по ячейке

.

Задаём рамки с помощью CSS [4/23]

Вы научились создавать простые таблицы, добавлять в них любое количество строк и столбцов. Теперь пришло время оформить эти таблицы.

Таблицы в предыдущих заданиях отображались с рамками по умолчанию. Такие рамки отображаются, если у тега

задан атрибут border с ненулевым значением.

Но с помощью атрибута border гибко управлять рамками не получается. С его помощью можно только изменять их толщину.

Поэтому мы будем учиться использовать CSS. С помощью CSS-свойства border можно задавать как внешние рамки таблицы, так и рамки каждой ячейки.

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

Улучшаем отображение рамок [5/23]

Мы задали рамки таблицы с помощью CSS, но они не так хороши, как хотелось бы. По умолчанию браузер рисует рамки таблицы и рамки отдельных ячеек раздельно, это отлично видно на примере.

Читайте также:  Создание сети с сервером

Чтобы избавиться от таких двойных рамок, используется CSS-свойство таблицы border-collapse. Вот так:

Значение collapse убирает двойные рамки: cхлопываются рамки соседних ячеек, а также рамки ячеек и внешняя рамка таблицы. При этом внешняя рамка таблицы может исчезнуть, и чтобы её вернуть, можно увеличить её ширину.

Горизонтальные и вертикальные рамки [6/23]

Иногда требуется, чтобы рамки ячеек в таблице отображались не полностью. Например, чтобы отображалась только нижняя рамка ячеек, тогда таблица получается расчерченной по горизонтали. Аналогично, если отображать только боковые рамки ячеек, то таблица получается разбитой на столбцы.

Такие эффекты легко достигаются с помощью CSS. Для этого необходимо использовать не свойство border, которое задаёт рамки для всех сторон ячейки, а одно из свойств:

Эти свойства задают отображение только одной рамки ячейки: верхней, правой, нижней или левой соответственно.

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

Отступы внутри ячеек [7/23]

Вы освоили простейшие приёмы для работы с рамками таблиц. Наша таблица уже смотрится аккуратно, но содержимое ячеек прилипает к рамкам. Если добавить отступы внутри ячеек, то информация будет восприниматься намного лучше.

Отступы внутри ячеек можно добавлять с помощью атрибута cellpadding тега

. Но лучше его не использовать, а задавать отступы с помощью CSS.

CSS-свойство padding задаёт «внутренние отступы элемента» со всех сторон. Можно задавать отступы для каждой из сторон отдельно, используя свойства:

Например, чтобы задать у ячеек все отступы в 10 пикселей, а отступ слева в 20 пикселей, нужно написать такой CSS-код:

Отступы между ячейками [8/23]

Большинство задач по оформлению таблиц решаются с помощью работы с рамками, отступами внутри ячеек, изменения цвета фона ячеек.

Читайте также:  Что можно сделать из старой магнитолы

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

Отступы между ячейками не работают с border-collapse: collapse, что достаточно логично, ведь рамки ячеек в этом режиме «склеены» и их не разорвать.

Поэтому в этом задании мы используем border-collapse: separate, которое «расклеивает» ячейки. На самом деле это значение по умолчанию, а мы используем его только для наглядности. Если удалить свойство border-collapse, то результат не изменится, ячейки будут отображаться раздельно.

Отступы между ячейками можно задать:

· с помощью атрибута cellspacing тега

· или c помощью CSS-свойства border-spacing.

Отметим, что свойство border-spacing задаётся для таблицы, в отличие от padding, которое задаётся для ячеек.

Испытание: простая, но аккуратная таблица [9/23]

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

1. Цвет рамок: lightgray.

2. Стили для body менять не надо.

3. Использовались только стандартные теги.

4. Стили применять только к табличным тегам:

,

.

5. Размеры отступов кратны 5.

6. При стилизации рамок в CSS не забывайте слово solid.

Если отображение в мини-браузере сильно отличается от образца, то используйте вкладку «Различия», в которой отображается то, как академия видит ваш HTML-код.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Adblock detector