ConvertTo-Html (Microsoft.PowerShell.Utility) — PowerShell | Microsoft Learn
- Ссылка
- Модуль:
- Microsoft.PowerShell.Utility
Преобразует объекты .NET в код HTML, который может отображаться в веб-браузере.
Синтаксис
ConvertTo-Html [-InputObject <PSObject>] [[-Property] <Object[]>] [[-Body] <String[]>] [[-Head] <String[]>] [[-Title] <String>] [-As <String>] [-CssUri <Uri>] [-PostContent <String[]>] [-PreContent <String[]>] [-Meta <Hashtable>] [-Charset <String>] [-Transitional] [<CommonParameters>]
ConvertTo-Html [-InputObject <PSObject>] [[-Property] <Object[]>] [-As <String>] [-Fragment] [-PostContent <String[]>] [-PreContent <String[]>] [<CommonParameters>]
Описание
Командлет ConvertTo-Html преобразует объекты .
NET в HTML, которые можно отобразить в веб-браузере. Этот командлет можно использовать для отображения выходных данных команды на веб-странице.
Параметры можно использовать для выбора свойств объекта, указания формата таблицы или списка, указания заголовка ConvertTo-Html HTML-страницы, добавления текста до и после объекта, а также для возврата только фрагмента таблицы или списка вместо строгой страницы DTD.
При отправке нескольких объектов в ConvertTo-HtmlPowerShell создает таблицу (или список) на основе свойств первого отложенного объекта. Если у оставшихся объектов нет одного из указанных свойств, значением свойства этого объекта является пустая ячейка. Если оставшиеся объекты содержат дополнительные свойства, их значения не включаются в файл.
Примеры
Пример 1. Создание веб-страницы для отображения даты
ConvertTo-Html -InputObject (Get-Date)
Эта команда создает HTML-страницу, на которой отображаются свойства текущей даты.
Он использует параметр InputObject для отправки Get-Date результатов команды в ConvertTo-Html командлет .
Пример 2. Создание веб-страницы для отображения псевдонимов PowerShell
Get-Alias | ConvertTo-Html | Out-File aliases.htm Invoke-Item aliases.htm
Эта команда создает HTML-страницу со списком псевдонимов PowerShell в текущей консоли.
Команда использует Get-Alias командлет для получения псевдонимов. Оператор конвейера (|) используется для отправки псевдонимов командлету ConvertTo-Html , который создает HTML-страницу. Команда также использует командлет для Out-File отправки HTML-кода в aliases.htm файл.
Пример 3. Создание веб-страницы для отображения событий PowerShell
Get-EventLog -LogName "Windows PowerShell" | ConvertTo-Html | Out-File pslog.htm
Эта команда создает HTML-страницу с именем pslog.htm , которая отображает события в журнале событий Windows PowerShell на локальном компьютере.
Он использует Get-EventLog командлет для получения событий в журнале Windows PowerShell, а затем использует оператор конвейера (|) для отправки событий в ConvertTo-Html командлет. Команда также использует командлет для Out-File отправки HTML-кода в pslog.htm файл.
Команда также использует командлет для Out-File отправки HTML-кода в pslog.htm файл.
Пример 4. Создание веб-страницы для отображения процессов
Get-Process |
ConvertTo-Html -Property Name, Path, Company -Title "Process Information" |
Out-File proc.htm
Invoke-Item proc.htmЭти команды создают и открывают HTML-страницу, содержащую имя, путь и компанию для процессов на локальном компьютере.
Первая команда использует командлет для Get-Process
|) для отправки объектов процесса командлету ConvertTo-Html .
Команда использует параметр Property для выбора трех свойств объектов процесса, которые будут включены в таблицу. Команда использует параметр Title , чтобы указать заголовок html-страницы. Команда также использует командлет для Out-File отправки полученного HTML-кода в файл с именем Proc.htm.
Вторая команда использует Invoke-Item командлет для открытия в браузере Proc.htm по умолчанию.
Пример 5. Создание веб-страницы для отображения объектов службы
Get-Service | ConvertTo-Html -CssUri "test.css" <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>HTML TABLE</title> <link rel="stylesheet" type="text/css" href="test.css" /> ...
Эта команда создает HTML-страницу объектов службы, возвращаемых командлетом Get-Service . Команда использует параметр CssUri для указания каскадной таблицы стилей для HTML-страницы.
Параметр CssUri добавляет дополнительный <link rel="stylesheet" type="text/css" href="test.css"> тег в результирующий HTML-код. Атрибут HREF в теге содержит имя таблицы стилей.
Пример 6. Создание веб-страницы для отображения объектов службы
Get-Service | ConvertTo-Html -As LIST | Out-File services.htm
Эта команда создает HTML-страницу объектов службы, возвращаемых командлетом Get-Service . Команда использует параметр As для указания формата списка. Командлет Out-File отправляет результирующий HTML-код в Services.htm файл .
Пример 7. Создание веб-таблицы для текущей даты
Get-Date | ConvertTo-Html -Fragment <table> <colgroup>...</colgroup> <tr><th>DisplayHint</th><th>DateTime</th><th>Date</th><th>Day</th><th>DayOfWeek</th><th>DayOfYear</th><th>Hour</th> <th>Kind</th><th>Millisecond</th><th>Minute</th><th>Month</th><th>Second</th><th>Ticks</th><th>TimeOfDay</th><th>Year</th></tr> <tr><td>DateTime</td><td>Monday, May 05, 2008 10:40:04 AM</td><td>5/5/2008 12:00:00 AM</td><td>5</td><td>Monday</td> <td>126</td><td>10</td><td>Local</td><td>123</td><td>40</td><td>5</td><td>4</td><td>633455808041237213</td><td>10:40:04.12 37213</td><td>2008</td></tr> </table>
12
37213</td><td>2008</td></tr>
</table>Эта команда использует ConvertTo-Html для создания таблицы HTML текущей даты. Команда использует командлет для Get-Date получения текущей даты. Для отправки результатов в командлет используется оператор конвейера |).
Команда ConvertTo-Html включает параметр Fragment , который ограничивает выходные данные html-таблицей. В результате другие элементы HTML-страницы, например теги <HEAD> и <BODY>, пропускаются.
Пример 8. Создание веб-страницы для отображения событий PowerShell
Get-EventLog -Log "Windows PowerShell" | ConvertTo-Html -Property id, level, task
Эта команда использует Get-EventLog командлет для получения событий из журнала событий Windows PowerShell.
Он использует оператор конвейера (|) для отправки событий в ConvertTo-Html командлет, который преобразует события в формат HTML.
Команда ConvertTo-Html использует параметр Property для выбора только свойств ID, Level и Task события.
Пример 9. Создание веб-страницы для отображения указанных служб
$htmlParams = @{
Title = "Windows Services: Server01"
Body = Get-Date
PreContent = "<P>Generated by Corporate IT</P>"
PostContent = "For details, contact Corporate IT."
}
Get-Service A* |
ConvertTo-Html @htmlParams |
Out-File Services.htm
Invoke-Item Services.htmЭта команда создает и открывает веб-страницу, на которой отображаются службы на компьютере, начинающиеся с A. Для настройки выходных данных используются параметры ConvertTo-HtmlTitle, Body, PreContent и PostContent
В первой части команды используется Get-Service командлет для получения служб на компьютере, которые начинаются с A.
Команда использует оператор конвейера (|) для отправки результатов командлету ConvertTo-Html . Команда также использует командлет для Out-File отправки выходных данных в Services.htm файл.
Точка с запятой (;) завершает первую команду и запускает вторую команду, которая использует Invoke-Item командлет для открытия файла в браузере Services.htm по умолчанию.
Пример 10. Задание свойств Meta и кодировки HTML
Get-Service | ConvertTo-HTML -Meta @{
refresh=10
author="Author's Name"
keywords="PowerShell, HTML, ConvertTo-HTML"
} -Charset "UTF-8"Эта команда создает HTML-код для веб-страницы с метатегами для ключевых слов refresh, author и . Для страницы задано значение UTF-8.
Пример 11. Установка html-кода на XHTML Переходное DTD
Get-Service | ConvertTo-HTML -Transitional
Эта команда задает DOCTYPE для возвращаемого HTML значение XHTML Переходное DTD.
Параметры
-As
-Body
-Charset
-CssUri
-Fragment
-Head
-InputObject
-Meta
-PostContent
-PreContent
-Property
-Title
-Transitional
Входные данные
PSObject
В этот командлет можно передать любой объект.
Выходные данные
String
Этот командлет возвращает массив строк HTML, представляющих преобразованный объект.
Примечания
Чтобы использовать этот командлет, передайте один или несколько объектов в командлет или укажите объект с помощью параметра InputObject . Если входные данные состоят из нескольких объектов, выходные данные этих двух методов отличаются.
При отправке нескольких объектов в командлет PowerShell отправляет эти объекты командлету по одному. В результате создается таблица с
ConvertTo-Htmlотдельными объектами. Например, если передать процессы на компьютереConvertTo-Htmlв , результирующая таблица отображает все процессы.При использовании параметра InputObject для отправки нескольких объектов
ConvertTo-Htmlполучает эти объекты в виде коллекции или массива. В результате создается таблица, отображающая массива и его свойства, а не элементы в массиве. Например, если вы используете InputObject для отправки процессов на компьютереConvertTo-Htmlв , результирующая таблица отображает массив объектов и его свойства.В соответствии с XHTML Strict DTD
DOCTYPEтег изменяется соответствующим образом:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"\>
- about_Calculated_Properties
- ConvertTo-Csv
- ConvertTo-Json
- ConvertTo-Xml
- Export-Clixml
- Import-Clixml
Верстка таблиц – семантическая верстка таблиц
Верстка таблиц всегда была сложной задачей для верстальщика.
В древние времена (до HTML5) дело отдавали на откуп тегу table, и, пока не было понятия семантической верстки, верстальщики организовывали табличную верстку через теги tr/td, и этих HTML кодов вполне хватало. Но – пришли новые технологии, и нужно было «подружить» блочную верстку с поисковыми роботами (которые до этого таблицы, в общем-то, игнорировали), что привело к появлению более сложной семантической верстки. Ниже мы расскажем, как применять эту верстку сайта, какие используются теги и как в этом замешаны CSS стили.
Верстка таблиц
Семантическая верстка таблиц
Структура таблиц
Строки и ячейки таблицы
Объединение ячеек
Выравнивание содержимого таблицы по вертикали
Заголовок таблицы
Важно знать
Что почитать по теме
Подведем итоги
Верстка таблиц
База верстки – это 3 тега: table, tr, td. Table – это заголовок всей таблицы, он говорит браузеру, что все в его пределах нужно верстать в колонках и ячейках.
Внутрь table вложены заголовки строк –
<table> <tr> <td>123</td> <td>456</td> <td>789</td> </tr> <tr> <td>0ab</td> <td>cde</td> <td>fgh</td> </tr> </table>
Учтите, что для того, чтобы таблица отображалась с границами, вам нужно прикрутить к ней стиль CSS – сами по себе элементы table отображаются без границ, с минимальной возможной шириной и стандартным шрифтом.
Добавление стиля оформления – такое же, как и для других тегов, можете обращаться сразу к table/tr/td
или прописать классы/id и задать ширину/другие параметры отдельным классам.
Основные полезные команды стилей: border (толщина/заливка/цвет рамки), width (ширина, в % или фиксированная), border-collapse (объединить двойные границы в одинарные), padding (отступы).Еще одна важная функция, относящаяся к базовой верстке – объединение ячеек. Задается соединение блочных элементов атрибутами colspan (сколько ячеек вниз от текущей будет объединено) и rowspan (сколько ячеек вправо от текущей будет объединено). Естественно, количество объединяемых ячеек не должно превышать общее количество ячеек доступных с этой точки ячеек, иначе с дизайном сайта можно будет попрощаться – все поедет. К примеру:
<table> <tr> <th>Имя коровы</th> <th>Средний удой молока в день</th> <th>Удой молока в месяц</th> </tr> <tr> <td>Машка</td> <td rowspan="2">20</td> <td>570</td> </tr> <tr> <td>Буренка</td> <td rowspan="2">770</td> </tr> <tr> <td>Авдотья</td> <td>15</td> </tr> </table>
Содержимое CSS:
table {
border: 2px solid black;
border-collapse: collapse;
width: 50%;
}
td {
border: 1px solid black;
}Результат:
Обратите внимание: поскольку мы объединяем элементы td с атрибутом rowspan, нам нужно выкинуть из таблицы ячейки td, которые будут замещены – поэтому первой строкой мы задаем заголовки таблицы, тегом tr и тремя тегами td мы размечаем 3 ячейки второго ряда, а вот в третьем и четвертом ряду мы уже указываем по 2 ячейки – 3-я ячейка в 3 и 4 ряду прописана через rowspan в предыдущем ряду.
Если добавить лишнюю ячейку, взаимное расположение блочных элементов «поедет».
Семантическая верстка таблиц
Как вы могли заметить, в примере выше мы использовали в первом ряду тег th вместо td. Это – первый шажок к семантической верстке таблиц. Сразу отметим, что семантическая верстка на адаптивную верстку никак не влияет – эти верстки никак друг с другом не связаны. Адаптивная верстка используется для создания сайтов, дружелюбных к маленьким размерам экрана – в этом случае макетом сайта сразу предполагается возможность сужения и переразмещения блоков для того, чтобы добиться наилучшего отображения для данной ширины экрана. Семантическая верстка – это когда мы закладываем в таблицу семантику, то есть смысл, для поисковых роботов и программ для чтения с экрана.
В семантической верстке используют теги, которые помогают машинам понять контекст той или иной строки/ячейки/области таблицы.
Семантический подход к верстке таблиц стал сегодня наиболее распространенным и популярным.
Он является очевидной противоположностью визуальному или адаптивному, для которого имеет цену исключительно внешний вид HTML-страницы.
Применительно к семантической верстке на первый план выходит передача смысловой важности содержимого, которое размещается в таблице. Задействование такого способа заметно повышает доступность контента, что дает сразу два очень важных преимущества в виде лучшего понимания со стороны:
- браузеров и различных вспомогательных программ, включая читающих и распознающих информацию с экрана компьютера;
- поисковых роботов, выводящих страницу с грамотно сверстанной таблицей на более высокие места выдачи.
Еще большего эффекта удается добиться, если правильно сочетать семантическую верстку таблицы с CSS (каскадными таблицами стилей).
Структура таблиц
Здесь разберемся с использованием тегов thead, тегом tbody и tfoot. Все 3 используются для того, чтобы показать браузеру/программам/роботам о логическом разделении таблицы – вы можете воспринимать их, как head/body/footer страницы, только примененным к конкретной таблице.
Thead – это тег, который ставится перед tr в шапке таблицы. В thead вместо td используется th, потому что каждая ячейка содержит в себе заголовок колонки, и это нужно как-то подчеркнуть. Собственно, браузер это и подчеркивает – когда мы используем для табличных данных thead и th, они отображаются жирным шрифтом и располагаются по центру ячейки, даже если мы не прописываем это в CSS:
<thead> <tr> <th>Имя коровы</th> <th>Средний удой молока в день</th> <th>Удой молока в месяц</th> </tr> </thead> …
Tbody – это тег, который показывает, что здесь находится тело таблицы. Таких тегов может быть несколько – это удобно, когда вам нужно создать несколько разделов таблицы, и каждому назначить разные стили табличных данных.
… <tbody> <tr> <td>Машка</td> <td>20</td> <td>570</td> </tr> </tbody> <tbody> <tr> <td>Буренка</td> <td>25</td> <td>770</td> </tr> </tbody> <tbody> <tr> <td>Авдотья</td> <td>15</td> <td>440</td> </tr> </tbody> …
CSS:
.
first {
color: red;
}
.second {
color: blue;
}
.third {
color: green;
}Результат:
Наконец, tfoot используется для того, чтобы подвести какой-либо итог таблицы. Часто в tfoot выносится сумма:
… <tfoot> <tr> <td>Всего:</td> <td>60</td> <td>1780</td> </tr> </tfoot>
Результат:
Заметьте, что tfoot не накладывает на содержимое ячеек никакого стиля – вам нужно прописывать его самостоятельно в CSS.
Строки и ячейки таблицы
Как мы уже говорили, строки прописываются через tr, ячейки прописываются через td. Если вы прописываете первую строку через thead – крайне желательно выделить ячейки первой строки тегами th, а не td.
Th показывают браузеру и всем интересующимся программам, что они имеют дело конкретно с заголовочной ячейкой. Тем же программам-ридерам это позволяет правильно зачитать таблицу для человека с плохим зрением – программа понимает, что нужно зачитывать данные сверху вниз, от одного столбика к другому, с отдельным выделением заголовочной ячейки – чтобы слушатель понял, что за заголовком последует информация.
Еще стоит отметить, что управляющие семантикой теги thead, tbody и tfoot практически никак не влияют на саму таблицу – если вы уберете их, все останется на своих местах.
Еще раз повторимся, что эти семантические теги нужны именно для того, чтобы придавать строкам, столбцам и ячейкам смысл – вот здесь мы объявляем заголовки, вот тут у нас основная информация, а вот здесь мы суммируем все.
Объединение ячеек
Основные правила объединения ячеек мы давали выше – вам нужно использовать rowspan и colspan. Первый объединяет ячейки вниз от текущей, второй объединяет ячейки вправо от текущей.
Оба можно использовать одновременно – при rowspan = colspan = 2 вы получите квадрат размером 2 на 2 ячейки. Если объединяете ячейки, то удаляйте лишние – иначе таблица сломается.
Для большего понимания целесообразно привести пример таблицы с объединенными ячейками. Она имеет такой вид.
Чтобы получить данную визуальную реализацию табличного формата, необходимо написать соответствующий исходный программный код. Сначала задаются базовые параметры таблицы, не предусматривающие объединения столбцов или строк.
<table> <thead> <tr> <th>Сотрудник</th> <th>Зарплата</th> <th>Бонусы</th> <th>Менеджер</th> </tr> </thead> <tbody> <tr> <td>Алексей Примадонин</td> <td>750$</td> <td>63$</td> <td>Кодовенок Хекслетович</td> </tr> <tr> <td>Вениамин Редакторович</td> <td>1200$</td> <td>0</td> <td></td> </tr> <tr> <td>Джедай Падаванов</td> <td>500$</td> <td>100$</td> <td>Королева Верстальщина</td> </tr> <tr> <td></td> <td></td> <td></td> <td>Всего: 2613$</td> </tr> </tbody> </table>
Далее необходимо избавиться от пустых ячеек, что позволит расположенной по соседству информации занять все предусмотренное объединением пространство.
Для этого используются два HTML-атрибута:
- объединение столбцов производится посредством включения в код colspan;
- аналогичная операция в отношении строк – через атрибут rowspan.
Каждому из них присваивается определенное значение. Оно показывает, сколько столбцов или строк необходимо объединить. Ячейки, место которых занимает объединенная, в обязательном порядке удаляются. В противном случае структура таблицы будет нарушена. Программный код для объединения ячеек в соответствии с приведенным выше скриншотом выглядит следующим образом.
Сначала — для сотрудников, закрепленных за одним менеджером.
<tr> <td>Алексей Примадонин</td> <td>750$</td> <td>63$</td> <td rowspan="2">Кодовенок Хекслетович</td> </tr> <tr> <!-- В этой строке теперь только три столбца --> <td>Вениамин Редакторович</td> <td>1200$</td> <td>0</td> </tr>
Затем – для итоговой строки таблицы.
<tr> <!-- В этой строке всего один столбец, который растянется на 4 --> <td colspan="4">Всего: 2613$</td> </tr>
Код для объединения ячеек размещается после установки базовых параметров таблицы. Но до последнего тэга </table>.
Выравнивание содержимого таблицы по вертикали
Табличная верстка часто предусматривает необходимость выровнять контент по вертикали. Для этого используются несколько тэгов, у каждого из которых имеется своя специализация. Чаще всего речь идет о свойстве vertical-align, которому присваивается подходящее из четырех доступных значений, показывающее как именно будет происходить выравнивание:
- baseline – по так называемой базовой линии используемого шрифта;
- top – по верхней границе табличной ячейки;
- middle – по центральной части;
- bottom – по нижней границе ячейки таблицы.
Пример подобного кода представлен ниже. Он позволяет получить таблицу примерно следующего вида:
Строка 1. Колонка 1. | ||
Строка 2. Колонка 2. | ||
Строка 3. Колонка 3. |
body {
font: 18px/1.5 sans-serif;
color: #333;
}
table {
border-collapse: collapse;
}
table,
td {
border: 1px solid #000;
}
td {
height: 70px;
padding: 10px 20px;
}
.vertical-top {
vertical-align: top;
}
.vertical-bottom {
vertical-align: bottom;
}Заголовок таблицы
Последний семантический инструмент, который вам обязательно нужно использовать – это заголовок таблицы (caption). Выше мы приводили аналогию «таблица – страница», и заголовок для таблицы так же важен, как h2 для страницы.
Добавляется он в самое начало таблицы, после тега <table>:
<table> <caption>Удой агрофермы "Ромашкино"</caption> <thead> <tr> <th>Имя коровы</th> <th>Средний удой молока в день</th> <th>Удой молока в месяц</th> </tr> </thead> …
Браузер сам поставит заголовок по центру таблицы, перед ней (то есть выше нее). В CSS можно прописать
caption-side: bottom;
и тогда заголовок будет располагаться после таблицы. Заголовок таблице нужно прописывать обязательно, если вам он не нужен – скройте его средствами CSS:
caption {
display: none;
}Важно знать
Итак, зачем все это? Пока что все выглядит так, как будто вам предлагают прописать пару ненужных тегов и усложнить себе жизнь. На самом деле, такой версткой вы существенно упростите жизнь людей, которые плохо видят и пользуются специальными программами для озвучивания находящегося на экране текста.
И за то, что вы это сделаете, Гугл вознаградит вас более высокими позициями в выдаче. Вообще, для Гугла это – не первая такая практика, все опытные SEOшники прекрасно знают, что для изображений нужно прописывать тег alt, даже если по факту это почти никогда не пригодится. Здесь – то же самое. Когда поисковый робот приходит на ваш сайт, он смотрит не только на контент, но и на качество верстки. Если у вас прописаны альты, расставлены теги головы/контента/подвала таблиц, есть заголовок (пусть и скрытый – робот его все равно видит, поскольку он анализирует HTML-код) – робот приходит к выводу, что страница – качественная, и в нее были вложены силы, после чего повышает скоринг страницы при ранжировании. Еще одна полезная награда от поисковика – это виджеты. Когда пользователь ищет что-то, Гугл может на свое усмотрение выдать человеку не сухой список страниц, а, например, таблицу, взятую со страницы сайта. Если таблица размечена с помощью семантической верстки – шансы появления этой таблицы прямо на странице выдачи существенно повышаются.
Если же таблица размечена криво и без семантики – нет вообще никаких шансов на то, что она окажется на главной.
Что почитать по теме
Хорошие и короткие стандарты разметки таблиц от интернет-консорциума W3 (на английском):
- Об использовании id и хедеров.
- Использование заголовка.
- Как лучше располагать информацию в таблице.
- (продвинутая тема) Использование scope для обозначения диапазона ячеек, принадлежащих заголовку.
- (продвинутая тема) Использование атрибута summary для подведения краткого итога таблицы.
Подведем итоги
Тезисно:
- Семантическая верстка – это когда вы размечаете не только ячейки таблицы, но и логические/информационные разделы.
- За структуру отвечают теги thead, tbody, tfoot – они задают заголовок данных/тело/сводку таблицы.
- Caption задает общий заголовок таблицы – его можно поместить вниз или скрыть.
- Теги разметки никак не влияют на саму таблицу – они показывают роботам и специальным программам-ридерам, где что находится.
- Семантическая верстка таблиц существенно улучшает ранжирование страницы.
Код HTML-таблицы
Вы можете использовать следующий код HTML для создания таблицы в документе HTML. Вы можете установить границу на ноль, если хотите, чтобы граница таблицы была прозрачной.
Вы также можете воспользоваться генератором HTML-таблиц.
Пример кода HTML-таблицы
Шаблоны
Вы можете использовать следующий шаблон в качестве основы для кодов таблиц HTML. Просто заполните пробелы или удалите ненужные атрибуты.
Поскольку код HTML-таблицы состоит из нескольких тегов, каждый тег представлен здесь отдельно.
1. Тег
Этот тег является необязательным и определяет ячейку заголовка для содержимого заголовка. Описание всех атрибутов см. в спецификациях тега HTML th. <й ключ доступа = "" контентредактируемый = "" контекстное меню = "" дир = "" перетаскиваемый = "" дропзона = "" скрытый = "" идентификатор элемента = "" элементпроп="" элементссылка="" предметная область = "" тип элемента = "" язык = "" проверка орфографии = "" табиндекс="" название = "" перевести = "" приостановить = "" при автозаполнении = "" ошибка автозаполнения = "" размытие = "" oncancel="" онканплей="" oncanplaythrough="" при обмене = "" закрыть = "" oncontextmenu="" oncuechange="" ondblclick="" перетащить = "" ондрагенд="" ондрагентер="" ondragexit="" ondragleave="" перетащить = "" ondragstart="" ondrop="" изменение продолжительности = "" опустевший = "" завершен = "" ошибка = "" в фокусе = "" ввод = "" oninvalid="" onkeydown="" onkeyup="" загрузить = "" загруженные данные = "" загруженные метаданные = "" onloadstart="" onmousedown="" onmouseenter="" onmouseleave="" onmousemove="" onmouseup="" колесо мыши="" на паузе = "" в игре = "" играя = "" onprogress="" onratechange="" при сбросе = "" изменить размер = "" при прокрутке = "" onseeked="" поиск = "" при выборе = "" на шоу = "" онсорт = "" установлен = "" при отправке = "" приостановить = "" ontimeupdate="" онтоггле = "" onvolumechange="" в ожидании="" > (содержимое заголовка таблицы идет здесь) 4. Тег | Этот тег определяет каждую ячейку в таблице — именно туда вы помещаете фактическое содержимое таблицы. Описание всех атрибутов см. в спецификациях HTML-тега td. <тд colspan="" диапазон строк = "" заголовки = "" ключ доступа = "" контентредактируемый = "" контекстное меню = "" дир = "" перетаскиваемый = "" дропзона = "" скрытый = "" идентификатор элемента = "" элементпроп="" элементссылка="" предметная область = "" тип элемента = "" язык = "" проверка орфографии = "" табиндекс="" название = "" перевести = "" приостановить = "" при автозаполнении = "" ошибка автозаполнения = "" размытие = "" oncancel="" онканплей="" oncanplaythrough="" при обмене = "" закрыть = "" oncontextmenu="" oncuechange="" ondblclick="" перетащить = "" ондрагенд="" ондрагентер="" ondragexit="" ondragleave="" перетащить = "" ondragstart="" ondrop="" изменение продолжительности = "" опустевший = "" завершен = "" ошибка = "" в фокусе = "" ввод = "" oninvalid="" onkeydown="" onkeyup="" загрузить = "" загруженные данные = "" загруженные метаданные = "" onloadstart="" onmousedown="" onmouseenter="" onmouseleave="" onmousemove="" onmouseup="" колесо мыши="" на паузе = "" в игре = "" играя = "" onprogress="" onratechange="" при сбросе = "" изменить размер = "" при прокрутке = "" onseeked="" поиск = "" при выборе = "" на шоу = "" онсорт = "" установлен = "" при отправке = "" приостановить = "" ontimeupdate="" онтоггле = "" onvolumechange="" в ожидании="" > (содержимое таблицы идет сюда) | или заголовком таблицы. Кроме того, JAWS ищет атрибут области действия, который также может использоваться авторами документов для предоставления информации заголовков в таблицах. Если таблица не имеет специального кода с правильными заголовками столбцов и строк, JAWS можно изменить, чтобы обрабатывать таблицу так, как если бы она была. В первых двух таблицах ниже приведены примеры заголовков столбцов и строк, размеченных как заголовки. Первая таблица имеет правильно закодированные теги заголовка таблицы | как для первой строки, так и для первого столбца. Однако вторая таблица имеет правильно закодированные теги заголовка таблицы | только для первой строки. Во втором примере таблицы нет заголовков строк. Однако, поскольку первые две таблицы размечены правильно, JAWS прекрасно считывает информацию из заголовков. В этой первой таблице автор использовал заголовки таблиц как для первой строки, так и для первого столбца таблицы, поэтому, когда вы используете команды чтения JAWS для чтения текущей ячейки, вы слышите следующую информацию:
ПРИМЕЧАНИЕ.
Во второй таблице автор использовал заголовки таблицы только для первой строки.
Третья таблица такая же, как и первая, за исключением того, что автор НЕ использовал заголовки таблиц для разметки HTML.
УПРАЖНЕНИЕ: Выполните следующие шаги, чтобы JAWS прочитал заголовки столбцов и строк для таблицы выше, которая не имеет надлежащей разметки:
В четвертой таблице указано только время, указанное сверху. Сетевые имена, которые были в первом столбце, были удалены. Опять же, автор НЕ использовал заголовки таблиц для разметки HTML. Когда вы читаете текущую ячейку, вы слышите только следующую информацию:
Поскольку таблица не размечена должным образом, JAWS не читает заголовки столбцов.
Когда вы сталкиваетесь с таблицами такого типа, вы можете изменить способ чтения JAWS заголовков столбцов и строк. УПРАЖНЕНИЕ: Выполните следующие действия, чтобы указать JAWS читать только заголовки столбцов для приведенной выше таблицы, которая не имеет надлежащей разметки:
Режим представления документа Существует два разных режима представления документа, которые можно использовать при чтении таблиц с помощью JAWS: простой макет и макет экрана. В Simple Layout каждая ячейка таблицы отображается на отдельной строке в виртуальном буфере. Режим макета экрана также удобен, когда вы хотите скопировать всю строку таблицы и вставить ее в другой документ в виде одной строки. Режим представления документа по умолчанию для JAWS — Simple Layout. Чтобы включить режим макета экрана для текущего веб-браузера, выполните следующие действия:
ПРИМЕЧАНИЕ. По умолчанию быстрые настройки JAWS сохраняются на жестком диске вашего компьютера и остаются такими до тех пор, пока вы не измените их обратно или на другую настройку. Когда вы будете практиковаться в чтении таблиц с помощью JAWS в следующем разделе, поэкспериментируйте с режимом макета экрана и режимом простого макета, чтобы определить, что вам больше нравится. Постоянная активация режима макета экрана для всех таблиц HTML и PDFЕсли вы решите, что режим макета экрана лучше подходит для ваших нужд, вы можете сделать следующее, чтобы навсегда включить эту функцию в таблицах HTML и PDF.
Практика с дополнительными таблицами В следующей таблице на этой странице обсуждается температура воздуха и воды в районе залива Тампа. В районе залива Тампа в среднем 361 солнечный день в году. Согласно Книге рекордов Гиннеса, в Санкт-Петербурге самое продолжительное количество солнечных дней подряд: 768.
Приведенная выше информация взята с веб-сайта Торговой палаты в Сент-Луисе. УПРАЖНЕНИЕ: Попробуйте перечитать предыдущую таблицу, используя режим макета экрана вместо режима простого макета. Если вам нужно напоминание о том, как переключать режимы представления документа, см. инструкции по переключению в режим макета экрана. Когда вы закончите, верните JAWS в режим Simple Layout. Surf’s Up также использует каскадные таблицы стилей (CSS) для целей форматирования. Использование CSS — передовой метод для веб-дизайнеров и лучший способ выполнить форматирование. Один из методов форматирования, используемых в Surf’s Up, заключается в том, чтобы ячейки, классифицируемые как элементы заголовка таблицы, окрашивались в лимонно-желтый фон, который темнее цвета слоновой кости фона других ячеек таблицы. В таблице ниже приведен пример таблицы, в которой атрибуты ID, AXIS и HEADERS используются для того, чтобы JAWS произносил разную информацию при перемещении по разным областям таблицы. Например, при перемещении вверх и вниз по столбцу «Имя сотрудника» вы услышите название подразделения в качестве заголовка строки.
Следующая таблица намного сложнее, но обратите внимание, как JAWS читает ее.
| |||
|---|---|---|---|---|---|---|---|
ниже) 
ниже)
Один из них заключается в расположении структуры на веб-странице таким образом, чтобы элементы размещались там, где автор хочет, чтобы они находились по отношению к другим элементам на странице. Это так называемые макетные таблицы. Другой тип таблицы называется таблицей данных. Таблицы данных являются наиболее распространенным типом таблиц.
При чтении этой страницы обратите особое внимание на сводки таблиц.
Если вы не находитесь в режиме слоя таблицы, нажмите и отпустите INSERT+ПРОБЕЛ , а затем нажмите T . Затем нажмите NUM PAD 5 , чтобы прочитать текущую ячейку.
Названия сетей станций не указаны в первом столбце. В этом случае, когда вы используете команды чтения JAWS для чтения текущей ячейки, вы слышите следующую информацию:
В этом случае вы можете изменить JAWS, чтобы читать их.
Откроется диалоговое окно «Быстрые настройки» с фокусом на поле редактирования поиска.
В этом случае вы знаете, что информация в первой строке вверху каждого столбца является информацией заголовка, даже если она не размечена должным образом. Вы также знаете, что вы делаете НЕ хотите, чтобы первый столбец рассматривался как заголовки строк.
Вы должны услышать объявление JAWS «Только отмеченные заголовки».
Режим макета экрана позволяет вам читать таблицы построчно так, как они представлены на экране. С помощью макета экрана каждая строка таблицы отображается на отдельной строке, а каждая ячейка отделяется вертикальной чертой. Это позволяет лучше понять, как устроена таблица и как разные ячейки в строке связаны друг с другом.
Солнечные дни позволяют с легкостью наслаждаться местными пляжами, два из которых входят в десятку лучших пляжей страны.
Петербург.
Однако при перемещении вверх и вниз по столбцу добавочный номер телефона вы слышите имя сотрудника в качестве заголовка строки. Имя сотрудника на самом деле находится во втором столбце, но HTML-код сообщает JAWS, что в данном случае JAWS следует рассматривать его как заголовок строки, а не как текст в первом столбце. В этом случае JAWS читает правильно, и вам не нужно менять какие-либо настройки JAWS, поскольку автор таблицы не пожалел времени, чтобы использовать передовой опыт для кодирования HTML таблицы. С помощью этого метода любая данная ячейка может ссылаться на любую другую ячейку (или ячейки) в любом месте таблицы в качестве заголовка.
При перемещении вверх и вниз по второму столбцу, где находится название компании, информация заголовка строки собирается из первого столбца, региона. При перемещении вверх или вниз по любому столбцу с третьего по восьмой информация заголовка строки собирается из второго столбца — названия компании. Вы также услышите атрибут оси со словами «Регион» и «Где».
7-я улица, 5