Як встановити ширину таблиці

Як встановити ширину таблиці

Інструкції мови HTML (HyperText Markup Language або "Мова розмітки гіпертексту"), які формують таблиці, що розміщуються у веб-сторінках, передбачають досить велику кількість додаткових параметрів. Це дозволяє, на відміну від інших блокових елементів, задавати розміри не тільки за допомогою мови CSS (Cascading Style Sheets або "Каскадні таблиці стилів"), але і засобами самого HTML.

Інструкція

1. Використовуйте атрибут width теґу table, щоб вказати ширину таблиці в пікселях. Тег (інструкція мови HTML) table складається з відкриваючої (< table >) і закриваючої (</table >) частин, між якими знаходяться теги, що формують рядки і комірки таблиці. Ви можете розмістити додаткові параметри (атрибути), список яких для кожного конкретного тегу визначатиметься міжнародними стандартами. Для тега table цими стандартами дозволено використання атрибута width, який визначає ширину таблиці в пікселях. Виглядати HTML-код найпростішої таблиці з таким тегом, що визначає ширину в 500 піксел, може, наприклад, так:< table width = "" 500 "" > < tr > < td > 1я комірка </td > < td > 2а комірка </td > </tr > </table >


2. Додайте символ% до значення атрибута width, якщо ширину таблиці потрібно вказати у відсотках, а не в пікселях:< table width = "" 60% "" > < tr > < td > 1я комірка </td > < td > 2а комірка </td > </tr > </table > Зауважте. Тут має значення структура документа - як вкладена матрьошка не може бути ширшою тієї, в яку вона вкладена, так і 100% ширини таблиці не може бути більше ширини батьківського елемента. Наприклад, якщо таблиця знаходиться всередині блоку div, то за 100% буде прийматися ширина цього блоку.

3. Використовуйте інструкції мови опису стилів, якщо ви бажаєте в одному місці початкового коду вказати однакову ширину таблиць, розміщених у веб-сторінці. Для цього спочатку помістіть в заголовкову частину HTML-коду (між < head > і </head >) відкриває і закриває теги, що обмежують інструкції мови CSS:< style type = "" text/css "" >/* тут будуть CSS-інструкції */</style > Потім між цими тегами помістіть такий CSS-код:table {width: 100рх;} Тут table вказує на те, що розміщений всередину фігурних дужок опис повинен бути застосований до всіх тегів table, що зустрічаються в коді сторінки. Ну а параметр width визначає ширину. Тут також можна використовувати відносну ширину у відсотках.

4. Задайте ім 'я класу в CSS-коді та HTML-тегу table, якщо ви бажаєте встановити ширину всіх таблиць, а лише для однієї або декількох таблиць. Наприклад, нехай клас, що позначає групу вузьких таблиць, називається tiny. Тоді опис його стилю може виглядати так:table.tiny {width: 100px;} A відповідний тег однієї з таблиць у HTML-коді - так:< table class = "" tiny "> < tr > < td > 1я комірка </td > < td > 2а комірка </td > </tr > </table >