Этот пост даст полное решение о том, как создать таблицу, используя только « <дел> ” и свойства CSS.
Как создать таблицу с помощью тега и CSS?
Разработчики могут создать таблицу в HTML, добавив основной « <дел> », чтобы создать таблицу, а затем несколько « <дел> ” теги внутри него.
Пример
Рассмотрим следующий пример кода HTML для создания таблицы:
< див сорт '=' 'divТаблица' >
< див сорт '=' 'заголовок' >
< див сорт '=' 'дивселл' >< б > ИДЕНТИФИКАТОР < / б >< / див >
< див сорт '=' 'дивселл' >< б > Имя < / б >< / див >
< див сорт '=' 'дивселл' >< б > Возраст < / б >< / див >
< / див >
< див сорт '=' 'дивРоу' >
< див сорт '=' 'дивселл' > 001 < / див >
< див сорт '=' 'дивселл' > Смит < / див >
< див сорт '=' 'дивселл' > 25 < / див >
< / див >
< див сорт '=' 'дивРоу' >
< див сорт '=' 'дивселл' > 002 < / див >
< див сорт '=' 'дивселл' > Джон < / див >
< див сорт '=' 'дивселл' > 31 < / див >
< / див >
< див сорт '=' 'дивРоу' >
< див сорт '=' 'дивселл' > 003 < / див >
< див сорт '=' 'дивселл' > Чарльз < / див >
< див сорт '=' 'дивселл' > 28 < / див >
< / див >
< / див >
Во фрагменте кода выше:
- А “ <дел> » добавляется к классу с именем « divТаблица ».
- Внутри ' див » элемент контейнера, добавьте еще один « див » элемент контейнера с классом, объявленным как « заголовокСтрока ».
- Снова прибавьте три» див » элементы, которые имеют классы с именем « divRow ” с тремя подконтейнерами с “ divCell ' сорт.
- Затем добавьте три элемента div, добавьте « ИДЕНТИФИКАТОР », « Имя ' и ' Возраст ” в заголовке таблицы.
- После этого укажите значения «ID», «Имя» и «Возраст» для каждого элемента div.
Это было все о том, как использовать « див ” для создания таблицы. Теперь давайте применим к нему свойства CSS:
.divTable
{
дисплей: таблица;
ширина :авто;
фон- цвет :#эээ;
граница :1px сплошной # 666666 ;
расстояние между границами: 5px;
}
.divRow
{
ширина :авто;
дисплей: таблица-строка;
}
.divCell
{
ширина :150 пикселей;
плыть налево;
дисплей:столбец;
фон- цвет : RGB ( 212 , 209 , 209 ) ;
}
В приведенном выше элементе стиля CSS:
- Добавьте селектор, который ссылается на « divТаблица » (который содержит все табличные значения) и определите нужные свойства CSS (например, « отображать », « ширина », « фоновый цвет », « граница ' и ' интервал между границами ») для содержимого таблицы.
- После этого добавьте селектор класса, который выбирает элементы « divRow » класс для добавления CSS « ширина ' и ' отображать » свойства к элементам.
- Наконец, добавьте свойства стиля CSS к элементам в « .divCell селектор класса.
Это создаст таблицу на выходе и отобразит следующие результаты:
Это было все о создании таблицы в HTML, используя только теги
и свойства CSS.
Заключение
Таблицу в HTML также можно создать только с помощью тега div и свойств стиля CSS. Для этого создайте отдельный основной элемент контейнера div для создания таблицы и несколько отдельных элементов контейнера div внутри него для создания строк таблицы. Каждый элемент контейнера div будет иметь соответствующий идентификатор или классы. Кроме того, селекторы классов используются для выбора элементов div и применения к ним свойств CSS. В этом посте рассказывается о создании таблицы только с использованием тега div и CSS.
Разработчики могут создать таблицу в HTML, добавив основной « <дел> », чтобы создать таблицу, а затем несколько « <дел> ” теги внутри него.
Пример
Рассмотрим следующий пример кода HTML для создания таблицы:
< див сорт '=' 'divТаблица' >
< див сорт '=' 'заголовок' >
< див сорт '=' 'дивселл' >< б > ИДЕНТИФИКАТОР < / б >< / див >
< див сорт '=' 'дивселл' >< б > Имя < / б >< / див >
< див сорт '=' 'дивселл' >< б > Возраст < / б >< / див >
< / див >
< див сорт '=' 'дивРоу' >
< див сорт '=' 'дивселл' > 001 < / див >
< див сорт '=' 'дивселл' > Смит < / див >
< див сорт '=' 'дивселл' > 25 < / див >
< / див >
< див сорт '=' 'дивРоу' >
< див сорт '=' 'дивселл' > 002 < / див >
< див сорт '=' 'дивселл' > Джон < / див >
< див сорт '=' 'дивселл' > 31 < / див >
< / див >
< див сорт '=' 'дивРоу' >
< див сорт '=' 'дивселл' > 003 < / див >
< див сорт '=' 'дивселл' > Чарльз < / див >
< див сорт '=' 'дивселл' > 28 < / див >
< / див >
< / див >
Во фрагменте кода выше:
- А “ <дел> » добавляется к классу с именем « divТаблица ».
- Внутри ' див » элемент контейнера, добавьте еще один « див » элемент контейнера с классом, объявленным как « заголовокСтрока ».
- Снова прибавьте три» див » элементы, которые имеют классы с именем « divRow ” с тремя подконтейнерами с “ divCell ' сорт.
- Затем добавьте три элемента div, добавьте « ИДЕНТИФИКАТОР », « Имя ' и ' Возраст ” в заголовке таблицы.
- После этого укажите значения «ID», «Имя» и «Возраст» для каждого элемента div.
Это было все о том, как использовать « див ” для создания таблицы. Теперь давайте применим к нему свойства CSS:
.divTable
{
дисплей: таблица;
ширина :авто;
фон- цвет :#эээ;
граница :1px сплошной # 666666 ;
расстояние между границами: 5px;
}
.divRow
{
ширина :авто;
дисплей: таблица-строка;
}
.divCell
{
ширина :150 пикселей;
плыть налево;
дисплей:столбец;
фон- цвет : RGB ( 212 , 209 , 209 ) ;
}
В приведенном выше элементе стиля CSS:
- Добавьте селектор, который ссылается на « divТаблица » (который содержит все табличные значения) и определите нужные свойства CSS (например, « отображать », « ширина », « фоновый цвет », « граница ' и ' интервал между границами ») для содержимого таблицы.
- После этого добавьте селектор класса, который выбирает элементы « divRow » класс для добавления CSS « ширина ' и ' отображать » свойства к элементам.
- Наконец, добавьте свойства стиля CSS к элементам в « .divCell селектор класса.
Это создаст таблицу на выходе и отобразит следующие результаты:
Это было все о создании таблицы в HTML, используя только теги
Заключение
Таблицу в HTML также можно создать только с помощью тега div и свойств стиля CSS. Для этого создайте отдельный основной элемент контейнера div для создания таблицы и несколько отдельных элементов контейнера div внутри него для создания строк таблицы. Каждый элемент контейнера div будет иметь соответствующий идентификатор или классы. Кроме того, селекторы классов используются для выбора элементов div и применения к ним свойств CSS. В этом посте рассказывается о создании таблицы только с использованием тега div и CSS.