Ширина таблицы css: Как установить ширину таблицы через стили?

Leave a Comment / Css / By /

Магия CSS. Глава 3. Таблицы. table-layout | by Workafrolic (±∞)

table-layout

В предыдущей главе мы обсудили раскладку. Но мы говорили о ней как об инструменте построения вашего контента с точки зрения дизайна — геометрической структуре вашего приложения, несущей смысловую нагрузку. Посмотрите на зелье Двухколоночного приложения.

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

Этот процесс поистине волшебный!

Сложный алгоритм раскладки используется для расчета как горизонтальных, так и вертикальных размеров. И эта вилка алгоритмов основывается на table-layout, который вы указываете. У этого свойства есть два варианта:

auto — значение по умолчанию. Я пытаюсь задать размеры столбцов относительно друг друга и ориентируясь на самую широкую ячейку в каждом столбце если вы не задали конкретные величины, которые определяют отношения элементов. (CSS spec)

fixed — Я пытаюсь сделать столбцы равными, если вы не дали мне конкретную ширину в px. Если да, то я использую ее для соблюдения соотношения размеров. (CSS spec)

Это грубое и не полное определение. Я крайне рекомендую вам прочитать спецификацию чтобы лучше понять механизм работы. Но нет ничего лучше игры с реальным кодом, поэтому давайте взглянем на несколько примеров для получения полной картины.

Пример 1: Нет ширины

table-layout: auto

table-layout: fixed

Обратите внимание, что в случае со значением fixed колонки имеют равные размеры поскольку не указана их точная ширина. Но в случае со значением auto размеры колонок пропорциональны содержимому ячейки.

Пример 2: Ширина в процентах

Теперь давайте посмотрим на тот же пример с шириной столбцов 20% и 50% соответственно.

В обоих случаях заданная нами ширина принимается во внимание, но размеры колонок не точные, а относительные. Это утверждение всегда верно в отношении случаев со значение auto, но лишь частично верно в случаях со значением fixed, поскольку размеры заданы в процентах. Браузер как бы говорит “20% это 2/7 части из общего выражения 20+50%”, поэтому при ширине таблицы в 1000px первая колонка будет иметь ширину 284px, а вторая — 714px. Грубое соотношение 2:5. (Соотношение не может быть точно 2 к 5 из-за свойств cell-spacing, cell-padding, border, border-spacing, border-collapse, округления и других ограничений.)

Обратите внимание на то, что white-space: nowrap применяется к каждой ячейке. В таблице с auto это свойство компенсируется, но в случае с fixed текст выходит за границы.

Задачка на подумать: почему первая колонка чуть шире в случае с fixed?

Пример 3: Смешанные ширины

Теперь рассмотрим тот же пример, но с ширинами колонок 400px и 70% соответственно.

table-layout: auto

table-layout: fixed

Ok…. Поскольку ширина таблиц всего 694px, у браузера нет возможности нарисовать колонки 400px и 70% × 694px в таблице с такой шириной. Поэтому он делает все, что в его силах.

В случае с auto, заданные нами значения ширины принимаются во внимание, но только примерно. Рассчет следующий: 400px / 694px к 70% × 694px . И браузер старается его соблюсти. (Поведение варьируется от браузера к браузеру.)

В случае с fixed, ширина колонки в 400px сохраняется, поскольку фиксированные значения имеют приоритет над процентными. Второй столбец получает остаток ширины.

Табличные данные

Я не буду подробно останавливаться на этой теме, поскольку в первую очередь это курс по CSS. Но основной причиной использования таблиц в верстке являются табличные данные. Табличными (tabular) данные считаются, если вы можете представить их в таблице (spreadsheet). (Прим. переводчика: без уточнения английских слов, имеющих одинаковое значение в русском языке, в предложении возникает тавтология.) Контентная матрица.

Есть несколько основных правил, которым стоит следовать когда дело доходит до создания таблиц с табличными данными:

  • Большие таблицы должны быть раскрашены в полоску или при наведении на строку (:hover) у нее должен появляться цветной фон. Это нужно чтобы видеть все ячейки в одной строке.
  • Столбцы с числовыми данными должны иметь выравнивание по правому краю так, чтобы цифры находились друг под другом.
  • Текст в крайнем правом столбце должен иметь правую выключку, чтобы избежать рваного края (вполне подойдет text-align: justify).
  • Если это возможно, высота строк должна быть одинаковой, чтобы облегчить вертикальный просмотр. (Этот общий принцип известен как “вертикальный ритм” и он очень важен.)

Посмотрите на зелье табличных стилей как на пример, в котором соблюдены эти правила.

Таблицы как инструмент раскладки

В предыдущей главе про раскладку мы видели, что таблицы могут быть использованы для вертикального выравнивания контента произвольной высоты. Пока flex не поддерживается повсеместно, мы не должны стесняться использовать таблицы в этих целях. Кроме того если вы осознали, что используете таблицы для компоновки не табличных данных, то, скорее всего, вы делаете это неверно.

Если вы поддерживаете браузеры IE10 и выше, то используйте flex. Phillip Walton написал чудесный учебный материал по вертикальному выравниванию при помощи flexbox.

Подводные камни

Есть тааак мноооого причин почему вы не должны использовать таблицы кроме как для табличных данных и вертикального выравнивания (как обсуждалось). Но чтобы пройти этот путь до конца, я привожу несколько чрезвычайно распространенных ошибок, которые кроются в работе с таблицами.

Камень 1: Ячейки таблицы не считаются с overflow (table-layout: auto; Firefox, IE)

Это означает, что даже если вы используете table-layout: fixed вместе с шириной в пикселях, overflow: hidden не сработает для ячеек таблицы в любых браузерах. (Если вы используете table-layout: auto, в любых браузерах переполнения не будет.)

table-layout: auto

Камень 2: Ячейки таблицы не уважают относительное позиционирование (Firefox)

Ага. Вы правильно прочитали. Вы пытаетесь применить position: relative к ячейке таблицы, position: absolute к элементам внутри нее и в Firefox абсолютно спозиционированный элемент будет высчитывать свое положение относительно элемента-родителя таблицы с position: relative. Облом.

Баг был обнаружен в 2000.

Прим. переводчика: Есть более свежая информация на этот счет.

Многабукав про камни

Если вы оценили все варианты и считаете, что правильно будет использовать элементы таблицы, то убедитесь, что вы заключаете содержимое каждой ячейки в div. Таким образом у вас появится необходимый контроль над каждой клеткой и при этом останутся все чрезвычайно мощные — что не может не смущать — инструменты табличной раскладки.

Внеклассное чтение

  • w3: CSS2 Tables specification
  • Drewish: Vertical rhythm tool

Цитирование

  1. Can I use: flex
  2. Solved by Flexbox: Vertical Centering
  3. Seybold Seminars: Why tables for layout is stupid
  4. Smashing Magazine: Table Layouts vs. Div Layouts: From Hell to… Hell?
  5. Vaneso Design: Are CSS Tables Better Than HTML Tables?
  6. Mozilla Bugzilla: relative positioning of table cells doesn’t work

P.S. Если вам понравилась эта статья — нажмите зеленое сердечко. Это много значит для меня. Спасибо!

Нашли ошибку? Воспользуйтесь функцией Private notes: выделяете текст с ошибкой, нажимаете на символ замка в появившемся дудле и оставляете свой комментарий. Спасибо!

Перевод главы из сборника The magic of CSS by Adam Schwartz
Настоятельно советую обратится к первоисточнику. Он прекрасен!

table-layout ⚡️ HTML и CSS с примерами кода

Свойство table-layout определяет, как браузер должен вычислять ширину ячеек таблицы, основываясь на её содержимом.

Колонки и таблицы
  • column-count
  • column-fill
  • column-gap
  • column-rule
  • column-rule-color
  • column-rule-style
  • column-rule-width
  • column-span
  • column-width
  • columns
  • border-collapse
  • border-spacing
  • caption-side
  • empty-cells
  • table-layout
  • vertical-align

Синтаксис

/* Keyword values */
table-layout: auto;
table-layout: fixed;
/* Global values */
table-layout: inherit;
table-layout: initial;
table-layout: unset;

Значения

auto
Браузер загружает всю таблицу, анализирует её для определения размеров ячеек и только после этого отображает.
fixed
Ширина колонок в этом случае определяется либо с помощью тега <col>, либо вычисляется на основе первой строки. Если данные о форматировании первой строки таблицы по каким-либо причинам получить невозможно, в этом случае таблица делится на колонки равной ширины. При использовании этого значения, содержимое, которое не помещается в ячейку указанной ширины, будет «обрезано» либо наложено поверх ячейки. Это зависит от используемого браузера, но в любом случае ширина ячейки меняться не будет. Для корректной работы этого значения обязательно должна быть задана ширина таблицы.

Значение по-умолчанию: auto

Применяется к тегу <table> или к элементу, у которого значение display установлено как table или inline-table.

Спецификации

  • CSS Level 2 (Revision 1)

Описание и примеры

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>table-layout</title>
    <style>
      table {
        table-layout: fixed; /* Фиксированная ширина ячеек */
        width: 100%; /* Ширина таблицы */
      }
      .col1 {
        width: 160px;
      }
      .coln {
        width: 60px;
      }
    </style>
  </head>
  <body>
    <table border="1">
      <col />
      <col span="9" />
      <tr>
        <td></td>
        <td>2012</td>
        <td>2013</td>
        <td>2014</td>
        <td>2015</td>
        <td>2016</td>
        <td>2017</td>
        <td>2018</td>
        <td>2019</td>
        <td>2020</td>
      </tr>
      <tr>
        <td>Нефть</td>
        <td>5</td>
        <td>7</td>
        <td>2</td>
        <td>8</td>
        <td>3</td>
        <td>34</td>
        <td>62</td>
        <td>74</td>
        <td>57</td>
      </tr>
      <tr>
        <td>Золото</td>
        <td>3</td>
        <td>6</td>
        <td>4</td>
        <td>6</td>
        <td>4</td>
        <td>69</td>
        <td>72</td>
        <td>56</td>
        <td>47</td>
      </tr>
      <tr>
        <td>Дерево</td>
        <td>5</td>
        <td>8</td>
        <td>3</td>
        <td>4</td>
        <td>7</td>
        <td>73</td>
        <td>79</td>
        <td>34</td>
        <td>86</td>
      </tr>
    </table>
  </body>
</html>

Размеры таблиц HTML

❮ Назад Далее ❯

HTML-таблицы могут иметь разные размеры для каждого столбца, строки или весь стол.

Используйте атрибут стиля с атрибутом ширина или высота свойства, чтобы указать размер таблицы, строки или столбца.

Ширина таблицы HTML

Чтобы установить ширину таблицы, добавьте стиль атрибут к элементу

:

Пример

Установить ширину таблицы на 100%:

<таблица>


   
   
   


   
   
   

 
   
   
   
 
Имя Фамилия Возраст
Джилл Смит 50
Ева Джексон 94

Попробуйте сами »

Примечание: Использование процента в качестве единицы измерения ширины означает насколько широким будет этот элемент по сравнению с его родительским элементом, который в данном случае это <тело> элемент.

Ширина столбца таблицы HTML

Чтобы установить размер определенного столбца, добавьте стиль атрибут на или элемент:

Пример

Установите ширину первого столбца на 70%:



   
   
   


   
   
   

 
   
   
   
 
Имя Фамилия Возраст
Джилл Смит 50
Ева Джексон 94

Попробуйте сами »

Высота строки таблицы HTML

Чтобы установить высоту определенной строки, добавьте стиль атрибут элемента строки таблицы:

Пример

Установите высоту второй строки в 200 пикселей:



   
   
   


   
   
   

 
   
   
   
 
Имя Фамилия Возраст
Джилл Смит 50
Ева Джексон 94

Попробуйте сами »

HTML-упражнения

Проверьте себя с помощью упражнений

Упражнение:

Используйте стили CSS, чтобы сделать таблицу шириной 300 пикселей.

<таблица>
  <тр>
    Имя
    Фамилия
    Очки
  
  <тр>
    Джилл

    Смит
    50
  

Начать упражнение


❮ Предыдущий Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery

900 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3. CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery2

| О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

table-layout — CSS: каскадные таблицы стилей

Свойство CSS table-layout задает алгоритм, используемый для размещения

ячеек, строк и столбцов.

 /* Значения ключевых слов */
раскладка таблицы: авто;
макет таблицы: фиксированный;
/* Глобальные значения */
макет таблицы: наследовать;
макет таблицы: начальный;
макет таблицы: вернуться;
макет таблицы: обратный слой;
макет таблицы: не установлен;

Значения

авто

По умолчанию большинство браузеров используют алгоритм автоматической компоновки таблиц. Ширина таблицы и ее ячеек регулируется в соответствии с содержимым.

фиксированный

Ширина таблицы и столбца задается шириной элементов table и col или шириной первой строки ячеек. Ячейки в последующих строках не влияют на ширину столбца.

При "фиксированном" методе компоновки вся таблица может быть отображена после того, как первая строка таблицы будет загружена и проанализирована. Это может ускорить время рендеринга по сравнению с «автоматическим» методом компоновки, но последующее содержимое ячейки может не соответствовать предоставленной ширине столбца. Ячейки используют свойство

overflow , чтобы определить, обрезать ли любое переполняющее содержимое, но только если таблица имеет известную ширину; в противном случае они не будут переполнять ячейки.

Initial value auto
Applies to table and inline-table elements
Inherited no
Computed value as specified
Animation type дискретный
 table-layout = 
 auto | 
 фиксированный

Таблицы фиксированной ширины с переполнением текста

В этом примере используется макет фиксированной таблицы в сочетании с ширина свойство, чтобы ограничить ширину таблицы. Свойство text-overflow используется для применения многоточия к слишком длинным словам. Если бы макет таблицы был auto , таблица увеличилась бы для размещения своего содержимого, несмотря на указанную ширину .

HTML 
 <таблица>
  
    Эд
    Дерево
 

  
  
    Альберт
    Швейцер
  
  
    Джейн
    Фонда
  
  
    Уильям
    Шекспир
CSS 
 таблица {
  макет таблицы: фиксированный;
  ширина: 120 пикселей;
  граница: 1px сплошной красный;
}
тд {
  граница: 1px сплошной синий;
  переполнение: скрыто;
  пробел: nowrap;
  переполнение текста: многоточие;
}
Result
Specification
Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification
# width-layout

BCD tables only load in the browser with JavaScript enabled.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *