Урок 6: Таблицы, слои и позиционирование

План:

  • Верстка табличных данных через таблицу

Домашка:

Необходимо сверстать таблицу.


Даю подсказки:
1) Закругляем рамки при помощи border-radius;
2) Корень пишем следующим кодом:
HTML:
<div class="root">&#8730;<span>2</span> = ?</div>

CSS:
.root {
        font-size: 24px;
        font-style: italic;
}

.root span {
        border-top: 1px solid black;
}


3) Вам кажется, что линии таблицы не доходят до её границ, но на самом деле мы имеем сверстанную таблицу без рамок на границе:
CSS:
table {
        border: 2px solid white;
        border-collapse: collapse;
}

td {
        border: 1px solid green;
        padding: 3px;
}


А сама таблица помещена в DIV, которому прописаны отступы от таблицы, жирная рамка и закругление рамок.

Дополнение к уроку:

Решение проблемы, показанной в уроке, решается усложнением кода и добавлением тегов col в таблицу: решение проблемы. Проблема показана не случайно, тут важно понимать, что таблицы искусственно создали проблему, ведь указание напрямую ширины не работает, зато разрешили через подобный "костыль" (термин "костыль" применяется в случаях, когда решается проблема не стандартным образом), так как логичнее всего предположить, что именно через width для td необходимо указывать ширину, но это не срабатывает!


0%
Главная БАЗОВЫЙ КУРС ПЕРВЫЙ УРОВЕНЬ программирования ВТОРОЙ УРОВЕНЬ верстки ВТОРОЙ УРОВЕНЬ программирования Начать обучение Запуск проекта Мелкие трюки Делимся практикой трудоустройства Проверь свои знания Задачи по PHP MySQL Блог Отзывы