Как закрасить ячейку
Дополним нашу таблицу данными еще нескольких человек
<HTML> <HEAD> <TITLE>Телефонный справочник </TITLE> </HEAD> <BODY> <P ALIGN="CENTER"> <TABLE BORDER=1 BorderCOLOR=”#006600” width="400" BGCOLOR="#FFFFCC"> <TR BGCOLOR=”#99CC33”> <TD>№</TD> <TD>Фамилия</TD> <TD>Номер телефона</TD> </TR> <TR> <TD>1</TD> <TD>Фрося Бурлакова</TD> <TD>8-952-987-13-20</TD> </TR> <TR> <TD>2</TD> <TD>Иван Петров</TD> <TD>8-918-964-70-11</TD> </TR> <TR> <TD>3</TD> <TD>Афоня Ивлев</TD> <TD>8-961-594-12-45</TD> </TR> </TABLE> </P> </BODY> </HTML>
Результат
Теперь давайте закрасим столбец с нумерацией. Так как в HTML нет понятия столбец, то на первый взгляд это выглядит затруднительно. Но на самом деле все довольно просто: в каждой строке нужно закрасить первую ячейку. То есть в тэге <TD> прописать атрибут BGCOLOR и указать цвет
<HTML> <HEAD> <TITLE>Телефонный справочник </TITLE> </HEAD> <BODY> <P ALIGN="CENTER"> <TABLE BORDER=1 BorderCOLOR=”#006600” width="400" BGCOLOR="#FFFFCC"> <TR BGCOLOR=”#99CC33”> <TD>№</TD> <TD>Фамилия</TD> <TD>Номер телефона</TD> </TR> <TR> <TD BGCOLOR=”#FFFF99”>1</TD> <TD>Фрося Бурлакова</TD> <TD>8-952-987-13-20</TD> </TR> <TR> <TD BGCOLOR=”#FFFF99”>2</TD> <TD>Иван Петров</TD> <TD>8-918-964-70-11</TD> </TR> <TR> <TD BGCOLOR=”#FFFF99”>3</TD> <TD>Афоня Ивлев</TD> <TD>8-961-594-12-45</TD> </TR> </TABLE> </P> </BODY> </HTML>
В браузере вы увидите такую таблицу:
Как в Ворде убрать границы таблицы, а текст оставить?
Текстовый редактор MS Word имеет много функций, в том числе и построение таблиц и снятие границ таблицы.
Заходим на странице MS Word во вкладку «Главная» и нажимаем на иконку «Границы».
В меню, которое появилось на экране выбираем пункт «Отобразить сетку».
Выделяем таблицу мышью и выбираем пункт «Свойства таблицы», в открывшемся окне выбираем пункт «Границы и заливка»
На экране выбираем пункт «Нет», и в разделе «Применить к» выбираем «Таблице» и нажимаем кнопку «Ок».
Получается вот такая картинка без таблицы с сохранением текста:
Убрать границы таблиц можно в меню, там, где отображены границы таблицы. На вкладке «вставка» есть таблица, управление таблицей, там можно убрать границы таблицы, просто сделать невидимыми, можно снова вернуть. Еще там же есть карандаш и ластик — «вручную» ластиком убрать.
Нарисовали таблицу (вставили в нее текст):
Теперь кликнули ПКМ, чтобы вызвать контекст:
Задаем границы — кликаем по той, которую надо убрать и она исчезает:
Для этого кликнуть по треугольничку, чтобы открыть выпадающее меню с контекстом.
Также, можно редактировать таблицу при помощи контекстного меню «свойства таблицы» — это меню всегда вызывается, кликнув ПКМ по таблице:
После этого работать с таблицей, выбрав «таблица», а там будут «границы и заливка».
Далее в окне «Границы и заливка» там, где «граница» выбираем «образец» и редактируем границы по своему усмотрению. В данном примере убирают нижнюю границу, вот так:
Нижней границы не стало, так со всеми:
В Ворде достаточно удобно работать с таблицами, благодаря которым мы можем легко разместить текст в выбранных интервалах, что обеспечивает быстроту исполнения документа.
После того, как текст набран в таблице, все её границы или только их часть можно просто сделать невидимыми и для этого нужно нажать на активную иконку «таблица» и выбрать необходимое действие. В этом случае и текст остается в нужном положении и табличные линии будут не видны.
Если необходимо выполнить особые действия с таблицей, то здесь в помощь будет уже верхняя панель для работы в таблице и там предусматриваются дополнительные опции:
Как сделать таблицу в HTML
За таблицы в вёрстке отвечает такой набор тегов:
Теперь разберём каждый тег отдельно:
- отвечает за всю таблицу и за то, как она выглядит. Браузер понимает, что всё, что лежит внутри этого тега, относится к таблице.
- отвечает за строку. В таблице может быть сколько угодно строк, ограничений нет.
- отвечает за ячейки в строке. В каком порядке написаны ячейки с содержимым, в таком порядке они и появятся в таблице.
Сделаем простую таблицу из двух строк, по 3 ячейки в каждой. В коде это выглядит громоздко, но на деле всё получится компактно:
Таким способом можно сделать таблицу любого размера — хоть 100 строк по 500 ячеек в каждой.
Обратите внимание, что браузер нарисовал таблицу невидимой. Это не всегда так
Раньше браузеры рисовали таблицы с чётко видимыми границами, и некоторые браузеры делают так до сих пор. Чтобы таблица выглядела одинаково у всех, смотрите следующий раздел.
Расстояние между ячейками
CSS даёт возможность установить конкретное расстояние между ячейками таблицы. Для этого используется
свойтсво border-spacing. Значением свойства является расстояние в
единицах измерения CSS.
Это свойство не работает, если установлено свойство border-collapse со значением
collapse.
Создадим ещё одну таблицу и установим расстояние между ячейками:
Стиль:
| 15161718 |
#dis
{
border-spacing: 10px;
}
|
HTML код:
| 313233343536373839 |
<table id="dis">
<tr>
<td>строка 1 ячейка 1</td>
<td>строка 1 ячейка 2</td>
</tr>
<tr>
<td>строка 2 ячейка 1</td>
<td>строка 2 ячейка 2</td>
</tr></table>
|
Свойству border-spacing можно
указать два значения через пробел. При этом,
первое значение — это расстояние по горизонтали, а второе — по вертикали.
Укажем созданной таблице разные расстояния. 17 строка будет выглядеть так:
| 17 |
border-spacing: 5px 15px; |
Применяя условно
Наведение, фокус и другие состояния
Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use to only apply the utility on hover.
For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.
Контрольные точки и медиа-запросы
You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use to apply the utility at only medium screen sizes and above.
To learn more, check out the documentation on Responsive Design, Dark Mode and .
Отображение границ вокруг ячеек таблицы
Вы можете сказать: — так, мы убрали промежуток между ячейками, используя свойство border-spacing со значением , но почему у нас теперь границы у ячеек то пересекаются?
Двойные границы образуются из-за того, что нижняя граница одной ячейки добавляется к верхней границе ячейки, которая находится под ней, аналогичная ситуация происходит по бокам ячеек и это логично с точки зрения отображения таблицы, но к счастью есть способ, сообщить браузеру, что мы не хотим видеть такое развязное поведение границ ячеек.
Для этого необходимо использовать CSS свойство border-collapse. Как не странно, но использование свойства border-collapse со значением collapse является лучшим способом как можно убрать промежуток между ячейками и при этом не получить двойных границ между ними.
Рассмотрим сравнение поведения границ при использовании свойства border-spacing со значением и свойства border-collapse со значением collapse:
<!DOCTYPE html>
<html>
<head>
<title>Пример отображения границ вокруг ячеек таблицы</title>
<style>
table {
float: left; /* таблицы становятся плавающими элементами, смещенными по левому краю */
margin-right: 30px; /* устанавливаем внешние отступы справа */
}
td, th {
border: 5px solid #F50; /* задаем сплошную границу размером 5 пикселей цвета #F50 */
width: 50px; /* ширина ячеек */
height: 75px; /* высота ячеек */
}
caption {
font-weight: bold; /* жирное начертание */
}
.first {
border-spacing: ; /* промежуток между ячейками таблицы отсутствует */
}
.second {
border-collapse: collapse; /* объединяем границы ячеек в одну */
}
</style>
</head>
<body>
<table class = "first">
<caption>border-spacing: 0;</caption>
<tr>
<th>1</th><th>2</th><th>3</th>
</tr>
<tr>
<td>2</td><td></td><td></td>
</tr>
<tr>
<td>3</td><td></td><td></td>
</tr>
</table>
<table class = "second">
<caption>border-collapse: collapse;</caption>
<tr>
<th>1</th><th>2</th><th>3</th>
</tr>
<tr>
<td>2</td><td></td><td></td>
</tr>
<tr>
<td>3</td><td></td><td></td>
</tr>
</table>
</body>
</html>
В данном примере мы:
- Сделали наши таблицы плавающими и сместили по левому краю (float: left), установили для них внешний отступ справа равный 30px.
- Установили для наименования таблицы (тег <caption>) – жирное начертание.
- Для ячеек таблицы (заголовочные и ячейки данных) мы установили сплошную границу размером 5 пикселей шестнадцатеричным цветом #F50 и установили фиксированную ширину 50px и высоту 75 пикселей.
- Для первой таблицы с классом .first мы установили промежуток между ячейками таблицы равный нулю (border-spacing: ;), а для второй таблицы с классом .second установили свойство border-collapse со значением collapse, которое объединяет границы ячеек в одну, когда это возможно.
Результат нашего примера:
Рис. 146 Пример отображения границ вокруг ячеек таблицы.
Свойство border-collapse имеет всего два значения для отображения границ вокруг ячеек таблицы:
| Значение | Описание |
|---|---|
| separate | Отдельно стоящие границы (свойства border-spacing и empty-cells не будут игнорироваться). Это значение по умолчанию. |
| collapse | Границы объединяются в одну, когда это возможно (свойства border-spacing и empty-cells игнорируются). |
Обратите внимание, что когда мы используем свойство border-collapse со значением collapse такие свойства как border-spacing и empty-cells игнорируются (не употребляйте их одновременно)! Стоп, а что за empty-cells?
Создание пользовательского стиля границы ячейки
Вы можете создать стиль ячейки, который содержит настраиваемую границу, а затем применить его, если нужно отобразить настраиваемую границу вокруг выбранных ячеек. На вкладке Главная в группе Стили нажмите кнопку Стили ячеек. Совет: Если вы не видите кнопку Стили ячеок, щелкните Стили ,а затем нажмите кнопку Дополнительные окне рядом с полем Стили ячеок. Выберите команду Создать стиль ячейки. В поле Имя стиля введите соответствующее имя для нового стиля ячейки. Нажмите кнопку Формат. На вкладке Граница в области Линияв поле Стиль выберите тип линии, который вы хотите использовать для границы. В поле Цвет выберите нужный цвет. В областиГраница нажмите кнопки границы, чтобы создать границу, которую вы хотите использовать. Нажмите кнопку ОК. В диалоговом окне Стиль в области Стили (по примеру)сберите флажки для форматирования, которое не нужно включать в стиль ячейки. Нажмите кнопку ОК. Чтобы применить стиль ячейки, сделайте следующее: Вы выберите ячейки, которые нужно отформатирование с помощью пользовательской границы ячеек. На вкладке Главная в группе Стили нажмите кнопку Стили ячеек. Выберите только что созданный пользовательский стиль ячеок. Как например, кнопка FancyBorderStyle на этом рисунке.
Рассинхронизовать границы ячеек в таблице при редактировании
Как в таблице выделять жирным границы ячеек?Здравствуйте,подскажите пожалуйста,как в таблице выделять жирным границы ячеек (например только у.
Как в таблице выделять жирным границы ячеек?Здравствуйте,подскажите пожалуйста,как в таблице выделять жирным границы ячеек (например только у.
Ошибка при редактировании записи в таблицеecho ‘ .
Ошибка при редактировании данных в таблицеПривет, короче беда в том, что при редактировании, когда я уже обновляю данные в таблице выдает вот.
Вложения
| test.doc (25.0 Кб, 6 просмотров) |
Вложения
| test (1).doc (28.0 Кб, 6 просмотров) |
Сообщение от Fairuza
Помощь в написании контрольных, курсовых и дипломных работ здесь.
При редактировании данных в подчиненной форме данные в таблице сдвигаютсяДобрый день. В чем суть проблемы: Создал форму «Change_form» для поиска, просмотра и.
При редактировании текста в таблице, цвет ячейки менялся автоматическиЗдравствуйте, вопрос такой, есть таблица в ней есть значения по типу открыто фон ячейки зеленый.
При вставке данных из Access границы ячеек очерчивалисьВставляю данные из Access в Excel-евский файл начиная с 5-ой строки листа. Данные вставляются, но.
Видны тонкие границы ячеек при просмотре на телефоне (Safari, Chrome)Здравствуйте! Очень прошу помочь, т.к. уже несколько дней ищу решение следующей проблемы: .
Работа с отступами в таблице
В статье «Блочная и строчная модель в CSS» мы научились применять внутренние и внешние отступы к текстовой информации, добавляя промежуток вокруг содержимого элементов. При работе с таблицами надо понимать, что добавить внутренний отступ (padding) вы сможете либо к её заголовку, либо к ее ячейкам, напрямую к тегу <table> добавить вы сможете только внешний отступ (margin):
<!DOCTYPE html>
<html>
<head>
<title>Использование внутренних отступов в таблице</title>
<style>
table {
margin: 0 auto; /* центруем по горизонитали внешними отступами */
}
td, th {
border: 1px solid #F50; /* задаем сплошную границу размером 1 пиксель цвета #F50 */
padding: 19px; /* устанавливаем внутренние отступы для всех сторон */
}
caption {
padding-bottom: 19px; /* устанавливаем внутренние отступы снизу для всех сторон */
}
</style>
</head>
<body>
<table>
<caption>Отступы в таблице</caption>
<tr>
<th>1</th><th>2</th><th>3</th><th>4</th>
</tr>
<tr>
<td>2</td><td></td><td></td><td></td>
</tr>
<tr>
<td>3</td><td></td><td></td><td></td>
</tr>
<tr>
<td>4</td><td></td><td></td><td></td>
</tr>
</table>
</body>
</html>
В данном примере мы:
- Разместили таблицу по центру, используя прием центровки по горизонитали внешними отступами (margin: 0 auto).
- Для ячеек таблицы (заголовочные и ячейки данных) мы установили сплошную границу размером 1 пиксель шестнадцатеричным цветом #F50 и установили внутренние отступы размером 19 пикселей для всех сторон.
- Для наименования таблицы (тег <caption>) мы установили внутренний отступ снизу равный 19 пикселей. Надеюсь, Вас не смущают неровные числа
Результат нашего примера:
Рис. 144 Пример использования внутренних отступов в таблице.
Алгоритм размещения макета таблицы браузером
В CSS по умолчанию используется алгоритм автоматического размещения макета таблицы браузером. В этом случае ширина столбца задается самым широким неразрывным содержимым ячейки. Данный алгоритм может быть в некоторых случаях медленным, так как браузер должен прочитать все содержимое в таблице, прежде чем определить её окончательный макет.
Чтобы изменить тип размещения макета таблицы браузером с автоматического на фиксированный, необходимо использовать CSS свойство table-layout со значением fixed.
В этом случае горизонтальное размещение зависит только от ширины таблицы и ширины столбцов, а не от содержимого ячеек. Браузер начинает отображать таблицу сразу после того, как получена первая строка. Как следствие, фиксированный алгоритм, позволяет создавать макет такой таблицы быстрее, чем используя автоматический вариант. При работе с большими таблицами в целях увеличения производительности вы можете использовать фиксированный алгоритм.
Давайте рассмотрим применение этого свойства на следующем примере:
<!DOCTYPE html>
<html>
<head>
<title>Пример использования свойства table-layout</title>
<style>
table {
width: 50%; /* задаем ширину таблицы */
word-wrap: break-word; /* слово может быть прервано в произвольном месте */
}
td, th {
border: 1px solid Chocolate; /* задаем сплошную границу размером 1 пиксель цвета шоколад */
}
.test {
table-layout: auto; /* автоматический алгоритм размещения макета таблицы браузером (по умолчанию) */
}
.test2 {
table-layout: fixed; /* фиксированный алгоритм размещения макета таблицы браузером */
}
</style>
</head>
<body>
<table class = "test">
<caption>table-layout: auto;</caption>
<tr>
<th>Наименование</th><th>2009</th><th>2010</th><th>2011</th><th>2012</th><th>2013</th><th>2014</th><th>2015</th><th>2016</th>
</tr>
<tr>
<td>Пшеница</td><td>125</td><td>215</td><td>2540</td><td>33287</td><td>695878</td><td>1222222</td><td>125840000</td><td>125</td>
</tr>
</table>
<table class = "test2">
<caption>table-layout: fixed;</caption>
<tr>
<th>Наименование</th><th>2009</th><th>2010</th><th>2011</th><th>2012</th><th>2013</th><th>2014</th><th>2015</th><th>2016</th>
</tr>
<tr>
<td>Пшеница</td><td>125</td><td>215</td><td>2540</td><td>33287</td><td>695878</td><td>1222222</td><td>125840000</td><td>125</td>
</tr>
</table>
</body>
</html>
В данном примере мы:
К одной и той же таблице применили различные алгоритмы размещения макета таблицы браузером. Для первой таблицы мы использовали автоматический алгоритм (auto)
Обратите внимание, что при этом размер таблицы стал больше заданного значения в 50% от родительского элемента (произошло переполнение).
Кроме того мы использовали для таблиц новое для вас свойство word-wrap, которое указывает браузеру, переносить или нет длинные слова, которые не помещаются по ширине в заданную область (разрешается ли разрывать строки внутри слов). Значение break-word указывает, что слово может быть прервано в произвольном месте, если нет допустимой точки для разрыва.
Для второй таблицы был использован фиксированный алгоритм (fixed) размещения макета таблицы браузером
Как вы можете заметить размер таблицы соответствует заданным нами значениям ширины в процентах, а числа прерваны в произвольных местах, чтобы не произошло переполнение. Если бы мы не использовали свойство word-wrap, то ширина второй таблицы бы не изменилась, но числа переполнили бы ячейки (вышли из ячеек).
Рис. 151 Пример использования свойства table-layout.
Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите практическое задание:
Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл) в любую папку на вашем жестком диске:
Используя полученные знания составьте следующую таблицу:
Практическое задание № 31.
Если у Вас возникают трудности при выполнении практического задания, Вы всегда можете открыть пример в отдельном окне и проинспектировать страницу, чтобы понять какой код CSS был использован.
CSS функции:
радиальные градиенты
Позиционирование элементов
×
Кажется, вы используете блокировщик рекламы 
Этот ресурс не является коммерческим проектом и развивается на энтузиазме автора сайта, который посвящает все свое свободное время этому проекту.
Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.
Как отключить?
Поддержать
Упражнение: ваша первая таблица
Итак, мы уже достаточно говорили о теории, теперь возьмём конкретный пример и построим таблицу.
- Прежде всего, создайте локальную копию blank-template.html и minimal-table.css в новой папке на вашем компьютере.
- Содержимое любой таблицы заключается между двумя тегами : . Добавьте их в тело HTML.
- Самым маленьким контейнером в таблице является ячейка, она создаётся элементом (‘td’ — сокращение от ‘table data’). Введите внутри тегов table следующее:
- Чтобы получить строку из четырёх ячеек, необходимо скопировать эти теги три раза. Обновите содержимое таблицы так, чтобы она выглядела следующим образом:
Как видите, ячейки не располагаются одна под другой, на самом деле они автоматически выравниваются по отношению к другим ячейкам той же строки. Каждый элемент создаёт отдельную ячейку, а все вместе они создают первую строку. Каждая добавленная ячейка удлиняет эту строку.
Чтобы эта строка перестала расти, а новые ячейки перешли на вторую строку, необходимо использовать элемент (‘tr’ — сокращение от ‘table row’). Попробуем, как это получится.
-
Поместите четыре уже созданных ячейки между тегами как здесь показано:
- Теперь, когда одна строка уже есть, добавим ещё — каждую строку надо вложить в дополнительный элемент , а каждая ячейка должна быть внутри .
В результате получится таблица, которая будет выглядеть примерно так:
| Hi, I’m your first cell. | I’m your second cell. | I’m your third cell. | I’m your fourth cell. |
| Second row, first cell. | Cell 2. | Cell 3. | Cell 4. |
Примечание: Этот пример можно также найти на GitHub под названием simple-table.html (see it live also).
Способ 1: Использование стандартных заготовок
В Excel есть стандартные заготовки, которые чаще всего подходят обычным пользователям для обозначения границ таблицы. Они предполагают разное выделение линий и переходов, поэтому окажутся полезными в конкретных случаях. Для добавления таких границ понадобится выполнить всего пару кликов.
- С зажатой левой кнопкой мыши выделите все элементы, входящие в таблицу, чтобы визуальные изменения применились к ним всем.
Разверните меню «Границы», которое находится на вкладке «Главная», и выберите один из готовых вариантов. В этом же меню сразу можно просмотреть изменения, вносимые в таблицу, через миниатюру слева.
После применения границ вернитесь к таблице и оцените ее внешний вид. Если он вам подходит, можно оставить все как есть, в противном случае перейдите к дополнительным настройкам.
Например, ничего не помешает открыть то же меню и изменить цвет линии с помощью стандартных цветов, цветов темы или пользовательских оттенков.
То же самое касается и типа линий, однако здесь набор ограничен всего несколькими разными непрерывными и пунктирными вариантами.
Если цвет и тип линий выбирается уже после создания границ, каждую из них понадобится отдельно изменять, кликая левой кнопкой мыши при активном инструменте редактирования.
Во время этого процесса могут появиться ошибочные линии из-за неправильных нажатий.
Тогда уберите их через это же выпадающее меню с помощью инструмента «Стереть границу».
Если вам не подходят классические варианты или возникла потребность в необычной кастомизации границ таблицы, используйте следующие варианты визуального оформления.
Способ 2: Ручное рисование границы
Ручное рисование границы для таблицы в Excel позволит создать индивидуальное оформление каждой линии так, как это необходимо самому пользователю. Для этого воспользуйтесь все тем же выпадающим меню, но выполните немного другие действия.
- Откройте список «Границы», в котором выберите инструмент «Нарисовать границу».
Если тип линии и ее цвет будут отличаться от установленных по умолчанию, сразу же измените их, чтобы при рисовании создавать правильное оформление.
Начните рисовать границы, кликая мышкой по необходимым полям или проводя по ним, сразу создавая визуал для каждого поля.
Как удалить формат столбца в Word 2007
- Программное обеспечение
- Microsoft Office
- Word
- Как удалить формат столбца в Word 2007
Word 2007 предлагает два способа удаления формата столбца : вы можете вернуться в режим одного столбца, чтобы удалить формат столбца только из части документа, или вы можете удалить столбцы из всего документа.
Вернуться в режим одного столбца
Этот метод предотвращает включение столбцов в формат страницы и возвращает вас к стандартному тексту с одним столбцом в документе Word 2007.
Поместите указатель вставки в то место, где вы хотите, чтобы ваши столбцы останавливались.
Щелкните вкладку Макет страницы.
В группе Параметры страницы выберите Столбцы → Другие столбцы.
В диалоговом окне «Столбцы» выберите «Один» в области «Наборы».
В раскрывающемся списке «Применить к» выберите «Переслать на эту точку».
Остановка столбцов и восстановление обычного текста в один столбец.
Что такое таблица ?
Таблица — это структурированный набор данных, состоящий из строк и столбцов (табличных данных). Таблицы позволяют быстро и легко посмотреть значения, показывающие некоторую взаимосвязь между различными типами данных, например — человек и его возраст, или расписание в плавательном бассейне.
Люди постоянно используют таблицы, причём уже давно, как показывает документ по переписи в США, относящийся к 1800 году:
Так что не удивительно, что создатели HTML включили в него средства для структурирования и представления табличных данных в сети.
Смысл таблицы в том, что она жёсткая. Информацию легко интерпретировать, визуально сопоставляя заголовки строк и столбцов. Например, посмотрите на приведённую ниже таблицу и найдите единственное личное местоимение, используемое в третьем лице , с полом , выступающее в качестве объекта в предложении. Ответ можно найти, сопоставив соответствующие заголовки столбцов и строк.
| Субъект | Объект | ||
|---|---|---|---|
| Единствен. числ. | 1 Лицо | Я | меня |
| 2 Лицо | ты | тебя | |
| 3 Лицо | он | его | |
| она | её | ||
| o | оно | его | |
| Множ.числ. | 1 Лицо | мы | нас |
| 2 Лицо | вы | вас | |
| 2 Лицо | они | их |
Если правильно представить таблицу HTML, интерпретировать её данные смогут даже люди, имеющие проблемы со зрением.
HTML-таблицы следует использовать для табличных данных — это то, для чего они предназначены. К сожалению, многие используют таблицы HTML для оформления веб-страниц, например, одна строка для заголовка, одна для содержимого, одна для сносок, и тому подобное. Подробнее об этом можно узнать в разделе на Начальном обучающем модуле доступности. Это происходило из-за плохой поддержки CSS в разных браузерах; в наше время такое встречается гораздо реже, но иногда всё же попадается.
Короче говоря, использование таблиц в целях оформления вместо методов CSS является плохой идеей по следующим причинам :
- Таблицы, используемые для оформления, уменьшают доступность страниц для людей, имеющих проблемы со зрением: ), используемые ими, интерпретируют HTML-теги и читают содержимое пользователю. Поскольку таблицы не являются средством для представления структуры таблицы, и разметка получается сложнее, чем при использовании методов CSS, скринридеры вводят пользователей в заблуждение.
- Таблицы создают путаницу тегов: Как уже упоминалось, оформление страниц с помощью таблиц даёт более сложную структуру разметки, чем специально предназначенные для этого методы. Соответственно, такой код труднее писать, поддерживать и отлаживать.
- Таблицы не реагируют автоматически на тип устройства: У надлежащих контейнеров (например, , , , или ) ширина по умолчанию равна 100% от их родительского элемента. У таблиц же размер по умолчанию подстраивается под их содержимое, так что чтобы они одинаково хорошо работали на разных типах устройств необходимо принимать дополнительные меры.
Строки и ячейки таблицы
Каждая таблица состоит из строк и ячеек, а задаётся тегом <table> — это контейнер для остальных тегов таблицы.
Тег <tr> образует контейнер для создания строки таблицы. Каждая ячейка в такой строке устанавливается с помощью тега <td> (хотя первая может быть задана и тегом <th>).
Важно понимать. Дочерними элементами строки могут быть только ячейки (и заголовочная ячейка
)
А сама строка
Рассмотрим пример:
Мы видим три строки (элементы <tr>). В каждой из строк по три ячейки (<td>). Представим это HTML-кодом:
Объединение ячеек
Ячейки можно объединять (растягивать по горизонтали и вертикали) с помощью специальных атрибутов. При этом поглощаемые ячейки задавать своими тегами уже не придётся.
Столбцы таблицы объединяются атрибутом colspan, а строки — атрибутом rowspan.
И тут важно не запутаться:
Атрибут colspan тегов <td> и <th> объединяет ячейки по горизонтали (то есть ячейки одной строки). Значение colspan указывает, сколько столбцов пересекает ячейка.
Атрибут rowspan тегов <td> и <th> объединяет ячейки по вертикали (то есть ячейки разных строк). Значение rowspan задаёт, через сколько строк проходит ячейка.
Рассмотрим пару примеров:
| 1 | 2 | |
|---|---|---|
| 1 | 2 | |
| 1 | 2 | 3 |
| 1 | 2 |
Вторая ячейка первой строки пересекает два столбца. То есть она растянулась по горизонтали и приняла в себя третью ячейку первой строки. Третья ячейка второй строки пересекает две строки, то есть растянулась по вертикали, заняв и третью ячейку третьей строки.
Поэтому третьи ячейки для первой и третьей строк задавать не нужно. Они уже поглощены другими. Теперь к коду:
Ещё один пример:
| 1 | 2 | 3 |
|---|---|---|
| 1 | 2 | 3 |
| 1 | 2 | |
| 1 |
Как такое сверстать:
Как создать таблицу в HTML
Для того, чтобы добавить таблицу на веб-страницу нужно использовать тег <table>. А для того, чтобы добавить строки и ячейки — теги <tr> и <td>.
Внутри тега <table> допустимо использовать следующие элементы: <caption>, <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead> и <tr>.
Давайте создадим простую таблицу используя вышеупомянутые теги. Откройте любой текстовый редактор (можно обычный Блокнот) и впишите в него следующий код:
Сохраните созданный файл с расширением .html (Например: index.html).
Вот мы и создали свою первую простую таблицу с одной строкой и двумя ячейками.
Давайте более детально рассмотрим вышеупомянутый код.
- тег <table> — служит контейнером для элементов, определяющих содержимое таблицы.
- тег <tr> — служит контейнером для создания строки таблицы.
- тег <td> — используется в таблицах внутри тегов <tr> для создания ячеек с данными.
Стилизация столбцов
И последняя возможность, о которой рассказывается в данной статье. HTML позволяет указать, какой стиль нужно применять к целому столбцу данных сразу — для этого применяют элементы и . Их ввели, поскольку задавать стиль для каждой ячейки в отдельности или использовать сложный селектор вроде (en-US) было бы слишком утомительно.
Возьмём простой пример:
Что даёт нам:
| Data 1 | Data 2 |
|---|---|
| Calcutta | Orange |
| Robots | Jazz |
Он не идеален, поскольку нам пришлось повторить информацию о стиле для всех трёх ячеек в столбце (в реальном проекте, возможно, придётся вводить на всех трёх и вводит правило в таблице стилей). Вместо этого, мы можем задать информацию один раз, в элементе . задаётся в контейнере сразу же за открывающим тегом . Эффект, который мы видели выше, можно задать так:
Мы определяем два «стилизующих столбца». Мы не применяем стиль к первому столбцу, но пустой элемент ввести необходимо — иначе к первому столбцу не будет применён стиль.
Если бы мы хотели применить информацию о стиле к обоим столбцам, мы могли бы просто ввести один элемент с атрибутом span, таким образом:
Подобно и , принимает безразмерное числовое значение, указывающее, к какому количеству столбцов нужно применить данный стиль.
Теперь попробуйте сами.
Ниже приведена таблица уроков по языкам. В пятницу (Friday) новый класс целый день изучает голландский (Dutch), кроме того, во вторник (Tuesday) и четверг (Thursdays) есть занятия по немецкому (German). Учительница хочет выделить столбцы, соответствующие дням, когда она преподаёт.
| Mon | Tues | Wed | Thurs | Fri | Sat | Sun | |
|---|---|---|---|---|---|---|---|
| 1st period | English | German | Dutch | ||||
| 2nd period | English | English | German | Dutch | |||
| 3rd period | German | German | Dutch | ||||
| 4th period | English | English | Dutch |
Заново создайте таблицу, проделав указанные ниже действия.
- Сначала создайте локальную копию файла timetable.html в новой папке на вашем компьютере. Код HTML содержит таблицу, которую вы уже видели выше, но без информации о стиле.
- Добавьте элемент вверху таблицы, сразу же под тегом , куда вы сможете вставлять элементы .
- Первые два столбца надо оставить без стиля..
- Добавьте цвет фона для третьего столбца. Значением атрибута будет
- Задайте ширину для четвёртого столбца. будет
- Добавьте цвет фона для пятого столбца. Значением атрибута будет
- Добавьте другой цвет фона и границу для шестого столбца, чтобы показать, что это особый день и она ведёт новый класс. Значениями атрибута будут:
- Последние два дня выходные; значением атрибута style
Посмотрите, что у вас получилось. Если застрянете, или захотите себя проверить, можете посмотреть нашу версию в timetable-fixed.html (посмотрите живой пример).
: Использование инструмента Другие границы
Инструмент под названием «Другие границы» позволит создать линии, не входящие в состав стандартных шаблонов, например, когда требуется перечеркнуть ячейку или добавить необычное оформление.
- В этом случае откройте все то же выпадающее меню «Границы», но выберите последний инструмент «Другие границы».
Начните создавать линии в специально отведенном для этого окне. Оно представлено в виде увеличенной ячейки с шаблонной надписью, а нажатие по граням позволяет сразу же добавить или убрать линию.
В этой вкладке можно сразу же изменить тип границы и ее цвет, ознакомившись с результатом в окне предпросмотра.
Зайдите на вкладку «Заливка», если нужно поменять цвет фона каждой ячейки, входящей в состав таблицы.
На следующем скриншоте вы видите вариант того, как нестандартно добавить границы, например, создав эффект перечеркнутой ячейки пунктиром или непрерывной линией.
Способ 3: Использование инструмента «Другие границы»
Инструмент под названием «Другие границы» позволит создать линии, не входящие в состав стандартных шаблонов, например, когда требуется перечеркнуть ячейку или добавить необычное оформление.
- В этом случае откройте все то же выпадающее меню «Границы», но выберите последний инструмент «Другие границы».
Начните создавать линии в специально отведенном для этого окне. Оно представлено в виде увеличенной ячейки с шаблонной надписью, а нажатие по граням позволяет сразу же добавить или убрать линию.
В этой вкладке можно сразу же изменить тип границы и ее цвет, ознакомившись с результатом в окне предпросмотра.
Зайдите на вкладку «Заливка», если нужно поменять цвет фона каждой ячейки, входящей в состав таблицы.
На следующем скриншоте вы видите вариант того, как нестандартно добавить границы, например, создав эффект перечеркнутой ячейки пунктиром или непрерывной линией.
