Як задати ширину таблиці

Як задати ширину таблиці

Інструкції мови 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: 100px;}

    Тут table вказує на те, що поміщене всередину фігурних дужок опис має бути застосовано до всіх тегам table, що зустрічаються в коді сторінки. Ну а параметр width задає ширину. Тут теж можна використовувати відносну ширину у відсотках.
  4. Вказуйте в CSS-коді і в HTML-тегу table ім’я класу, якщо задати ширину треба не для всіх таблиць, а тільки для однієї або декількох. Наприклад, нехай клас, що відзначає групу вузьких таблиць, називається tiny. Тоді опис його стилю може виглядати так:

    table.tiny {width: 100px;}

    А відповідний тег однієї з таблиць в HTML-коді — так:

    <table class=»tiny»>

     <tr> <td> 1я осередок </ td> <td> 2я осередок </ td> </ tr>

    </ Table>