HTML таблици и фреймове

Таблици

Таблицата (table) е структуриран набор от данни, съставен от редове (rows) и колони (cols). Таблицата ви позволява бързо и лесно да търсите стойности, които показват някаква връзка между различни типове данни, например човек и неговата възраст, ден от седмицата или разписание на местен плувен басейн. [1]

Име	Възраст
Мартин	21
Индиго	17
Порцелан	33
Лабиринт	24

Как се използва таблицата?

Целта на таблицата е, че тя е неподвижна. Информацията се интерпретира лесно чрез визуални асоциации между заглавните клетки на редовете и колоните. Когато са имплементирани правилно, HTML таблиците се обработват добре от инструменти за достъпност, като например екранни четци, така че една валидна HTML таблица би трябвало да подобри изживяването както на зрящи, така и на потребители с увредено зрение.

Стилизиране

За да бъдат таблиците ефективни в мрежата, трябва да се използва стилизиране с CSS, както и добра, солидна структура с HTML. В този урок се фокусираме върху HTML частта; ще научите за стилизирането на таблици по-късно, в темата за стилизиране на таблици.

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

Кога да НЕ използваме таблици?

HTML таблиците трябва да се използват за таблични данни (информация, с която е лесно да се работи в редове и колони) – за това са предназначени. За съжаление, много хора използваха HTML таблици за оформление на уебстраници, например един ред за заглавие на страница, един ред за всяка колона със съдържание, един ред за долния колонтитул и т.н. Тази техника се използваше в миналото, защото поддръжката на CSS в браузърите беше много по-ограничена. Съвременните браузъри имат солидна CSS поддръжка, така че оформленията, базирани на таблици, вече не са необходими. Табличните оформления вече са изключително редки, но все още може да ги видите в някои кътчета на мрежата.

Накратко, използването на таблици за оформление, а не на CSS техники за оформление, е лоша идея. Основните причини са следните:

Таблиците за оформление намаляват достъпността за потребители с увредено зрение - Екранните четци, използвани от незрящи хора, интерпретират таговете, които съществуват в HTML страницата, и прочитат съдържанието им на потребителя. Тъй като таблиците не са правилният инструмент за оформление, а маркирането е по-сложно, отколкото при техниките за оформление с CSS, изходът на екранните четци ще бъде объркващ за потребителите.
Таблиците създават „супа“ от тагове - Както бе споменато по-горе, оформлението на таблиците обикновено включва по-сложни структури за маркиране, отколкото правилните техники за оформление. Това може да доведе до по-трудно писане, поддръжка и отстраняване на грешки в кода.
Таблиците не са автоматично адаптивни - Когато използвате правилни контейнери за оформление (като <header>, <section>, <article> или <div>), тяхната ширина по подразбиране е 100% от родителския им елемент. Таблиците, от друга страна, са оразмерени според съдържанието си по подразбиране, така че са необходими допълнителни мерки, за да се постигне ефективно функциониране на стила на оформлението на таблиците на различни устройства.

Създаване на таблица

Съдържанието на всяка таблица е оградено от тези два тага: <table></table>. Добавете ги в тялото (body) на вашия HTML код.

Най-малкият контейнер в таблица е клетката, която се създава с елемент <td> (table data).

<td>Hi, I'm your first cell.</td>

Ако искаме ред от четири клетки, трябва да копираме тези тагове три пъти.

<td>Hi, I'm your first cell.</td>
<td>I'm your second cell.</td>
<td>I'm your second cell.</td>
<td>I'm your second cell.</td>

Както ще видите, клетките не са поставени една под друга, а автоматично се подравняват една с друга на един и същи ред. Всеки елемент <td> създава една клетка и заедно те съставляват първия ред. Всяка клетка, която добавяме, удължава реда.

За да спрем нарастването на този ред и да започнем да поставяме следващите клетки на втори ред, трябва да използваме елемента <tr> (table row). Поставяме 4-те клетки в <tr> тага.

Code

<table>
  <tr>
      <td>Hi, I'm your first cell.</td>
      <td>I'm your second cell.</td>
      <td>I'm your third cell.</td>
      <td>I'm your fourth cell.</td>
  </tr>
</table>

Preview

По този начин се създава един ред. Всеки следващ ред трябва да бъде обвит в допълнителен <tr> елемент, като всяка клетка се съдържа в <td>.

Code

<table>
  <tr>
      <td>Hi, I'm your first cell.</td>
      <td>I'm your second cell.</td>
      <td>I'm your third cell.</td>
      <td>I'm your fourth cell.</td>
  </tr>
  <tr>
      <td>Second row, first cell.</td>
      <td>Cell 2.</td>
      <td>Cell 3.</td>
      <td>Cell 4.</td>
  </tr>
</table>

Preview

Добавяне на заглавни клетки

Нека обърнем внимание на заглавните клетки на таблиците – специални клетки, които се поставят в началото на ред или колона и определят типа данни, които този ред или колона съдържа (като пример вижте клетките Име и Възраст в първия показан пример). За да илюстрираме защо са полезни, разгледайте следния пример за таблица. Първо, изходният код:

Code

<style>
table, th, td {
border: 1px solid black;
padding: 5px;
}
table {
border-collapse: collapse;
}
</style>
<table>
<tr>
  <td>&nbsp;</td>
  <td>Knocky</td>
  <td>Flor</td>
  <td>Ella</td>
  <td>Juan</td>
</tr>
<tr>
  <td>Breed</td>
  <td>Jack Russell</td>
  <td>Poodle</td>
  <td>Streetdog</td>
  <td>Cocker Spaniel</td>
</tr>
<tr>
  <td>Age</td>
  <td>16</td>
  <td>9</td>
  <td>10</td>
  <td>5</td>
</tr>
</table>

Preview

Проблемът тук е, че макар донякъде да можете да разберете какво се случва, не е толкова лесно да се правят кръстосани препратки към данните, колкото би могло да бъде. Ако заглавните клетки на колоните и редовете се открояваха по някакъв начин, щеше да е много по-добре.

За да разпознаете заглавни клетки на таблицата както визуално, така и семантично, можете да използвате елемента <th> (table header). Това работи по абсолютно същия начин като <td>, с изключение на това, че обозначава заглавна клетка, а не обикновена клетка. Отворете HTML кода си и променете всички елементи <td> около заглавията на таблицата на <th> елементи.

Code

<style>
table, th, td {
border: 1px solid black;
padding: 5px;
}
table {
border-collapse: collapse;
}
</style>
<table>
<tr>
  <td>&nbsp;</td>
  <th>Knocky</td>
  <th>Flor</td>
  <th>Ella</td>
  <th>Juan</td>
</tr>
<tr>
  <th>Breed</td>
  <td>Jack Russell</td>
  <td>Poodle</td>
  <td>Streetdog</td>
  <td>Cocker Spaniel</td>
</tr>
<tr>
  <th>Age</td>
  <td>16</td>
  <td>9</td>
  <td>10</td>
  <td>5</td>
</tr>
</table>

Preview

Защо заглавните клетки са полезни?

Вече частично отговорихме на този въпрос – по-лесно е да намерите данните, които търсите, когато заглавните клетки ясно се открояват, а дизайнът като цяло изглежда по-добре.

Информация

Заглавията на таблиците съдържат някои стилове по подразбиране – те са удебелени и центрирани, дори ако не добавите свой собствен стил към таблицата, за да им помогнете да се откроят.

Заглавните клетки на таблиците имат и допълнително предимство — заедно с атрибута scope, те ви позволяват да направите таблиците по-достъпни, като свържете всяка заглавна клетка с всички данни в един и същ ред или колона. След това екранните четци могат да прочетат цял ред или колона с данни наведнъж, което е доста полезно.

Разрешаване на клетките да обхващат множество редове и колони

Понякога искаме клетките да обхващат няколко реда или колони. Да вземем следния прост пример, който показва имената на често срещани животни. В някои случаи искаме да покажем имената на мъжките и женските животни до името на животното. Понякога не го правим и в такива случаи просто искаме името на животното да обхваща цялата таблица.

Code

<style>
table, th, td {
border: 1px solid black;
padding: 5px;
}
table {
border-collapse: collapse;
}
</style>
<table>
<tr>
  <th>Animals</th>
</tr>
<tr>
  <th>Hippopotamus</th>
</tr>
<tr>
  <th>Horse</th>
  <td>Mare</td>
</tr>
<tr>
  <td>Stallion</td>
</tr>
<tr>
  <th>Crocodile</th>
</tr>
<tr>
  <th>Chicken</th>
  <td>Hen</td>
</tr>
<tr>
  <td>Rooster</td>
</tr>
</table>

Preview

Коригиране на оформлението с rowspan и colspan

Нужен ни е начин Animals, Hippopotamus и Crocodile да се разпростират в две колони, а Horse и Chicken – надолу в два реда. За щастие, заглавните клетки и клетките на таблиците имат атрибутите colspan и rowspan, които ни позволяват да правим точно тези неща. И двете приемат числова стойност без единици, която е равна на броя редове или колони, които искате да се разпрострат. Например, colspan="2" прави клетката да се разпростира в две колони.

Code

<style>
table, th, td {
border: 1px solid black;
padding: 5px;
}
table {
border-collapse: collapse;
}
</style>
<table>
<tr>
  <th colspan="2">Animals</th>
</tr>
<tr>
  <th colspan="2">Hippopotamus</th>
</tr>
<tr>
  <th rowspan="2">Horse</th>
  <td>Mare</td>
</tr>
<tr>
  <td>Stallion</td>
</tr>
<tr>
  <th colspan="2">Crocodile</th>
</tr>
<tr>
  <th rowspan="2">Chicken</th>
  <td>Hen</td>
</tr>
<tr>
  <td>Rooster</td>
</tr>
</table>

Preview

Групиране на колони с `<colgroup>` и `<col>`

Има начин да се насочат цели колони на таблица като едно цяло, например при прилагане на стилове към таблица. С натрупването на повече опит със създаването на HTML таблици ще откриете, че прилагането на цвят на фона, например, към всяка клетка в една колона е по-трудно, отколкото си мислите. Елементите <colgroup> и <col> предоставят решение на този проблем.

Елементът <colgroup> трябва да бъде включен като дъщерен елемент на таблицата, веднага след отварящия елемент <table>. Вътре в елемента <colgroup> можете да включите един или повече елемента <col>, които представляват групи от колони. Елементът <col> може да включва атрибут span, който показва броя на колоните в тази група. Той може също да включва глобални атрибути като style или class.

Code

<style>
table, th, td {
border: 1px solid black;
padding: 5px;
}
table {
border-collapse: collapse;
}
</style>
<table>
  <colgroup>
      <col span="2" />
      <col class="column-background-test" />
      <col class="column-fixed-width-test" />
      <col class="column-background-test" />
      <col class="column-background-border-test" />
      <col span="2" class="column-fixed-width-test" />
  </colgroup>
  <tr>
      <td>&nbsp;</td>
      <th>Mon</th>
      <th>Tues</th>
      <th>Wed</th>
      <th>Thurs</th>
      <th>Fri</th>
      <th>Sat</th>
      <th>Sun</th>
  </tr>
  <tr>
      <th>1st period</th>
      <td>English</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>German</td>
      <td>Dutch</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
  </tr>
  <tr>
      <th>2nd period</th>
      <td>English</td>
      <td>English</td>
      <td>&nbsp;</td>
      <td>German</td>
      <td>Dutch</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
  </tr>
</table>

Preview

Внимание

В примера горе към класовете е добавено -test, тъй като в долния пример се задават стилове за тези класове и това влияе на посочената таблица. Целта е тази таблица да НЕ бъде с приложени стилове, затова имената на класовете са променени 🙃

В тази таблица има осем колони. Нека разгледаме по-отблизо структурите <colgroup> и <col>, за да покажем как това им влияе:

<colgroup>
  <col span="2" />
  <col class="column-background" />
  <col class="column-fixed-width" />
  <col class="column-background" />
  <col class="column-background-border" />
  <col span="2" class="column-fixed-width" />
</colgroup>

Разглеждане на елементите <col>:

Първият има зададен span="2", така че представлява първата и втората колона отляво на таблицата. Тези колони нямат стилове, но трябва да ги включим, за да можем да насочим следващите колони.
Вторият и четвъртият нямат зададен атрибут span, така че ще представляват една колона - в тези случаи третата и петата колона. Към тях е приложен клас column-background.
Третият няма зададен атрибут span и има приложен клас column-fixed-width. Той представлява четвъртата колона.
Петият няма зададен атрибут span и има приложен клас column-background-border. Той представлява шестата колона.
Шестият има зададен span="2" и има приложен клас column-fixed-width. Той представлява седмата и осмата колона.

Ето и стиловете, които са зададени на класовете:

.column-background {
  background-color: #97db9a;
}
.column-fixed-width {
  width: 40px;
}
.column-background-border {
  background-color: #dcc48e;
  border: 4px solid #c1437a;
}

Елементите <col> с клас column-background имат зададен цвят на фона.
Елементите <col> с клас column-fixed-width имат зададена фиксирана ширина.
Елементът <col> с клас column-background-border има цвят на фона и цветна рамка.

Code

<style>
.column-background {
      background-color: #97db9a;
}
.column-fixed-width {
      width: 40px;
}
.column-background-border {
      background-color: #dcc48e;
      border: 4px solid #c1437a;
}
table, th, td {
border: 1px solid black;
padding: 5px;
}
table {
border-collapse: collapse;
}
</style>

<table>
  <colgroup>
      <col span="2" />
      <col class="column-background" />
      <col class="column-fixed-width" />
      <col class="column-background" />
      <col class="column-background-border" />
      <col span="2" class="column-fixed-width" />
  </colgroup>
  <tr>
      <td>&nbsp;</td>
      <th>Mon</th>
      <th>Tues</th>
      <th>Wed</th>
      <th>Thurs</th>
      <th>Fri</th>
      <th>Sat</th>
      <th>Sun</th>
  </tr>
  <tr>
      <th>1st period</th>
      <td>English</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>German</td>
      <td>Dutch</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
  </tr>
  <tr>
      <th>2nd period</th>
      <td>English</td>
      <td>English</td>
      <td>&nbsp;</td>
      <td>German</td>
      <td>Dutch</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
  </tr>
</table>

Preview

Добавяне на надпис

Можете да приложите надпис на таблицата си, като го поставите в елемент <caption> и го вложите в елемента <table>. Трябва да го поставите точно под отварящия таг <table>. [2]

<table>
    <caption>
      Dinosaurs in the Jurassic period
    </caption>
    <!-- … -->
</table>

Както можете да заключите от краткия пример по-горе, надписът е предназначен да съдържа описание на съдържанието на таблицата. Това е полезно за всички читатели, които желаят да получат бърза представа дали таблицата е полезна за тях, докато преглеждат страницата, но особено за незрящи потребители. Вместо екранен четец да чете съдържанието на много клетки само за да разбере за какво е таблицата, потребителят може да разчита на надпис и след това да реши дали да прочете таблицата по-подробно или не.

Бележка

Атрибутът summary може да се използва и върху елемента <table>, за да се предостави описание — то също се чете от екранни четци. Препоръчваме обаче да използвате елемента <caption>, тъй като summary е остарял (deprecated) и не може да се чете от зрящи потребители (не се показва на страницата).

Добавяне на структура

Тъй като структурата на таблиците ви става малко по-сложна, е полезно да им дадете по-добра дефиниция. Един ясен начин да направите това е чрез използване на <thead>, <tbody> и <tfoot>, които ви позволяват да маркирате секции за заглавие, тяло и долен колонтитул (footer) за таблицата.

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

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

За да ги използвате, те трябва да бъдат включени в следния ред:

Елементът <thead> трябва да обгръща частта от таблицата, която е заглавна — това обикновено е първият ред, съдържащ заглавията на колоните, но това не е задължително винаги да е така. Ако използвате елементи <col>/<colgroup>, заглавието на таблицата трябва да е точно под тях.
Елементът <tbody> трябва да обгръща основната част от съдържанието на таблицата, която не е заглавната или долната част на таблицата, и трябва да е след <thead>.
Елементът <tfoot> трябва да обгръща частта от таблицата, която е долната част — това може да е последен ред със сумирани елементи от предишните редове, например. <tfoot> трябва да е след <tbody>.

Информация

<tbody> винаги е включен във всяка таблица, дори ако не го напишете в кода си. За да проверите това, отворете един от предишните си примери, който не включва <tbody>, и погледнете HTML кода в инструментите за разработчици на браузъра си (десен бутон на мишката -> Инспектиране/Inspect) — ще видите, че браузърът е добавил този таг вместо вас. Може би се чудите защо изобщо трябва да го включвате — трябва, защото ви дава по-голям контрол върху структурата и стила на таблицата.

Tаблица със записи на разходи

spending-record.html

<h1>My spending record</h1>

<table>
  <caption>
    How I chose to spend my money
  </caption>
  <tr>
    <th>Purchase</th>
    <th>Location</th>
    <th>Date</th>
    <th>Evaluation</th>
    <th>Cost (€)</th>
  </tr>
  <tr>
    <td>Haircut</td>
    <td>Hairdresser</td>
    <td>12/09</td>
    <td>Great idea</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Lasagna</td>
    <td>Restaurant</td>
    <td>12/09</td>
    <td>Regrets</td>
    <td>18</td>
  </tr>
  <tr>
    <td>Shoes</td>
    <td>Shoe shop</td>
    <td>13/09</td>
    <td>Big regrets</td>
    <td>65</td>
  </tr>
  <tr>
    <td>Toothpaste</td>
    <td>Supermarket</td>
    <td>13/09</td>
    <td>Good</td>
    <td>5</td>
  </tr>
  <tr>
    <td>SUM</td>
    <td>118</td>
  </tr>
</table>

minimal-table.css

html {
  font-family: sans-serif;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(200 200 200);
  letter-spacing: 1px;
  font-size: 0.8rem;
}

td,
th {
  border: 1px solid rgb(190 190 190);
  padding: 10px 20px;
}

th {
  background-color: rgb(235 235 235);
}

td {
  text-align: center;
}

tr:nth-child(even) td {
  background-color: rgb(250 250 250);
}

tr:nth-child(odd) td {
  background-color: rgb(245 245 245);
}

caption {
  padding: 10px;
}

Code

<style>
html {
    font-family: sans-serif;
}
table {
    border-collapse: collapse;
    border: 2px solid rgb(200 200 200);
    letter-spacing: 1px;
    font-size: 0.8rem;
}
td, th {
    border: 1px solid rgb(190 190 190);
    padding: 10px 20px;
}
th {
    background-color: rgb(235 235 235);
}
td {
    text-align: center;
}
tr:nth-child(even) td {
    background-color: rgb(250 250 250);
}
tr:nth-child(odd) td {
    background-color: rgb(245 245 245);
}
caption {
    padding: 10px;
}
tbody {
    font-size: 95%;
    font-style: italic;
}
tfoot {
    font-weight: bold;
}
</style>

<table>
  <caption>
    How I chose to spend my money
  </caption>
  <thead>
      <tr>
          <th>Purchase</th>
          <th>Location</th>
          <th>Date</th>
          <th>Evaluation</th>
          <th>Cost (€)</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td>Haircut</td>
          <td>Hairdresser</td>
          <td>12/09</td>
          <td>Great idea</td>
          <td>30</td>
      </tr>
      <tr>
          <td>Lasagna</td>
          <td>Restaurant</td>
          <td>12/09</td>
          <td>Regrets</td>
          <td>18</td>
      </tr>
      <tr>
          <td>Shoes</td>
          <td>Shoe shop</td>
          <td>13/09</td>
          <td>Big regrets</td>
          <td>65</td>
      </tr>
      <tr>
          <td>Toothpaste</td>
          <td>Supermarket</td>
          <td>13/09</td>
          <td>Good</td>
          <td>5</td>
      </tr>
  </tbody>
  <tfoot>
      <tr>
          <td colspan="4">SUM</td>
          <td>118</td>
      </tr>
  </tfoot>
</table>

Preview

Редът със заглавните клетки се поставя вътре в елемент <thead>, редът SUM вътре в елемент <tfoot> и останалото съдържание вътре в елемент <tbody>.
След това добавете атрибут colspan="4", за да накарате клетката SUM да се разпростира през първите четири колони, така че действителното число да се показва в долната част на колоната Cost.
Накрая се добавят и стилове за <tbody> и <tfoot>.

Атрибутите id и headers

Атрибутите id и headers се използват за създаване на асоциации между клетки с данни и заглавни клетки.

Елементът <th> може да предостави заглавие или за клетка с данни <td>, или, в по-сложни таблици, за друга заглавна клетка <th>. Това ви позволява да създавате слоести или групирани заглавни части, където една заглавна клетка описва няколко други.

Атрибутът headers се използва за свързване на клетка, <td> или <th>, с една или повече заглавни клетки. Той приема списък с низове (поредица от символи, използвани за представяне на текст), разделени с интервал; редът на низовете няма значение. Всеки низ трябва да съответства на уникалния идентификатор на елемент <th>, с който е свързана клетката.

Този метод дава на вашата HTML таблица по-ясно определение на позицията на всяка клетка, въз основа на заглавните части за колоната и реда, към който принадлежи, подобно на електронна таблица. За да работи това добре, вашата таблица трябва да включва заглавни клетки както на колони, така и на редове.

Нека разгледаме част от примера „Продадени артикули през август 2026 г.“, за да видим как да използваме атрибутите id и headers:

Добавете уникален идентификатор към всеки <th> елемент в таблицата.
За заглавните клетки: Добавете атрибут headers към всеки <th> елемент, който действа като подзаглавие, т.е. заглавна клетка с друга заглавна част над нея. Стойността е идентификаторът на заглавието от високо ниво. В нашия пример това е clothes за заглавните части на колоните и belgium за заглавната част на реда.
За клетките с данни: Добавете атрибут headers към всеки <td> елемент и добавете идентификаторите на свързаните <th> елементи като списък, разделен с интервали. Можете да продължите както бихте направили в електронна таблица: Намерете клетката с данни, след което намерете заглавните клетки на редовете и колоните, които я описват. Редът на посочените идентификатори няма значение, но поддържането на последователност помага за организирането и подобрява четливостта на кода.

Code

<style>
table, th, td {
border: 1px solid black;
padding: 5px;
}
table {
border-collapse: collapse;
}
</style>
<table>
  <thead>
      <tr>
          <th></th>
          <th></th>
          <th id="clothes" colspan="3">Clothes</th>
      </tr>
      <tr>
          <th></th>
          <th></th>
          <th id="trousers" headers="clothes">Trousers</th>
          <th id="skirts" headers="clothes">Skirts</th>
          <th id="dresses" headers="clothes">Dresses</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <th id="belgium" rowspan="2">Belgium</th>
          <th id="antwerp" headers="belgium">Antwerp</th>
          <td headers="belgium antwerp clothes trousers">56</td>
          <td headers="belgium antwerp clothes skirts">22</td>
          <td headers="belgium antwerp clothes dresses">43</td>
      </tr>
      <tr>
          <th id="ghent" headers="belgium">Ghent</th>
          <td headers="belgium ghent clothes trousers">41</td>
          <td headers="belgium ghent clothes skirts">17</td>
          <td headers="belgium ghent clothes dresses">35</td>
      </tr>
  </tbody>
</table>

Preview

<th> за Belgium използва rowspan="2", за да обхване и Antwerp, и Ghent.
Заглавните клетки на града (Antwerp и Ghent) използват атрибута headers, за да посочат Belgium, за да покажат, че принадлежат към групата Belgium.
Всеки <td> включва атрибут headers за държава (Belgium), град (Antwerp или Ghent), група (Clothes) и конкретния артикул облекло (trousers, skirts или dresses).

Успя да разбереш как се използват таблиците? 🫠

Провери какво си научил, като решиш това предизвикателство 😲

Фреймове

IFrame

HTML елементът <iframe> представлява вложен контекст, вграждайки друга HTML страница в текущата. [3]

Code

<iframe
  id="inlineFrameExample"
  title="Inline Frame Example"
  width="300"
  height="200"
  src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&amp;layer=mapnik">
</iframe>

Preview

Всеки вграден контекст има свой собствен документ и позволява URL навигация. Контекстът за сърфиране, който вгражда останалите, се нарича родителски контекст за сърфиране. Най-горният контекст за сърфиране – този без родител – обикновено е прозорецът на браузъра, представен от [обекта Window].

Внимание

Тъй като всеки контекст за сърфиране е цялостен документ, всеки <iframe> в страницата изисква увеличена памет и други изчислителни ресурси. Въпреки че теоретично можете да използвате колкото искате <iframe>, проверете за проблеми с производителността.

Елементът <iframe> съдържа следните атрибути.

Адаптивно оразмеряване

От съображения за сигурност и поверителност, елементите <iframe> по подразбиране не предоставят никаква информация на родителския документ относно размера на съдържанието в документа, който вграждат.

За да се активира адаптивно оразмеряване на елементите <iframe> въз основа на тяхното съдържание, тагът <meta name="responsive-embedded-sizing"> може да бъде включен във вграден документ, за да се включи споделянето на информация за размера му с родителския документ. CSS свойството frame-sizing може да бъде зададено на <iframe>, за да се приеме същият хоризонтален или вертикален размер като действителния размер на съдържанието на вградения документ. Това гарантира, че съдържанието на <iframe> се вписва безпроблемно във вграждащия модул.

Достъпност

Хората, които навигират с помощни технологии като например екранен четец, могат да използват атрибута title на <iframe>, за да обозначат съдържанието му. Стойността на title трябва да описва сбито вграденото съдържание:

<iframe
  title="Wikipedia page for Avocados"
  src="https://en.wikipedia.org/wiki/Avocado">
</iframe>

Без това заглавие, те трябва да навигират в <iframe>, за да определят какво е вграденото му съдържание. Тази промяна на контекста може да бъде объркваща и отнемаща време, особено за страници с множество <iframe> и/или ако вградените елементи съдържат интерактивно съдържание като видео или аудио.

Този пример вгражда страницата с адрес https://example.org в <iframe>. Това е често срещан случай на употреба на iframe-ове: за вграждане на съдържание от друг сайт.

Code

<iframe
  src="https://example.org"
  title="iframe Example 1"
  width="400"
  height="300">
</iframe>

Preview

Frame

<frame> - остарял (deprecated)

Внимание

Избягвайте използването на тази функция в нови проекти. Тази функция може да е кандидат за премахване от уеб стандартите или браузърите.

HTML елементът <frame> определя определена област, в която може да се покаже друг HTML документ. Рамка трябва да се използва вътре в <frameset>. Използването на елемента <frame> не се препоръчва поради определени недостатъци като например проблеми с производителността и липса на достъпност за потребители с екранни четци. Вместо елемента <frame>, може да се предпочете <iframe>. [4]

<frame> поддържа [следните атрибути].

Документ с рамки има елемент <frameset> вместо елемент <body>. Елементите <frame> се намират в <frameset>.

<!doctype html>
<html lang="en-US">
    <head>
        <!-- Document metadata goes here -->
    </head>
    <frameset cols="400, 500">
        <frame src="https://developer.mozilla.org/en/HTML/Element/iframe" />
        <frame src="https://developer.mozilla.org/en/HTML/Element/frame" />
    </frameset>
</html>

Frameset

<frameset> - остарял (deprecated)

Внимание

HTML елементът <frameset> се използва за съдържане на елементи <frame>. Той поддържа [следните атрибути].

Документ с рамки има елемент <frameset> вместо елемент <body>. Елементите <frame> са поставени в <frameset>. [5]

<!doctype html>
<html lang="en-US">
    <head>
      <!-- Document metadata goes here -->
    </head>
    <frameset cols="50%, 50%">
        <frame
          src="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/iframe" />
        <frame
          src="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/frame" />
    </frameset>
</html>

Таблици​

Как се използва таблицата?​

Стилизиране​

Кога да НЕ използваме таблици?​

Създаване на таблица​

Code

Preview

Code

Preview

Добавяне на заглавни клетки​

Code

Preview

Code

Preview

Защо заглавните клетки са полезни?​

Разрешаване на клетките да обхващат множество редове и колони​

Code

Preview

Коригиране на оформлението с rowspan и colspan​

Code

Preview

Групиране на колони с <colgroup> и <col>​

Code

Preview

Code

Preview

Добавяне на надпис​

Добавяне на структура​

Tаблица със записи на разходи​

Code

Preview

Атрибутите id и headers​

Code

Preview

Фреймове​

IFrame​

Code

Preview

Адаптивно оразмеряване​

Достъпност​

Code

Preview

Frame​

Frameset​

Използвана литература​

MDN Web Docs - HTML tables - 1​

MDN Web Docs - HTML tables - 2​

MDN Web Docs - HTML tables - challenge​

MDN Web Docs - HTML iframe​

MDN Web Docs - HTML frame​

MDN Web Docs - HTML frameset​

Таблици

Как се използва таблицата?

Стилизиране

Кога да НЕ използваме таблици?

Създаване на таблица

Добавяне на заглавни клетки

Защо заглавните клетки са полезни?

Разрешаване на клетките да обхващат множество редове и колони

Коригиране на оформлението с rowspan и colspan

Групиране на колони с `<colgroup>` и `<col>`

Добавяне на надпис

Добавяне на структура

Tаблица със записи на разходи

Атрибутите id и headers

Фреймове

IFrame

Адаптивно оразмеряване

Достъпност

Frame

Frameset

Използвана литература

MDN Web Docs - HTML tables - 1

MDN Web Docs - HTML tables - 2

MDN Web Docs - HTML tables - challenge

MDN Web Docs - HTML iframe

MDN Web Docs - HTML frame

MDN Web Docs - HTML frameset