Выравнивание содержимого в ячейках
Урок 4
| HTML Теги | |
| Тег | Описание |
| <table> …</table> | Элемент <table> служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <tr> и <td>. |
| <tr> … </tr> | Тег <tr> служит контейнером для создания строки таблицы. Каждая ячейка в пределах такой строки может задаваться с помощью тега <td>. |
| <td> … </td> | Предназначен для создания одной ячейки таблицы. Тег <td> должен размещаться внутри контейнера <tr>, который в свою очередь располагается внутри тега <table>. |
Таблицы
Из всех объектов, которые используются для разметки текста в интернете, таблицы являются самыми сложными. В отличие от абзацев, заголовков и изображений с таблицами всегда возникает море проблем, но мы же не боимся их!И сейчас начнем разбираться в них!
Простейшая таблицасоздается с помощью трёх тегов:
1. <table> …</table> обозначает таблицу.
2. <tr> … </tr> расшифровывается как «tablerow», обозначает строку таблицы.
3. <td> … </td> расшифровывается как «tabledata», обозначает ячейку внутри строки таблицы.
Теги <td> располагаются внутри тегов <tr>, а те, в свою очередь, внутри <table>.
В простейшей таблице в каждой строке должно быть одинаковое количество ячеек, то есть внутри всех <tr> должно быть одинаковое количество <td>, например:
<table>
<!--Первоя строка -->
<tr>
|
|
|
<rd> Ячейка</rd><td> Ячейка</td>
</tr>
<!-- Вторая строка -->
<tr>
<rd> Ячейка</rd><td> Ячейка</td>
</tr>
</table>
В этом примере создана простая таблица, состоящая из двух строк и с двумя ячейками в каждой строке, немного сложно понять, правда? Но мы это исправим, и просто посмотрим на то как она будет выглядетьв браузере:
| Ячейка | Ячейка |
| Ячейка | Ячейка |
Теперь стало намного проще.
Ну что же, мы научились создавать простые таблицы, добавлять в них любое количество строк и столбцов. Теперь пришло время оформить эти таблицы.
Оформление таблиц
Как вы думаете, чего не хватает в таблице из примера выше? Правильно — рамок. Рамки отсутствуют, потому что браузер использует стандартное свойство border со значением 0. Но мы это можем исправит с помощью CSS.
Значение border-width определяет толщину границы (рамки), значения рекомендуется устанавливать в пикселях.
border-style—устанавливает стиль границы вокруг элемента. Допустимо задавать индивидуальные стили для разных сторон элемента.
Значения:
border-color— устанавливает цвет границы на разных сторонах элемента. Свойство позволяет задать цвет границы сразу для всех сторон элемента или только для указанных.
|
|
|
Border — это универсальное свойство, которое позволяет одновременно установить толщину, стиль и цвет границы (рамки) вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству.
.table{
border: 2px solid red;
}
С помощьюCSS-свойства border можно задавать как внешние рамки таблицы, так и рамки каждой ячейки.
Вот пример оформления таблицы:
<style>
.table{
border-width: 2px;
border-color: black;
border-style: solid;
}
.td {
border-width: 1px;
border-color: grey;
border-style: solid;
}
</style>
<table class="table">
<trclass="tr" >
<td class="td">Ячейка 1</td>
<td class="td">Ячейка 2</td>
</tr>
<trclass="tr">
<td class="td">Ячейка 3</td>
<td class="td">Ячейка 4</td>
</tr>
<trclass="tr">
<td class="td">Ячейка 5</td>
<td class="td">Ячейка 6</td>
</tr>
</table>
А вот как она будет выглядеть в браузере:
Мы задали рамки таблицы с помощью CSS, но они не так хороши, как хотелось бы. По умолчанию браузер рисует рамки таблицы и рамки отдельных ячеек раздельно, это отлично видно на примере.
Чтобы избавиться от таких двойных рамок, используется CSS-свойство таблицы border-collapse. Вот так:
.table {
border-collapse: collapse;
}
Значение collapse убирает двойные рамки (cхлопываются рамки соседних ячеек, а также рамки ячеек и внешняя рамка таблицы). Вот как будет выглядеть наша таблица, если мы применим это CSS свойство:
|
|
|
Точная настройка рамок
Иногда требуется, чтобы рамки ячеек в таблице отображались не полностью. Например, чтобы отображалась только нижняя рамка ячеек, тогда таблица получается расчерченной по горизонтали. Точно также, если отображать только боковые рамки ячеек, то таблица получается разбитой на столбцы.
Такие эффекты легко достигаются с помощью CSS. Для этого необходимо использовать не свойство border, которое задаёт рамки для всех сторон ячейки, а одно из свойств:
· border-top,
· border-right,
· border-bottom,
· border-left.
Эти свойства задают отображение только одной рамки ячейки: верхней, правой, нижней или левой соответственно.
Отступы внутри ячейки
Мы освоили простейшие приёмы для работы с рамками таблиц. Наша таблица уже смотрится аккуратно, но содержимое ячеек прилипает к рамкам. Если добавить отступы внутри ячеек, то информация будет восприниматься намного лучше.
Отступы внутри ячеек можно добавлять с помощью CSS свойства padding, которое задаёт «внутренние отступы элемента» со всех сторон. Можно задавать отступы для каждой из сторон отдельно, используя свойства:padding-top, padding-right, padding-bottom, padding-left.
|
|
|
Отступы между ячейками
Большинство задач по оформлению таблиц решаются с помощью работы с рамками, отступами внутри ячеек, изменения цвета фона ячеек.
Помимо внутренних отступов можно задавать отступы между ячейками таблицы.
Отступы между ячейками не работают с border-collapse: collapse, что достаточно логично, ведь рамки ячеек в этом режиме «склеены» и их не разорвать.
Поэтому мы будем использовать border-collapse: separate, которое «расклеивает» ячейки. На самом деле это значение по умолчанию, а мы используем его только для наглядности. Если удалить свойство border-collapse, то результат не изменится, ячейки будут отображаться раздельно.
Отступы между ячейками можно задать:
· с помощью атрибута cellspacing тега <table>
· или c помощью CSS-свойства border-spacing.
Отметим, что свойство border-spacing задаётся для таблицы, в отличие от padding, которое задаётся для ячеек.
Вот, что мы получим используя свойство border-spacing для таблицы со значением 5px, и свойствоpaddingдля всех ячеек со значением 15px.
Объединяем ячейки в строках
Мы подобрались к одному из самых сложных вопросов по работе с таблицами. Это объединение ячеек.
Когда вы объединяете ячейки в текстовом редакторе, например, Word, то программа многое делает за вас. В HTML задача объединения сложнее, однако, не стоит пугаться, сам принцип объединения ячеек не так уж сложен, просто нужно больше внимательности.
Начнём с объединения ячеек по горизонтали. Чтобы объединить ячейки по горизонтали, необходимо использовать атрибут colspan у тега <td>.
Когда вы задаёте ячейке атрибут colspan со значением 2, то ячейка как бы «растягивается» на ячейку справа, но та ячейка не исчезает, а отодвигается и в таблице появляется новый столбец.
Чтобы удалить его, нужно удалить ячейку, которая находится справа от «растянутой».
Вот как будет выглядеть результат:
<table class="table">
<trclass="tr" >
<td class="td" colspan="2">Ячейка</td>
</tr>
<trclass="tr">
<td class="td">Ячейка</td>
<td class="td">Ячейка</td>
</tr>
<trclass="tr">
<td class="td">Ячейка</td>
<td class="td">Ячейка</td>
</tr>
</table>
Объединяем ячейки в столбцах
Объединение нескольких ячеек по вертикали тоже возможно. Как вы помните, при вертикальном объединении вытесняются ячейки, которые находятся в строках с «растягиваемой» ячейкой. И эти ячейки вытесняются справа в своих строках.
Когда вы задаёте ячейке атрибут rowspan со значением 2, то ячейка как бы «растягивается» на ячейку, но только на ту которая находится ниже её. А та в свою очередь выталкивает соседнюю ячейку в право.
И для того, чтобы нам придать более естественный вид таблице, нам потребуется удалить вторую ячейку во второй строке. Вот результат:
Выравнивание содержимого в ячейках
Содержимое ячеек можно выравнивать по горизонтали и по вертикали с помощью CSS.
За выравнивание по горизонтали отвечает CSS-свойство text-align. Чаще всего используются значения left, center и right.
За выравнивание по вертикали отвечает CSS-свойство vertical-align. Чаще всего используются значения top, middle и bottom.
На самом деле, значений у обоих свойств больше, но в случае с ячейками нас интересуют только перечисленные.
Чтобы задать выравнивание содержимого ячеек, надо в стилях указать:
.td {vertical-align: значение;text-align: значение;}Эти стили повлияют на все ячейки. Чтобы задать выравнивание только в определённых ячейках, нужно назначить им классы и определить стили для классов.
CSS
Дата добавления: 2018-05-02; просмотров: 275; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!