Практична робота _Таблиці _10 кл

Сходинка 21.

Чи довго, чи коротко, але ми дісталися таблиць. Під час створення сайтів таблиці
використовуються дуже часто.
Таблиця задається тегом:

Отже, перед вами таблиця з двох рядків та трьох стовпців (осередків). Для
наочності я виділила осередки таблиці різними кольорами. Межі таблиці не задані,
тому їх не бачите. Як же така краса вийшла?

Спочатку ми задали рядки. У нашому прикладі їх дві. Тепер у кожному рядку

поставимо по три стовпці (комірки):

1
Практична робота _Таблиці _10 кл

До речі, коли ви створюватимете свій сайт і таблиці, краще малюйте все спочатку
на папері, так вам буде легше потім верстати, т.к. ви все наочно бачитимете на
папері, і у вас буде менше ймовірності помилитися.

Отже, тепер нам треба заповнити каркас, що вийшов:

Сподіваюся ви зрозуміли, що перша цифра в загадкових

написах – це номер ряду, а друга номер осередку (1х2 –
перший ряд, другий осередок). Це знову ж таки вам для
наочності. Якщо подивитися те, що вже у нас з вами
вийшло, то це виглядатиме так:

1x1 1x2 1x3

2x1 2x2 2x3

На жаль, фону (синього або жовтенького, як у прикладі) ще не видно. Фон задається

атрибутом bgcolor="колір_фону". Фон можна встановити для таблиці в цілому,
для ряду, для осередку (у межі одного ряду). У нашому випадку ми задаємо фон для
кожного осередку.

2
Практична робота _Таблиці _10 кл

Ось, що у нас вийшло:

Якщо ви хочете задати фон для ряду, атрибут bgcolor ми прописуємо для тега
<tr>:

<tr bgcolor="#FFCC33">

Якщо ви хочете задати фон для всієї таблиці, то атрибут bgcolor ми прописуємо для
тега <table>:

<table bgcolor="#FFCC33">

Однак, якщо при заданому фоні для всієї таблиці, ви задаєте свій фон для ряду або
комірки, то цей ряд або комірка будуть мати фон відмінний від усієї таблиці.

3
Практична робота _Таблиці _10 кл

У чому ж справа? А в тому, що ми не задали висоту і ширину

осередків таблиці нашої:) Згадаймо про атрибути height і width -
ви можете їх задати для всієї таблиці, для одного ряду, для
стовпця. Висота та ширина можуть задаватися як у пікселях, так і
відсотках. У нашому випадку ми задамо ширину та висоту в
пікселях для стовпців (осередків).