HTML таблиците по подразбиране изглеждат доста неприятно – освежете ги с някои добре изглеждащи CSS ефекти.

Добавянето на таблица към вашия уебсайт е полезен начин за ясно представяне на големи количества информация. Таблиците също осигуряват ефективно използване на пространството и ви позволяват по-лесно да четете и сравнявате сложни данни.

Можете да проектирате таблици, за да бъдат по-привлекателни с помощта на CSS. Това също може да подобри цялостното потребителско изживяване за вашия уебсайт.

Модерен дизайн на единични редове и колони

Можете да добавите прост дизайн на таблица с единични редове и колони и без обединени клетки. Оформянето на таблицата също гарантира, че вашата уеб страница е привлекателна за потребителя. Освен оформяне на масата, има и други страхотни HTML ефекти и CSS показва оформления на уебсайтове можете да добавите към вашия уебсайт.

Можете да видите кода за това упражнение в него GitHub репо.

  1. В нов HTML файл добавете основната структура на HTML кода:
    html>
    <html>
    <глава>
    <заглавие>Моята проста масазаглавие>
    глава>
    <тяло>

    тяло>
    html>
    2. instagram viewer
  2. Вътре в тялото добавете етикети на таблица:
    <маса>

    маса>
  3. Елементът HTML таблица трябва да съдържа ред на масата тагове за всеки ред в таблицата. Най-горният ред обикновено се използва за заглавия. Използвайте заглавка на таблица HTML тагове за представяне на всяка колона в таблицата:
    <тр>
    <th>Заглавие 1th>
    <th>Заглавие 2th>
    <th>Заглавие 3th>
    тр>
  4. Добавете още редове под заглавния ред. Използвайте таблични данни HTML тагове за добавяне на данни във всяка клетка в таблицата:
    <тр>
    <td>Ред 1, колона 1td>
    <td>Ред 1, колона 2td>
    <td>Ред 1, колона 3td>
    тр>
    <тр>
    <td>Ред 2, колона 1td>
    <td>Ред 2, колона 2td>
    <td>Ред 2, колона 3td>
    тр>
    <тр>
    <td>Ред 3, колона 1td>
    <td>Ред 3, колона 2td>
    <td>Ред 3, колона 3td>
    тр>
    <тр>
    <td>Ред 4, колона 1td>
    <td>Ред 4, колона 2td>
    <td>Ред 4, колона 3td>
    тр>
    <тр>
    <td>Ред 5, колона 1td>
    <td>Ред 5, колона 2td>
    <td>Ред 5, колона 3td>
    тр>
  5. Добавете таг за стил вътре в тага за глава. Добавете някакъв общ стил към таблицата, като сенки, заоблени ъгли на масата, шрифтове и полета:
    <стил>
    маса {
    граница-колапс: колапс;
    ширина: 100%;
    цвят: #333;
    шрифтово семейство: Arial, безсерифен;
    размер на шрифта: 14px;
    подравняване на текст: наляво;
    граница-радиус: 10px;
    препълване: скрит;
    кутия-сянка: 0 0 20pxrgba(0, 0, 0, 0.1);
    марж: Автоматичен;
    margin-top: 50px;
    margin-bottom: 50px;
     } 
    стил>
  6. Оформете заглавката на таблицата, за да й придадете фонов цвят и подравнен текст:
    масаth {
    Цвят на фона: #ff9800;
    цвят: #Ф ф ф;
    тегло на шрифта: удебелен;
    подплата: 10px;
    преобразуване на текст: Главна буква;
    разстояние между буквите: 1px;
    граница-отгоре: 1pxтвърдо#Ф ф ф;
    граница-отдолу: 1pxтвърдо#ccc;
    }
  7. Стилизирайте редовете на таблицата, за да редувате сиви и бели цветове и да добавите ефект, когато задържите курсора на мишката над реда:
    масатр:nth-child (четно)td {
    Цвят на фона: #f2f2f2;
    }
    масатр:задръжтеtd {
    Цвят на фона: #ffedcc;
    }
  8. Стилизирайте данните в клетките на таблицата:
    масаtd {
    Цвят на фона: #Ф ф ф;
    подплата: 10px;
    граница-отдолу: 1pxтвърдо#ccc;
    тегло на шрифта: удебелен;
    }
  9. Отворете своя HTML файл, за да видите таблицата в уеб браузър:

Дизайн на многоредова клетъчна маса

Някои таблици включват колони с обединени редове, за да образуват многоредова клетка.

  1. Премахнете всички текущи редове на таблицата, като запазите само горния със заглавията:
    <маса>
    <тр>
    <th>Заглавие 1th>
    <th>Заглавие 2th>
    <th>Заглавие 3th>
    тр>
    маса>
  2. Създайте многоредова клетка, като използвате атрибута rowspan. Това ще разшири тази клетка в определения брой редове.
     Секция 1 
    <тр>
    <tdразмах на редовете="2">Многоредова клеткаtd>
    <td>Ред 1, колона 2td>
    <td>Ред 1, колона 3td>
    тр>
    <тр>
    <td>Ред 2, колона 2td>
    <td>Ред 2, колона 3td>
    тр>
  3. Когато добавяте друга многоклетъчна линия с различна стойност за обхват на редовете, добавете съответния брой редове на таблицата HTML тагове. Това е, за да съответства на височината или броя на редовете, които клетката обхваща. Например, ако една клетка има обхват на редове 3, ще трябва да добавите три реда към другите колони, за да подравните правилно таблицата.
     Раздел 2 
    <тр>
    <tdразмах на редовете="3">Многоредова клеткаtd>
    <td>Ред 3, колона 2td>
    <td>Ред 3, колона 3td>
    тр>
    <тр>
    <td>Ред 4, колона 2td>
    <td>Ред 4, колона 3td>
    тр>
    <тр>
    <td>Ред 5, колона 2td>
    <td>Ред 5, колона 3td>
    тр>
  4. Отворете своя HTML файл, за да видите таблицата в уеб браузър:

Дизайн на таблица с обединени редове

Подобно на многоредовите клетки, таблиците също могат да имат редове, които се сливат в множество колони.

  1. Премахнете всички текущи редове на таблицата, като запазите само горния със заглавията:
    <маса>
    <тр>
    <th>Заглавие 1th>
    <th>Заглавие 2th>
    <th>Заглавие 3th>
    тр>
    маса>
  2. Добавете още редове от таблицата към таблицата. Използвайте атрибута colspan, за да обедините един от редовете в 3 колони:
     Секция 1 
    <тр>
    <tdстил="цвят на фона: #ffedcc"colspan="3">Q1td>
    тр>
    <тр>
    <td>Ред 2, колона 1td>
    <td>Ред 2, колона 2td>
    <td>Ред 2, колона 3td>
    тр>
    <тр>
    <td>Ред 3, колона 1td>
    <td>Ред 3, колона 2td>
    <td>Ред 3, колона 3td>
    тр>
    <тр>
    <td>Ред 4, колона 1td>
    <td>Ред 4, колона 2td>
    <td>Ред 4, колона 3td>
    тр>
  3. Добавете друг обединен ред, за да разделите секциите на таблицата:
     Раздел 2 
    <тр>
    <tdстил="цвят на фона: #ffedcc"colspan="3">Q2td>
    тр>
    <тр>
    <td>Ред 6, колона 1td>
    <td>Ред 6, колона 2td>
    <td>Ред 6, колона 3td>
    тр>
    <тр>
    <td>Ред 7, колона 1td>
    <td>Ред 7, колона 2td>
    <td>Ред 7, колона 3td>
    тр>
    <тр>
    <td>Ред 8, колона 1td>
    <td>Ред 8, колона 2td>
    <td>Ред 8, колона 3td>
    тр>
  4. Отворете своя HTML файл, за да видите таблицата в уеб браузър:

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

HTML таблиците са чудесен начин за показване на структурирани данни на вашия уебсайт. Можете да ги стилизирате с CSS, за да подобрите външния вид по подразбиране. Уверете се обаче, че не се увличате и не използвате таблици за оформление – от съображения за достъпност ги пазете само за данни.

По-големите таблици могат да бъдат трудоемки за създаване и актуализиране, особено ако използвате колони и редове, които се простират. Можете да напишете свой собствен код, за да генерирате маркирането, или да се възползвате от по-лесен синтаксис като Markdown.