HTML+CSS Создание таблиц

Уроки HTML+CSS: Создание таблицы

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

Создание таблицы

Главным тегом является тег <table></table>, внутри него будут располагаться теги определяющие структуру таблицы.

<tr></tr> – создает строку, в которую записываются элементы.

<td></td> – создает ячейку, в которую можно записать информацию.

<th></th> – определяет заголовок столбца, который обычно записал в первой строке таблицы.

По началу все кажется не совсем понятным, но давайте посмотри на пример.

<table>
<tr><th>Заголовок 1</th><th>Заголовок 2</th></tr> <!--ряд с ячейками заголовков-->
<tr><td>Пример текста</td><td>Пример текста</td></tr> <!--ряд с ячейками тела таблицы-->
</table>

Заголовок 1Заголовок 2
Пример текстаПример текста

Как видно в примере я создал строку(ряд) <tr></tr>. В первой строке я поместил 2 заголовка <th></th>. Получилось <tr><th>Заголовок 1</th><th>Заголовок 2</th></tr>.

Во второй строке я сделал тоже самое, только заменили заголовки на обычные ячейки, в которые можно записать информацию. И получилось <tr><td>Пример текста</td><td>Пример текста</td></tr>.

Чтобы создавать правильные, симметричные таблицы, вам нужно в каждом ряду указывать одинаковое число ячеек(<td> или <th>).

Вот что получится если вы укажите разное количество ячеек.Групировка

<table>
<tr><th>Заголовок 1</th><th>Заголовок 2</th></tr>
<tr><td>Текст 1</td><td>Текст 2</td><td>Текст 3</td></tr>
</table>

Заголовок 1Заголовок 2
Текст 1Текст 2Текст 3

В данном примере я добавил 3 ячейку во второй строке.

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

Информация была взята с сайта – https://html5book.ru

На этом всё!
Если у вас есть вопросы, пишите их в нашей группе - https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи - https://vk.com/prog_time
В ней мы делимся своим опытом с другими начинающими программистами, поэтому обязательно ответим на ваш вопрос.
Так же прокачивайте свои навыки на нашем канале - https://www.youtube.com/c/ProgTime

51
Оставить комментарий

avatar
51 Цепочка комментария
0 Ответы по цепочке
0 Последователи
 
Популярнейший комментарий
Цепочка актуального комментария
49 Авторы комментариев
ShannonviamyJeromepeftreantincJasonAroxyJasonAroxy Авторы недавних комментариев
  Подписаться  
новее старее большинство голосов
Уведомление о
JanleF
Гость

Finasteride Tablet In Germany [url=https://apcialisle.com/#]buy cialis online canada[/url] Cephalexin Perscription Manufacturer Cialis Cialis Vente France

JanleF
Гость

Can You Puchase Prochlorperazine Online [url=http://cialibuy.com/#]Cialis[/url] Brand Viagra Hawaii Cialis Propecia Increased Libido

RogelioCab
Гость
RogelioCab

order cialis online pharmacy painkillers online with next day delivery buy levitra online in canada

RobertCIP
Гость
RobertCIP

cheap viagra cialis buy cialis generic cheap viagra women

WilliamAcurn
Гость
WilliamAcurn

viagra buy greece cialis online viagra buy walgreens

Vernoncrott
Гость
Vernoncrott

how to order viagra in india https://viagrawithoutdoctorspres.com cialis tadalafil cheapest online

RobertIdeok
Гость
RobertIdeok

cialis 20 mg tablets uk https://edpillsphrm.com order generic viagra us [url=https://edpillsphrm.com]online prescription for ed meds[/url] buy generic viagra online

Elmerwah
Гость
Elmerwah

buy viagra at cvs 100mg viagra without a doctor prescription can you buy real cialis online

JanleF
Гость

But Venlafaxine Xr Canada [url=https://abuycialisb.com/#]Cialis[/url] Acheter Levitra Medicament Cialis Cheap Zoloft Without Prescription

DonaldSeasy
Гость
DonaldSeasy

can buy viagra dublin http://alexa24ph.com – viagra pills cheap generic viagra

DonaldSeasy
Гость
DonaldSeasy

cialis over the counter 2019 http://aralenph.com – chloroquine viagra buy philippines

DonaldSeasy
Гость
DonaldSeasy

generic viagra cheap canada http://tadal24ph.com – cialis cost buy cialis generic canada

DonaldSeasy
Гость
DonaldSeasy

order cialis europe http://kaletra24.com – buy kaletra viagra super active+ 100mg pills

DonaldSeasy
Гость
DonaldSeasy

buy cialis sydney http://zithazi.com – zithromax Azithromycin viagra walgreens

DonaldSeasy
Гость
DonaldSeasy

cialis c20 pills http://aralenph.com – chloroquine buy levitra online

DonaldSeasy
Гость
DonaldSeasy

is mail order viagra safe http://hydroxychloroquine24.com – plaquenil generic buy viagra in dubai

DonaldSeasy
Гость
DonaldSeasy

viagra by mail order from canada http://aralenph.com – chloroquine cheap cialis for sale

DonaldSeasy
Гость
DonaldSeasy

non prescription viagra http://aralenph.com – buy chloroquine online where to buy real viagra cialis online

DonaldSeasy
Гость
DonaldSeasy

levitra professional cheapest http://kaletra24.com – kaletra generic cheap prices for levitra

DonaldSeasy
Гость
DonaldSeasy

viagra sale asda http://hydroxychloroquine24.com – plaquenil online buy levitra canada online

DonaldSeasy
Гость
DonaldSeasy

buy viagra new zealand http://kaletra24.com – buy kaletra online cheapest viagra online

DonaldSeasy
Гость
DonaldSeasy

buy cialis canada yahoo answers http://hydroxychloroquine24.com – generic plaquenil viagra cheap paypal

VirgilGuipt
Гость
VirgilGuipt

buy generic viagra professional
viagra without a doctor prescription

VirgilGuipt
Гость
VirgilGuipt

how to order cialis online
generic viagra

VirgilGuipt
Гость
VirgilGuipt

order generic viagra online
generic viagra

VirgilGuipt
Гость
VirgilGuipt

cheap cialis prices canada
buy sildenafil

VirgilGuipt
Гость
VirgilGuipt

buy levitra online with prescription
cheap viagra

VirgilGuipt
Гость
VirgilGuipt

kamagra cheap viagra
viagra pills

VirgilGuipt
Гость
VirgilGuipt

buy cialis online in u.k
viagra without a doctor prescription

VirgilGuipt
Гость
VirgilGuipt

where can i buy cialis in london
cheap viagra

VirgilGuipt
Гость
VirgilGuipt

legit cheap viagra
sildenafil

VirgilGuipt
Гость
VirgilGuipt

black cialis discount you
viagra online

VirgilGuipt
Гость
VirgilGuipt

cheap viagra online australia
buy sildenafil

VirgilGuipt
Гость
VirgilGuipt

buy viagra soho
generic viagra

VirgilGuipt
Гость
VirgilGuipt

buy viagra rio janeiro
viagra without doctor prescription

VirgilGuipt
Гость
VirgilGuipt

order viagra walgreens
viagra online

Donaldneeft
Гость
Donaldneeft
Donaldneeft
Гость
Donaldneeft

generic viagra without subscription walmart generic viagra

Herbertlep
Гость
Herbertlep
Herbertlep
Гость
Herbertlep

cheapest cialis
http://tadalafilprof.com

Clintoncooth
Гость
Clintoncooth

real viagra without a doctor prescription real viagra without a doctor prescription
wholesale cialis pills

Clintoncooth
Гость
Clintoncooth

viagra online pharmacy viagra
cialis pills in canada

Viagra Generic
Гость

trial samples of viagra directions for use of viagra
how to order cialis online no prescription

Viagra Generic
Гость

sildenafil citrate generic viagra 100mg viagra dosage recommendations
order viagra cialis canada

unsenty
Гость

How Long Does Vardenafil Last [url=https://cheapcialisir.com/]Cialis[/url] Joynt purchase cialis online cheap Cialis 20 Mg Mitad

abakaro
Гость

Amoxicillin 875 125 [url=https://viacialisns.com/]Cialis[/url] Amoxicillin Causes Stomach Discomfort generic cialis online Propecia While On Nodular Acne

JasonAroxy
Гость
JasonAroxy

viagra without a doctor prescription viagra without a prescription
onlinepharmacyero.com

JasonAroxy
Гость
JasonAroxy

meds online without doctor prescription dog antibiotics without vet prescription
onlinepharmacyero.com

treantinc
Гость
treantinc

farmacia viagra comprar [url=https://cheapcialisll.com/]Cheap Cialis[/url] Priligy Generico En Argentina Cheap Cialis Cialis Super Force Online Shopping

Jeromepef
Гость
Jeromepef

coupon for cialis by manufacturer generic viagra
bestpricemedz.com generic cialis