Как да създадете таблица само с помощта на етикет и CSS

” етикети вътре в него.

---

---

Пример
Разгледайте следния пример на HTML код, за да създадете таблица:

< див клас = 'divTable' >
< див клас = 'headerRow' >
< див клас = 'divCell' >< b > документ за самоличност < / b >< / див >
< див клас = 'divCell' >< b > Име < / b >< / див >
< див клас = 'divCell' >< b > Възраст < / b >< / див >
< / див >
< див клас = 'divRow' >
< див клас = 'divCell' > 001 < / див >
< див клас = 'divCell' > Смит < / див >
< див клас = 'divCell' > 25 < / див >
< / див >
< див клас = 'divRow' >
< див клас = 'divCell' > 002 < / див >
< див клас = 'divCell' > Джон < / див >
< див клас = 'divCell' > 31 < / див >
< / див >
< див клас = 'divRow' >
< див клас = 'divCell' > 003 < / див >
< див клас = 'divCell' > Чарлз < / див >
< див клас = 'divCell' > 28 < / див >
< / див >
< / див >

В кодовия фрагмент по-горе:

• A “
  ” се добавя към класа с име „ divTable ”.
• Вътре в „ див ' контейнерен елемент, добавете още един ' див ' контейнерен елемент с клас, деклариран като ' headerRow ”.
• Отново добавете три „ див ' елементи, които имат класове с име ' divRow “ с три подконтейнера с „ divCell ” клас.
• След това добавете три елемента div, добавете „ документ за самоличност ”, “ Име ' и ' Възраст ” в заглавния ред на таблицата.
• След това задайте стойностите за „ID“, „Име“ и „Възраст“ за всеки елемент div.

Това беше всичко за това как да използвате „ див ”, за да създадете таблица. Сега нека приложим свойствата на CSS към него:

---

---

.divTable
{
дисплей: маса;
ширина :Автоматичен;
заден план- цвят :#eee;
граница :1px плътен # 666666 ;
border-spacing:5px;
}
.divRow
{
ширина :Автоматичен;
дисплей: таблица-ред;
}
.divCell
{
ширина :150px;
float:left;
дисплей:таблица-колона;
заден план- цвят : rgb ( 212 , 209 , 209 ) ;
}

В горния елемент на CSS стил:

• Добавете селектор, който се отнася до „ divTable ” (който съдържа всички стойности на таблицата) и дефинирайте желаните CSS свойства (т.е. „ дисплей ”, “ ширина ”, “ Цвят на фона ”, “ граница ' и ' border-spacing “) за съдържанието на таблицата.
• След това добавете селектор на клас, който избира елементите на „ divRow ' клас за добавяне на CSS ' ширина ' и ' дисплей ” свойства на елементите.
• И накрая, добавете свойствата на CSS стил към елементите в „ .divCell ” селектор на клас.

Това ще създаде таблица в изхода и ще покаже следните резултати:

Това беше всичко за създаване на таблица в HTML, използвайки само