HTML5 Form_ Power Node Java College

Роль таблицы состоит в том, чтобы отобразить два измерения данных. , это будет введено позже). Следующее в основном представляет HTML -элементы для изготовления таблиц.

Основные элементы формы включают в себя: таблицу, TR и TD.

Таблица представляет таблицу в документе HTML, который поддерживает атрибут границы для определения ширины кадра;

TR представляет линию в таблице;

TD представляет ячейки в таблице, включая следующие атрибуты:

1) colspan: количество колонн, которые ячейки могут пересекать;

2) ROWSPAN: количество рядов, которые ячейки могут пересекать;

3) Заголовки: Стандарты, связанный с головой, заголовок ячейки.

 <table> <tr> <td> яблоки </td> <td> green </td> <td> medium </td> </tr> <td> апельсины </td> <td> Orange </td> <td> большой </td> </tr> </table>

Выше определяет таблицу из двух линий и трех столбцов.

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

 <Таблица границы = 1> <Tr> <td> яблоки </td> <td> green </td> </tdium </td> </tr> <td> апельсины </td> <td> оранжевый </ td> <td> большой </td> </tr> </table>

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

Использование атрибутов Colspan и Rowsspan клетки могут построить нерегулярные таблицы, так что некоторые строки или столбцы таблицы пролетают несколько ячеек.

 <Таблица границы = 1> <ter> <th> месяц </th> <ht> сбережения </th> </tr> <td colorpan = 2> январь </td> </tr> <ter> <td colorpan = 2> февраль </td> </tr> </table>

Ниже приведен пример того, как ячейка пересекает несколько линий:

 <Таблица границы = 1> <ter> <th> месяц </th> <ht> сбережения </th> </tr> <td> январь </td> <td> $ 100,00 </td> <td rowspan = 2> $ 50 </td> </tr> <td> февраль </td> <td> $ 10,00 </td> </table>

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

1) colspan: количество колонн, которые ячейки могут пересекать;

2) ROWSPAN: количество рядов, которые ячейки могут пересекать;

3) область применения: определите метод связывания данных головы с данными единиц;

3) Заголовки: Список идентификаторов заголовка, разделенный пространством, предоставлен информацией заголовка для ячейки данных.

 <table> <per> <ht> rank </th> <ht> имя </th> <ht> color </th> </th> </tr> <th> Любимый: не/td> <td> Orange </td> <td> большой </td> </tr> <ter> <th> 3-й фаворит: </th> <Td> PomeNaanate </td> <td> своего рода зеленого цвета <// TD> <TD> варьируется от среднего до большого </td> </tr> </table>

TH и TD могут быть использованы в линии.

Использование атрибутов заголовков TD может быть связано с ячейками. Атрибутом заголовков может быть значением атрибута ID одной или нескольких TH -ячейки:

 <Таблица границы = 1 ширина = 100%> <ter> <th id = name> name </th> <th id = email> email </th> <th id = phone> phone> phone </th> <th Id = адрес> Адрес </th> </tr> <ter> <td headers = name> Джордж Буш </td> <td headers = email> [email protected] </td> <td headers = phone> + 789451236 </td> <td headers = адрес> Пятая авеню Нью -Йорк, США </td> </tr> </table>

Использование атрибутов Colspan и Rowspan может построить сложные таблицы.

 <Таблица границы = 1> <Tr> <th ColSpan = 2> Компания в США </th> </tr> <hl> name </th> <Th> addr </th> </tr> tr> <td > Apple, Inc. </td> <td> 1 Infinite Loop Cupertino, CA 95014 </td> </tr> <td> Google, Inc. </td> 1600 Amphitheater Parkway Mountain View, CA 94043 </td> </tr> </table>

Вы можете использовать элементы Thead, Tbody и Tfoot для добавления структур в форму, чтобы вы могли добавить стиль CSS в каждую часть формы, чтобы стать проще.

1) Тема таблицы

Элемент Tbode представляет всю строку темы формы, исключая заголовок (представление элемента Thead) и скутер (представление элемента Tfoot).

Обратите внимание, что большинство браузеров автоматически вставит элемент tbode при обработке элементов таблицы.

2) Заголовок формы

Элемент Thead используется для обозначения заголовок формы. Если нет элемента, все элементы TR будут рассматриваться как часть предмета формы.

3) Добавить сноску

Элементы TFOOT используются для обозначения линий формирования. Перед HTML5 элементы TFOOT могут появляться только перед элементом TBOM, а в HTML5 элементу TFOOT разрешается разместить элемент TFOOT после tBode.

Ниже приведен всеобъемлющий пример, который использует элементы Tbody, Thead и Tfoot.

 <table> <d> <per> <ht> rank </th> <ht> name </th> <Th> color </th> <t> size </th> </thead> </thead> < tfoot> <per> <ht> rank </th> <Th> name </th> <Th> color </th> </th> </tr> </tfoot> <tr> <per> <th> Любимый: <Th> <Td> яблоки </td> <td> green </td> <em> medium </td> </tr> <tr> <ht> 2nd Favorite: </th> <Td> апельсины </td> <td> Orange </td> <td> большой </td> </tr> <tr> <th> 3 -й любимый Green-Red </td> <td> варьируется от среднего до большого </td> </tr> </tbody> </table>

Использование элемента подписи может определить заголовок для формы и связать его с формой.

 <table> <pution> Результаты фруктового обследования 2011 года </caption> <thead> <tr> </th> <ht> name </th> </th> <th> size </th> </tr> </thead> <tfoot> <ter> <th> Rank </th> <Th> name </th> <Th> color </th> <Th> size </th> не> <Ter> <Th> 2 -й фаворит: </th> <td> Orange </td> <td> Orange </td> <td> большой </td> </tr> <trd Любимый: </th> <td> гранат </td > <Td> своего рода зеленово-красного </td> <td> варьируется от среднего до большого </td> </tbody> </table>

Форма может содержать только элемент подписи, а не первый элемент формы, но он всегда отображается над таблицей.

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

 > = 1> <colorp id = colorp1 span = 2> </colorp> <colorp id = colorp2> </colorp> <ter> </th> </th> </th> не td> <td> мой первый css </Td> <td> $ 47 </td> </tr> </table> </body> </html>

Приведенный выше пример указывает группу из двух столбцов. Атрибут Colgroup определяет расширения.

 <html> <Head> <style> #colryp1 {founal-color: red} #col3 {foanle-color: green; border = 1> <colgroup id = colorp1> <col id = col1and2 span = 2/> <col id = color3/> </colorp> <ter> </th> <th> title </th> <th> цена </th> </tr> <l> <td> 3476896 </td> <td> мой первый html </td> <td> $ 53 </td> </tr> <td> 2489604 </td> <TD> мой первый CSS </td> <td> $ 47 </td> </table> </body> </html>

Приведенное выше содержимое этой статьи.