Це важко?

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

Приклад 1:

буде виглядати в браузері:

Яка різниця між <tr> і <td> ?

Як видно з наведеного прикладу, це, можливо, найскладніший із прикладів HTML, які ми вам давали до цих пір. Давайте тут зупинимося і зробимо пояснення:

Для вставки таблиць використовуються 3 базових тега:

• <table> - початок і кінець таблиці. Логічно.
• <tr> - " T Able R OW / ряд таблиці ", починає і закінчує горизонтальний ряд клітинок. Теж логічно.
• <td> - скорочення від " T Able D ATA / табличні дані ". Цей тег розпочинає і закінчує кожну клітинку ряду таблиці. Все просто і логічно.

Ось що відбувається в Прикладі 1: таблиця починається з <table> , потім йде <tr> , який вказує на початок нового ряду. У ряді вставлені дві клітинки: <td> Cell 1 </td> і <td> Cell 2 </td> . Ряд закривається </tr> , і відразу починається новий ряд <tr> . У новому ряду також дві клітинки. Таблиця закривається </table> .

Щоб було ще зрозуміліше: ряди це горизонтальні рядки клітинок, а стовпці - вертикальні стовпчики клітинок:

Cell 1 і Cell 2 утворюють ряд. Cell 1 і Cell 3 утворюють стовпець.

У наведеному вище прикладі в таблиці є два ряди і два стовпці. Але в таблиці може бути необмежена кількість рядів і стовпців.

Приклад 2:

буде виглядати в браузері: