Как увеличить размер таблицы в html – Задаём размеры таблицы — Знакомство с таблицами — HTML Academy

Содержание

Как изменить размер таблицы в HTML

Визуальное отображение данного кода в браузере таково:

Вы можете для каждой отдельной ячейки или строки задать два параметра, которые выполняют горизонтальное ( align ) и вертикальное ( valign ) выравнивание текста в таблице HTML.

Параметр align может иметь следующие значения:

Как сделать таблицу по центру в HTML? С помощью упомянутого значения center .

У вебмастеров часто возникает вопрос о том, как вставить картинку в HTML таблицу? Для того чтобы это осуществить, необходимо прописать адрес или имя изображения в соответствующей ячейке после тега

.

Объединение столбцов одной строчки выглядит так:

У HTML таблицы объединение ячеек одного столбца выглядит следующим образом:


Генераторы HTML таблиц

Разумеется, создавать HTML таблицы можно самостоятельно, прописывая вручную все теги HTML. Таблица в данном случае рискует быть составленной некорректно, поскольку человеческий фактор при работе с большими объёмами информации даёт о себе знать.

Уже давно существуют специальные генераторы таблиц HTML, которые призваны сэкономить ваше время. С их помощью вы можете легко создать таблицу с множеством настроек.

Одним из наиболее распространенных генераторов таблиц является русскоязычный сервис http://rusws.ru/genertabtag . В его арсенале имеется множество настроек для построения таблиц: вы можете задать цвет фона, выравнивание, ширину таблицы, толщину рамки и т.д.

Несмотря на то, что сервис http://www.2createawebsite.com/build/table_generator.html является зарубежным, настроек для генерации таблицы здесь меньше, чем в предыдущем примере. Имеются лишь самые необходимые — количество столбцов, строк, ширина, размер, цвет границы.

Это — отличный вариант для генерации простейших таблиц, однако для более серьёзных целей рекомендуем воспользоваться другими сервисами:

Генератор таблиц html также имеет не слишком много настроек, однако цвет для фона и границы таблицы вы можете подобрать из палитры цветов.

Этот же сервис имеет довольно удобный HTML редактор, в котором можно построить, заполнить таблицу, а затем получить её код:

Таким образом, таблица является не только важным статистическим элементом во всех сферах жизни, но и неотъемлемой частью веб-дизайна и вёрстки.

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

Размер ячеек таблицы — как изменить ?

Доброго времени!
Такая проблемка: есть таблица со свойством table-layout: fixed; это свойство делит таблицу на ячейки равной ширины, хотя для каждой ячейки задан размер.
Как поменять размер ячеек.

Добавлено через 9 минут

Размер ячеек таблицы
Хочу увеличить расстояние между 1/2 и 2/3 ячейками. Писал и cellspacing и border radius. Толку 0.

Таблицы. Различный размер ячеек
Всем привет! Прошу помощи. Столкнулся с проблемой, не могу поменять ширину ячейки в таблице.

Выпадающее горизонтальное меню, изменить размер ячеек подменю под текст
Как сделать чтобы ячейки выпадающего меню были другого размера? Скриншот прилагаю:

Почему две совершенно одинаковые таблицы имеют разный размер ячеек?
У меня есть две СОВЕРШЕННО идентичные таблицы по характеристикам (оглавлению), но разные по.

Изменить размер таблицы
Всем привет. Не могу выставить размер двух колонок, указал на скрине, Что бы расстояние между.

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

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

Однако возможности CSS позволяют изменить размер таблицы в HTML, указывая именно те значения ширины и высоты, которые необходимы. Справедливости ради следует отметить, что еще атрибуты таблицы позволяют задавать нужные размеры. Однако, в настоящий момент мы поговорим лишь о CSS.

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

Чтобы указать ширину таблицы необходимо использовать CSS-свойство width , а чтобы задать высоту необходимо применять свойство height .

Как увеличить размер таблицы в html

При верстке с помощью таблиц необходимо знать некоторые особенности, которые присущи таблицам. Это нужно для того, чтобы понимать, как построить макет в том или ином случае, создать эффективный код и не допустить откровенных ляпов в работе. Считается, что табличная верстка проще, чем другими методами, например, с помощью слоев. Однако таблицы тоже таят в себе множество хитростей, которые, так или иначе, влияют на отображение страницы.

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

Ширина таблицы, если она явно не указана, устанавливается браузером автоматически исходя из содержимого ячеек. Когда таблица применяется для создания опорной сетки на странице, такой подход нежелателен, поскольку зависит от переменных данных. Поэтому ширину таблицы указывают всегда — в процентах, если используется «резиновый» макет или в пикселах для макета фиксированной ширины.

Ширина ячеек

Ширина ячеек определяется атрибутом width тега

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

Рассмотрим на примере тот случай, когда размер ячеек нужно указать. Предположим, что нам требуется создать на веб-странице две колонки, одна из них должна иметь размер 200 пикселов, а вторая занимать оставшееся место. Создаем таблицу с двумя ячейками и для левой ячейки задаем параметр w (пример 1). Единицы измерения ставить не нужно, браузер сам понимает, что если задано число, значит, используются пикселы.

Таблицы

Сегодня вы познакомитесь с еще одним очень мощным элементом создания сайтов — HTML-таблицами. А почему мощным? Видите ли, с давних пор и по сегодняшний день, чаще всего таблицы в HTML используются не по их прямому назначению — отображению табличных данных, а для создания глобального каркаса страницы. То есть создается таблица, растягивается во всю ширину страницы, а потом в ее левом столбце делают одно меню, в правом — другое, в среднем располагают основную информацию и так далее.

Кстати, если не знали, то создание сайтов, а вернее HTML-кода, называется версткой, и вы сейчас учитесь именно ей. Вообще существует три вида верстки: табличная, о которой я вам рассказал выше; слоями (блочная), требующая среднего уровня знания стилей (CSS) и комбинированная. До сих пор в интернете идут ожесточенные споры о том, какая же из них лучше, но поверьте, спорят там в основном любители споров или новички, так как любой профессионал вам скажет — лучшая верстка та, которая больше подходит в конкретном случае, вот и все! А спорить о том, что лучше — танк или самолет — пустая трата времени. Но справедливости ради скажу, что по многим параметрам блочная верстка все же предпочтительней, поэтому, если верстальщик может сделать задание, как с помощью таблиц, так и с помощью блоков, то обычно выбирается последнее. И это правильно. Но вам об этом задумываться рано, ведь, как я уже сказал, с помощью одного языка HTML можно верстать только таблицами.

Создание таблиц в HTML

Для создания простой HTML-таблицы надо использовать три типа тегов, это

, и
, а остальные крайне редко. Не забыли еще, что значит «содержать»? Это значит, что в
. Поэтому давайте сделаем так: посмотрите на пример указанный ниже и попробуйте самостоятельно догадаться, какие теги и для чего нужны.

Пример создания таблиц в HTML

Результат в браузере

Ячейка 1.1 Ячейка 1.2 Ячейка 1.3
Ячейка 2.1 Ячейка 2.2 Ячейка 2.3
Ячейка 3.1 Ячейка 3.2 Ячейка 3.3

Теперь проверим ваши догадки. И опять вам говорю — не старайтесь все запоминать, не надо, главное — понять. Итак:

Тег

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

Тег

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

Тег

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

Тег

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

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

HTML-таблицы по центру, слева, справа

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

В прошлом у тега

имелся атрибут align , с его помощью и можно было изменять положение таблицы. Но он стал устаревшим, и сколько еще времени его будут поддерживать браузеры — неизвестно, так как на смену пришли стили (CSS). И чтобы показать вам правильный метод, я использую атрибут style .

— Таблица располагается слева. Это значение по умолчанию.

— Расположение таблицы справа.

— HTML-таблица по центру.


Теперь поясню. Используя эти значения, мы изменяем размер внешних полей (отступов) таблицы. Так как таблица является блочным HTML-элементом, а у блоков четыре стороны, то и параметры указываются для четырех сторон по часовой стрелке: style= «margin:сверху справа снизу слева» . Ну, что такое ноль, я думаю, вы понимаете, а вот «auto» говорит браузеру, чтобы он сам высчитывал с данной стороны размер пустого пространства, исходя из значений других сторон. Вот и получается, что если с трех сторон ноль, то с четвертой — все остальное пространство, а если с двух сторон «auto», то значит делим внешние поля пополам.

И самое главное — не бойтесь использовать CSS вместо чистого и, во многих ситуациях, «деревянного» и устаревшего HTML. Так как этим вы вкладываете в свое развитие, а не возвращаетесь к каменным топорам! Тем более я вам все преподношу «на блюдечке». 🙂

Пример расположения таблицы по центру

Результат в браузере

Ячейка 1.1 Ячейка 1.2 Ячейка 1.3
Ячейка 2.1 Ячейка 2.2 Ячейка 2.3
Ячейка 3.1 Ячейка 3.2 Ячейка 3.3

Изменение ширины HTML-таблиц и ячеек

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

— любое неотрицательное число указывающее ширину в пикселях.

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

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

А вот атрибута width для изменения ширины ячеек нет, вернее он был, но устарел, поэтому снова применим стили (CSS).

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

И тоже, если вы укажете ширину ячейки, а содержимое в нее не уместится — браузер проигнорирует вашу ширину и установит свою.

В HTML-таблицах ширина столбца всегда равна его самой широкой ячейке, что, впрочем, вполне естественно вообще для любых таблиц. Поэтому, меняя ширину одной (любой) ячейки — вы меняете ширину всего столбца.

Пример изменения ширины HTML-таблиц и ячеек

Результат в браузере

Ячейка 1.1 Ячейка 1.2
Ячейка 2.1 Ячейка 2.2

Как вы уже знаете, по умолчанию браузеры не отрисовывают рамки у таблиц, поэтому, чтобы вы четко увидели картину изменения ширины, я установил атрибут border , о котором мы поговорим чуть позже.

Изменение высоты HTML-таблиц и ячеек

В стандартном HTML у тега

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

— указывайте высоту таблицы только в пикселях (px), так как процентную запись браузеры игнорируют.

А вот для изменения высоты ячеек в HTML у тегов

для рядов (строк) или
и все-таки был атрибут height (вот и пойми этих разработчиков), но он устарел, поэтому снова стили.

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

не указана — браузеры проигнорируют значения для ячеек.

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

В HTML-таблицах высота строки (как и ширина столбца) всегда равна высоте ее самой высокой ячейки. Поэтому, меняя высоту одной (любой) ячейки — вы меняете высоту всей строки.

Пример изменения высоты HTML-таблиц и ячеек

Результат в браузере

Ячейка 1.1 Ячейка 1.2
Ячейка 2.1 Ячейка 2.2

Выравнивание в HTML-таблицах

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

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

Для изменения выравнивания содержимого HTML-таблиц имеются атрибуты align и valign , которые указываются в тегах

и для отдельных ячеек:

Пример выравнивания в HTML-таблицах

Результат в браузере

Ячейка 1.1 Ячейка 1.2
Ячейка 2.1 Ячейка 2.2

Фон HTML-таблиц

В старых версиях HTML у тегов таблиц был специальный атрибут bgcolor , который изменял цвет фона всей таблицы или ее части. Но в уроке Меняем цвет текста и фона мы с вами изучили универсальный способ изменения фона абсолютно любых HTML-элементов, поэтому им и пользуйтесь.

А вот фонового изображения у таблиц язык HTML вообще не предусматривал, поэтому в свое время производители браузеров ввели для этого атрибут — background . Браузеры и до сих пор его понимают, но опять же, в уроке Изображения для фонов вы уже научились правильно устанавливать изображения-фоны для любых элементов.

Все задание я вам расписывать не буду, обрисую только некоторые моменты, просто сделайте так, как показано в результате примера. Если вы в свое время не скачали картинки для обучения, то можете скачать сейчас.

  1. Измените фон страницы и размер шрифта.
  2. В начале страницы создайте четыре ссылки-изображения.
  3. Ниже сделайте таблицу из одного ряда и двух столбцов. Растяните ее ширину на всю страницу, сделайте выравнивание по верхней стороне ряда и измените фон каждой ячейки.
  4. Сделайте ширину левой колонки 150px и поместите в нее ссылки-изображения.
  5. Под таблицей создайте текстовые ссылки.
  6. Сделайте так, чтобы при наведении курсора мыши на любую ссылку появлялась «всплывающая» подсказка.
  7. Не забывайте про Комментарии в HTML, они серьезно помогают при работе.

Создание собственного сайта

Таблицы в HTML. Управление размерами.

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

Теперь поговорим о том, как задать вполне конкретные числовые размеры ячейки. Для этого есть два свойства — ширина и высота; и два соответствующих этим свойствам параметра — width и height.

Тут я сразу оговорюсь, что советую применять эти параметры только к тегам

и . Что касается тега , то нет необходимости регулировать его параметры напрямую, так как то же самое можно сделать косвенно — через теги
и . Например, если вам нужно задать высоту строки таблицы, просто задайте высоту одной из ячеек, входящих в эту строку. Если же вам нужно установить значение ширины строки, то нужно задать ширину каждой из ячеек, которые входят в эту строку. А есть способ еще проще: задайте ширину таблицы — и получите ширину строки. Вобщем, используйте параметры width и height только для ячеек и самих таблиц. Это поможет вам писать более простой код и избегать запутанных ситуаций. И еще один совет — прежде чем создавать таблицы на html-странице, рисуйте их от руки, на бумажных листах, желательно с будущими размерами.

Параметры width и height имеют числовое значение. Как правило — это пикселы или проценты. В первом случае размеры становятся абсолютными, а во втором — относительными.

Абсолютные размеры таблиц

Сначала поговорим об абсолютных размерах. Наиболее распространенная единица измерения абсолютных размеров в HTML — пикселы. Один пиксел равен по размерам светящейся точке вашего монитора, из которых состоит весь дисплей. В HTML для пикселов применяется сокращение — px. Например, запись 100px в html-коде, переводится на русский как 100 пикселов. А теперь небольшой вопрос: 100 пикселов — это много или мало? Для ответа на такие вопросы я советую скачать электронную линейку , которая позволит измерить любой объект на экране, а также визуально оценить величину любого размера. Она очень проста в использовании, так что вы без труда с ней разберетесь. Теперь я приведу пример задания ячейки с абсолютными размерами. Предположим у вас есть ячейка и вы хотите, чтобы ее размеры составляли ни много ни мало, а 300х100 (в таких записях сначала пишется ширина, а затем высота). Чтобы осуществить задуманное, нужно написать такой код:

Здесь, как и во всем языке HTML, не имеет значения порядок появления параметров тега, поэтому возможны оба варианта записи. Теперь создадим таблицу шириной в 360 пикселов и высотой в 80 пикселов. Таблица будет состоять из двух строк и двух столбцов (т.е. будет включать в себя 4 ячейки). Строки будут иметь равную высоту, а ячейки — равную ширину. Посчитайте самостоятельно размеры отдельно взятой ячейки, а затем нарисуйте и образмерьте будущую таблицу. Пишем код, пока не задавая конкретных размеров:


Первая ячейка Вторая ячейка
Третья ячейка Четвертая ячейка

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

Первая ячейка Вторая ячейка
Третья ячейка Четвертая ячейка

В результате помещения этого кода в браузер, вы увидите подобную картинку.

Вторая ячейка
Четвертая ячейка

Относительные размеры таблиц

Теперь перейдем к относительной единице измерения — процентам. Система относительных размеров является более гибкой. Потому что в этом случае размеры ячейки, или таблицы подстраиваются под размеры того элемента, в котором эта ячейка или таблица находится. Такой внешний элемент, содержащий в себе рассматриваемую ячейку или таблицу, называют еще родительским элементом. Для ячейки родительским элементом всегда является таблица, включающая в себя эту ячейку. Для таблицы, расположенной в ячейке «cell» другой таблицы, родительским элементом будет ячейка «cell». Для таблицы, находящейся непосредственно в контейнере тега родительским элементом будет тело страницы. Итак, если для ячейки/таблицы задан размер в процентах, браузер посчитает эти проценты от размера родительского элемента. Если вы пока не поняли, о чем идет речь — не страшно: примеры помогут уловить суть.

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

Пример второй. Допустим задана таблица в 500 пикселов шириной. А ширина какой либо ячейки задана так: w . В этом случае ширина ячейки составит 10% от ширины таблицы, т.е. ширина ячейки будет равна 50 пикселам. Но вот вы решили изменить ширину таблицы на 700 пикселов. Как только вы это сделаете, ширина ячейки автоматически изменится на 70 пикселов.

Пример третий. Ширина таблицы составляет 70% от ширины страницы. А размер ячейки w . В этом случае ширина таблицы подстроится под ширину окна браузера, как в первом примере. А ширина ячейки подстроится под ширину таблицы. Т.е. при растяжении/сжатии окна браузера по ширине, автоматически меняется не только ширина таблицы, но и ширина ячейки.

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

Изменить размер таблицы html.

Атрибут width HTML используется для установки ширины ячейки таблицы, которое переопределяет значение по умолчанию. Он устарел. Используйте CSS для управления разметкой ячеек в HTML таблицах .

Настройка ширины столбца таблицы

Атрибут width , в настоящее время устаревший, когда-то являлся стандартным методом регулирования ширины столбцов таблицы. По умолчанию, браузер будет настраивать столбцы таблицы так, чтобы соответствовать ее содержимому. Но если нужно контролировать ширину каждого столбца, вы можете это сделать, настроив ширину для каждого элемента

или отдельной строки. Посмотрим, как это делали раньше с помощью атрибута width , а затем как то же самое можно сделать с помощью CSS . Но вначале нам нужен эталон для сравнения:
Thin Really Really Really Wide
Little

Как видите, в первом случае мы не применили CSS или HTML td width . Что браузер сделает с такой таблицей?

Thin Really Really Really Wide
Little

Браузер выделил для второго столбца намного больше места, чем для первого. Теперь сделаем то же самое, но воспользуемся атрибутом width , чтобы принудительно задать столбцам одинаковый размер:

Thin Really Really Really Wide
Little Lots and lots and lots and lots of content, so much that we might even need a line break.

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

Thin Really Really Really Wide
Little Lots and lots and lots and lots of content, so much that we might even need a line break.

Довольно неплохо. К сожалению, это некорректный HTML- код , поскольку HTML table width был признан устаревшим. Но можно сделать то же самое с помощью простого кода CSS :

Thin Really Really Really Wide
Little

Давайте посмотрим, как браузер выведет таблицу, использующую CSS вместо атрибута width :

Thin Really Really Really Wide
Little Lots and lots and lots and lots of content, so much that it will require a line break.

Регулируемая высота строки таблицы

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

Thin Really Really Really Wide
Little Lots and lots and lots and lots of content, so much that it will require a line break.

Как браузер выводит этот пример:

Если честно, я не могу представить, зачем нужно контролировать высоту строки с помощью HTML td width . Гораздо больше смысла в том, чтобы настроить внешний и внутренний отступ для контента элемента

и позволить браузеру автоматически устанавливать высоту строки, основываясь на этой информации. Вот как можно применить эту стратегию.

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

Теги, используемые для построения таблицы в html

table — обязательный тег, открывающий и закрывающий таблицу
caption — необязательный тег, обозначающий заголовок таблицы
th — необязательный тег, в открывающий и закрывающий теги которого вписывается название столбца. Как правило, выделяется жирным
tr — обязательный тег, с которого открывается и закрывается строка
td — обязательный тег, обозначающий открытие и закрытие ячейки в строке

Пример кода простой таблицы

Если ширина элемента table (width) таблицы в html не уменьшается.

Довольно часто при работе с таблицами HTML приходиться сталкиваться с проблемой, ширина таблицы не хочет уменьшаться даже тогда, когда элементу

уже явно задана конкретная ширина с помощью стилей CSS.

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

На самом деле, причина в том, что таблица не может иметь ширину меньшую для того, чтобы вместить все свое содержимое.

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

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

Таблица у меня формируется циклом PHP из базы данных и я использовал следующий код:

Т.е. я определяю, если ширина текстового содержимого больше 7 символов, то я урезаю это слово и вместо недостающих символов ставлю знак «…».

После этого ширина таблицы автоматически пересчиталась и прекрасно уместилась так, как мне это было нужно.

Как увеличить размер таблицы в html

При верстке с помощью таблиц необходимо знать некоторые особенности, которые присущи таблицам. Это нужно для того, чтобы понимать, как построить макет в том или ином случае, создать эффективный код и не допустить откровенных ляпов в работе. Считается, что табличная верстка проще, чем другими методами, например, с помощью слоев. Однако таблицы тоже таят в себе множество хитростей, которые, так или иначе, влияют на отображение страницы.

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

Ширина таблицы, если она явно не указана, устанавливается браузером автоматически исходя из содержимого ячеек. Когда таблица применяется для создания опорной сетки на странице, такой подход нежелателен, поскольку зависит от переменных данных. Поэтому ширину таблицы указывают всегда — в процентах, если используется «резиновый» макет или в пикселах для макета фиксированной ширины.

Ширина ячеек

Ширина ячеек определяется атрибутом width тега

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

Рассмотрим на примере тот случай, когда размер ячеек нужно указать. Предположим, что нам требуется создать на веб-странице две колонки, одна из них должна иметь размер 200 пикселов, а вторая занимать оставшееся место. Создаем таблицу с двумя ячейками и для левой ячейки задаем параметр w (пример 1). Единицы измерения ставить не нужно, браузер сам понимает, что если задано число, значит, используются пикселы.

webstudio-uwk.ru

Особенности таблиц | htmlbook.ru

Чтобы понимать, что можно ожидать от таблиц при вёрстке, следует знать их явные и неявные особенности, которые перечислены далее.

Вложенные таблицы

Одну таблицу допускается помещать внутрь ячейки другой таблицы. Это требуется для представления сложных данных или в том случае, когда одна таблица выступает в роли модульной сетки, а вторая, внутри нее, в роли обычной таблицы.

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

Размеры таблицы изначально не устанавливаются и вычисляются на основе содержимого ячеек. В итоге суммарная ширина таблицы складывается из следующих параметров:

  • ширина содержимого ячеек;
  • толщина всех границ между ячеек;
  • поля вокруг содержимого, устанавливаемые через атрибут cellpadding;
  • расстояние между ячейками, которое определяется значением cellspacing.

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

  • Не добавляют в ячейку фиксированной ширины те изображения, размер которых превышает ширину ячейки. Способ, конечно, звучит банально, тем не менее, зная особенности ячеек, можно избежать неприятностей с их отображением.
  • Для тега <table> используют стилевое свойство table-layout со значением fixed. Применение этого свойства позволяет обрезать рисунок, если он не помещается целиком в ячейку (пример 2.1).

Пример 2.1. Использование table-layout

XHTML 1.0CSS 2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Таблица</title>
  <style type="text/css">
   TABLE {
    table-layout: fixed; /* Ячейки фиксированной ширины */
   }
   TD.dino { width: 200px; }
  </style>
 </head>
 <body>
  <table cellspacing="0" cellpadding="4" border="1">
   <tr>
    <td><img src="images/dino.gif" 
      alt="Динозаврик" /></td>
    <td>...</td>
   </tr>
  </table>
 </body>
</html>

Результат данного примера зависит от браузера. В старых браузерах рисунок за пределами ячейки обрезается (рис. 2.1а), в современных браузерах рисунок выводится поверх второй ячейки (рис. 2.1б).

а. Вид таблицы в IE6, IE7, Firefox 2

б. Вид таблицы в IE8, IE9, Firefox 3, Firefox 4, Safari и Chrome

Рис. 2.1. Использование table-layout

Сделать единообразный вид таблицы во всех браузерах легко, для этого к ячейке с рисунком следует добавить свойство overflow со значением hidden. При этом всё, что не помещается в ячейку, будет «обрезано», как продемонстрировано на рис. 2.1а. Стиль в этом случае изменится незначительно.

TABLE {
  table-layout: fixed; /* Ячейки фиксированной ширины */
}
TD.dino {
  width: 200px;
  overflow: hidden;
}

Высота ячеек

Ячейки в одной строке взаимосвязаны и их высота одинакова. Это позволяет делать макеты с колонками одной высоты. В примере 2.2 приведён такой макет, в котором, несмотря на разную высоту контента, колонки равны по высоте.

Пример 2.2. Колонки одной высоты

XHTML 1.0CSS 2.1IE 9CrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Высота ячеек</title>
  <style type="text/css">
   TABLE {
    width: 100%; /* Ширина таблицы */
   }
   TD { 
    padding: 10px; /* Поля в ячейках */ 
   }
   TD.content {
    background: #f0f0f0; /* Цвет фона левой колонки */
   }
   TD.menu {
    width: 120px; /* Ширина правой колонки*/
    background: #9c3022; /* Цвет фона правой колонки */
    color: #fff; /* Цвет текста */
    vertical-align: top;
   }
  </style>
 </head>
 <body>
  <table>
   <tr>
    <td>
     <p>Мясо отварить до готовности. Промыть свеклу, очистить, 
     нарезать соломкой и тушить с помидорами до полуготовности.</p>
     <p>Бульон процедить, мясо нарезать кусочками. В бульон добавить 
     нарезанный дольками картофель, довести до кипения, опустить нарезанную 
     соломкой свежую капусту и варить 10-15 минут, добавить пассерованные 
     овощи, болгарский перец, нашинкованный тонкой соломкой, 
     специи и довести до готовности.</p>
     <p>Готовому борщу дать настояться в течение 20-25 минут. 
     При подаче к столу добавить сметану, мясо, зелень.</p>
    </td>
    <td>Борщ</td>
   </tr>
  </table>
 </body>
</html>

Результат примера показан на рис. 2.2.

Рис. 2.2. Макет, созданный с использованием таблицы

В данном примере в ячейках разное содержание, но высота ячеек одинакова.

Порядок ячеек

Основой таблицы выступает строка и ячейка, формирование таблицы происходит слева направо и сверху вниз (рис. 2.3).

Рис. 2.3. Порядок создания ячеек

Неудобства этой схемы проявляются при активном использовании колонок и большом числе ячеек. Конечно, есть теги <col> и <colgroup>, но их возможности ограничены. Вставка новых ячеек или редактирование существующих может привести к ошибкам отображения таблицы.

Загрузка таблицы

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

Исходя из этого факта, таблицы не используют для хранения большой информации (от 100 Кб). А чтобы ускорить загрузку табличного макета, его разбивают на отдельные таблицы или используют свойство table-layout, применение которого позволяет несколько повысить скорость отображения содержимого таблицы. В обычной таблице браузер анализирует все ячейки и затем уже изменяет ширину колонок на основе этой информации. Включение table-layout со значением fixed меняет алгоритм расчета — браузер анализирует только первую строку и ширину колонок строит согласно ей. За счёт уменьшения числа вычислений и происходит выигрыш скорости отображения таблицы в целом.

htmlbook.ru

Как увеличить ширину столбца в таблице HTML? — html

Как увеличить ширину столбца в таблице HTML?

Ниже мой код. Я пытаюсь получить второй тег <td> в каждой строке для расширения, чтобы было больше места между текстовым полем ввода (1-й тег <td>) и именем файла cookie и его ценой (тэг <td>), Есть идеи?

<!--Order Info. table -nested table 2 -->
<!--This is the first nested table within the main table -->
        <table border="0" cellpadding="2">
        <!--Row 1 -->
                <tr>
                    <th colspan="3" align="left">Order Information</th>
                </tr>
        <!--Row 2 -->   
                <tr>
                    <td>QTY</td>
                    <td colspan="15"></td>
                    <td>Subtotal</td>
                    <td colspan="90"><input name="Gift Wrapping" type="checkbox" /> Gift wrapping? (Additional charge of 1.95 per box)</td>
                </tr>
        <!-- Row 3 -->  
                <tr>
                    <td><input name="quantitya" size="3" type="textbox" value="0"/></td>
                    <td colspan="4"></td>
                    <td colspan="11" align="left">Chocolate Nut - $10.99</td>
                    <td><input name="subtotala" size="10" type="textbox" value="0"/></td>
                    <td colspan="40">If yes, note the text for the gift card:</td>
                </tr>
        <!-- Row 4 -->  
                <tr>
                    <td><input name="quantityb" size="3" type="textbox" value="0"/></td>
                    <td colspan="4"></td>
                    <td colspan="11" align="left">Chocolate Chip - $9.99</td>
                    <td><input name="subtotalb" size="10" type="textbox" value="0"/></td>
                    <td colspan="5"><textarea wrap="soft" name="giftcardtext" rows="3" cols="20" ></textarea></td> 
                </tr>
        <!--Row 5 -->
                <tr>
                    <td><input name="quantityc" size="3" type="textbox" value="0"/></td>
                    <td colspan="4"></td>
                    <td colspan="11" align="left">Macadamia Nut - $12.99</td>
                    <td><input name="subtotalc" size="10" type="textbox" value="0"/></td> 
                </tr>
        <!--Row 6 -->
                <tr>
                    <td><input name="quantityd" size="3" type="textbox" value="0"/></td>
                    <td colspan="4"></td>
                    <td colspan="11" align="left">Oatmeal Raisin - $10.99</td>
                    <td><input name="subtotald" size="10" type="textbox" value="0"/></td> 
                </tr>
        <!--Row 7 -->
                <tr>
                    <td><input name="quantitye" size="3" type="textbox" value="0"/></td>
                    <td colspan="4"></td>
                    <td colspan="11" align="left">Chocolate Dessert - $10.99</td>
                    <td><input name="subtotale" size="10" type="textbox" value="0"/></td></td>
                    <td>Shipping:</td>
                    <td colspan="30"></td>
                    <td colspan="150">$5.95 for 1-5 boxes, $10.95 for five or more boxes</td>
                </tr>
        <!--Row 8 -->
                <tr>
                    <td><input name="quantityf" size="3" type="textbox" value="0"/></td>
                    <td colspan="4"></td>
                    <td colspan="11" align="left">Butter - $7.99</td>
                    <td><input name="subtotalf" size="10" type="textbox" value="0"/></td></td>
                    <td>Total:</td>
                    <td colspan="30"></td>
                    <td colspan="1"><input name="totala" size="3" type="textbox" value="0.00" /></td>
                </tr>
        <!--Row 9 -->
                <tr>
                    <td colspan="0"></td>
                    <td colspan="4"></td>
                    <td colspan="11" align="left">Subtotal</td>
                    <td><input name="subtotalg" size="10" type="textbox" value="0" /></td></td>
                </tr>
        </table>

qaru.site

как изменить ширину столбца таблицы в HTML? — html

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

Я хочу изменить те столбцы, где я добавляю ширину: 400 пикселей; Я знаю, что эксперт css может мне помочь в этом. Помогите help.i очень мало знаний в css.

.namex {
        overflow: scroll;
    }
<div>
    <table>
        <tr>
            <th>
                Full Name
            </th>
            <th>
                First Name
            </th>
            <th>
                Last Name
            </th>
            <th>
                Profile Pic
            </th>
            <th>
                Currently Assigned Courses
            </th>
            <th>
                Currently Assigned Batches
            </th>
            <th>
                Company Name
            </th>
            <th>
                City
            </th>
            <th>
                Phone Number
            </th>
            <th>
                Email Address
            </th>
            <th>
                Zip Code
            </th>
            <th>
                User Nationality
            </th>
            <th>
                Gender
            </th>
            <th>
                Religion
            </th>
            <th>
                Blood Group
            </th>
            <th>
                Date Of Birth
            </th>
            <th>
                User Activation Date
            </th>
            <th>
                User Current Status
            </th>
            <th></th>
        </tr>

            <tr>
                <td>
                    md.amjad hossain
                </td>
                <td>
                    md.amjad
                </td>
                <td>
                    hossain
                </td>
                <td>
                    <img src="/Content/img/tsms/default/owner.jpg" />
                </td>
                <td>
                    <select onchange="alert(this.value)">
                                <option value="CCNA Security">CCNA Security</option>
                                <option value="Oracle Database 12c">Oracle Database 12c</option>

                    </select>
                </td>
                <td>
                    <select onchange="alert(this.value)">
                                <option value="CCNA Security-1">CCNA Security-1</option>
                                <option value="Oracle Database 12c-1">Oracle Database 12c-1</option>

                    </select>
                </td>
                <td>
                    aiub
                </td>
                <td>
                    dhaka
                </td>
                <td>
                    1830954149
                </td>
                <td>
                    <a href="mailto:[email protected]">[email protected]</a>
                </td>
                <td>
                    1362
                </td>
                <td>
                    bangladeshi
                </td>
                <td>
                    male
                </td>
                <td>
                    islam
                </td>
                <td>
                    o+
                </td>
                <td>
                    2/25/1995
                </td>
                <td>
                    5/8/2017
                </td>
                <td>
                    Active
                </td>
                <td>
                    <a href="/Students/Edit/2">Edit</a> |
                    <a href="/Students/Details/2">Details</a> |
                    <a href="/Students/Delete/2">Delete</a>
                </td>
            </tr>
    </table>
</div>

in my case its look like ---

[![Pic of my table][1]][1]
  [1]: /img/6a57d098b3023212ffe94696d4cc7bbe.png

look 
 
        <th>
            Currently Assigned Courses
        </th>
        <th>
            Currently Assigned Batches
        </th>

is not working after applying width.its still look like 0px.
thats my problem.

смотреть

        <th>
            Currently Assigned Courses
        </th>
        <th>
            Currently Assigned Batches
        </th>

не работает после применения width.its по-прежнему выглядят как 0px. это моя проблема.

qaru.site

Таблица html

Таблица html ,теги таблицы, столбцы таблицы, строки таблицы – это сегодня будем разбирать!

И конечно же будет множество примеров таблиц тех или иных видов и разновидностей…

Теги таблицы html

Начнем с тегов таблицы — таблица в html обознается двойным тегом «table»

<table></table>

Но если вы так поставите таблицу, то особого смысла в ней не будет и чем собственно применение такого тега отличается от тега абзаца…

Как обозначаются строки в таблице html

Строка в таблице обозначается двойным тегом «tr»

<tr></tr>

И вспомнил, что ведь есть еще внутри двойной тег «tbody» — который я позабыл, как уже вставлял в таблицу, но он существует и его нужно использовать по правилам, но если вы , как я забудете его использовать, то браузер допишет этот тег самостоятельно…

<tbody></tbody>

В каждой строке

Ну что — вот так она должна выглядеть таблица по всем правилам…

<table> 

    <tbody>

        <tr><td>Строка 1 </td></tr>

        <tr><td>Строка 2 </td></tr>

        <tr><td>Строка 3 </td></tr>    

    </tbody> 

</table>

И мы сможем уже посмотреть на эту таблицу:

Строка 1
Строка 2
Строка 3

И ваше изумление — я вижу на вашем лице — потому, что ничем от обыкновенного текста это не отличается, но если мы сделаем видными её бордюры, то вид изменится сильно!

Либо создаем css файл и добаляем выделенный код без первой и последней строки, либо добавляем весь код на странице до тега

table td {

    border: 1px solid black; 

Строка 1
Строка 2
Строка 3

Теперь добавим еще одни столбец, надо в теге tr — продублировать теги td:

 

    <tbody>

        <tr>

            <td>Строка 1 — первого столбца</td>

            <td>Строка 1 — второго столбца</td>

        </tr>

        <tr>

            <td>Строка 2 </td>

            <td>Строка 2 </td>

        </tr>

        <tr>

            <td>Строка 3 </td>

            <td>Строка 3 </td>

        </tr>    

    </tbody> 

Вот в итоге у нас получилась таблица, с двумя столбцами и тремя строками…:

Строка 1 — первого столбцаСтрока 1 — второго столбца
Строка 2 Строка 2
Строка 3 Строка 3

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

Ширина может задаваться несколькими способами…

1. Внутри тега table прописываем ширину:  
Строка 1 +
Строка 2
Строка 3
2. На самой странице до тега

table td {

    border: 1px solid black; 

    width: 400px;

3. В файле css без первой и последней строки предыдущего выделенного кода.

Ширина таблицы html в процентах

Ширина таблицы может задаваться не только в пикселях, можно задать в процентах — и у вас получится резиновая таблица(т.е. в зависимости изменения ширины страницы таблица будет иметь процентную ширину от того блока, куда помещена таблица…)

Для примера давайте возьмем 70%

table td {

    border: 1px solid black; 

    width: 70%;

Строка 1 +
Строка 2
Строка 3

Или пример с двумя столбцами — вся ширина таблицы — возьмем 100%, а столбцы разделим на 70% + 30% — если вы помещаете в таблицу, то будет вид такой…

 

    <tr>

        <td>Строка 1  — первого столбца +  width=»70%»</td>

        <td>Строка 1 — второго столбца +</td>

    </tr> 

    <tr>

        <td>Строка 2 </td>

        <td>Строка 2 </td>

    </tr> 

    <tr>

        <td>Строка 3 </td>

        <td>Строка 3 </td>

    </tr>

Результат:

Строка 1 — первого столбца + Строка 1 — второго столбца +
Строка 2 Строка 2
Строка 3 Строка 3

Обратите внимание на поведение строки, которая не вместилась, она увеличила высоту строки таблицы.

Если вы собираетесь использовать только файл css, либо стили на странице, то в стилях достаточно прописать и присвоить каждому td свой класс и свою ширину…

table{

    border: 1px solid black; 

    width: 100%;

table td.first{

    width: 70%;

table td.second{

    width: 70%;

Код:

    <tr>

        <td class=first «>Строка 1 — первого столбца +  стиль=»70%»</td>

        <td class=second»>Строка 1 — второго столбца + стиль=»30%»</td>

    </tr> 

Результат будет аналогичный предыдущему способу…

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

Кроме высоты — можно задать высоту строки таблицы…

 

    <tr>

        <td>Строка 1  — первого столбца +  width=»70%»</td>

        <td>Строка 1 — второго столбца +</td>

    </tr> 

    <tr>

    <td >Строка 2 +</td>

    <td>Строка 2 </td></tr> 

    <tr>

        <td >Строка 3 + </td>

        <td>Строка 3 </td>

    </tr>

Результат:

Строка 1 — первого столбца + Строка 1 — второго столбца +
Строка 2 + Строка 2
Строка 3 + Строка 3
Не забудь ! Теги:
таблица htmlячейки таблицы htmlкак сделать таблицу в htmlтеги html таблицаhtml код таблицыстрока таблицы htmlтекст в таблице htmlтаблица html cssтаблицы html примерысоздание таблицы в htmlширина таблицы htmlhtml страница таблицатаблица по центру htmlhtml столбцы таблицыкак вставить таблицу в htmlкак создать таблицу в htmlтаблица в блокноте html

dwweb.ru

Фиксируем размер ячеек HTML таблицы с помощью CSS3

CMS
  • Recluse
  • 5 045
  • 0
  • 80,00%
  • 5

Фиксированный размер ячеек через CSS

Если в процессе создания таблицы, вам необходимо зафиксировать размер ячеек в определенном размере, то с помощью третьей версии CSS это достаточно легко сделать. В интернете довольно часто предлагают методы с использованием colspan, или указанием размера ячейки прямо в её теге (пример: <td>). С помощью CSS все это можно сделать гораздо легче.

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

<table>
<tr><td>Kraftwerk</td><td>1969</td><td>Германия</td></tr>
<tr><td>Deutsch Amerikanische Freundschaft</td><td>1978</td><td>Германия</td></tr>
<tr><td>Front 242</td><td>1981</td><td>Бельгия</td></tr>
</table>

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

table {
	table-layout:fixed; width:450px;
}
table td {
	overflow:hidden;
}
table td:nth-of-type(1) {
	width:200px;
}
table td:nth-of-type(2) {
	width:75px;
}
table td:nth-of-type(3) {
	width:175px;
}

Как можно догадаться, table td:nth-of-type(1), table td:nth-of-type(2) и table td:nth-of-type(3) содержат цифры колонок, а параметр width отвечает за их ширину.

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

<table>
<tr><td>Kraftwerk</td><td>1969</td><td>Германия</td></tr>
<tr><td>Deutsch Amerikanische Freundschaft</td><td>1978</td><td>Германия</td></tr>
<tr><td>Front 242</td><td>1981</td><td>Бельгия</td></tr>
</table>

То и CSS код должен быть следующим:

table.music {
	table-layout:fixed; width:450px;
}
table.music td {
	overflow:hidden;
}
table.music td:nth-of-type(1) {
	width:200px;
}
table.music td:nth-of-type(2) {
	width:75px;
}
table.music td:nth-of-type(3) {
	width:175px;
}

И еще одна важная деталь — если в вашей таблице используется заголовок вида <thead>, то для его ячеек <th> придется так же прописывать ширину, как и для ячеек <td>, в противном случае этот способ не будет работать. Т. е. теперь CSS будет выглядеть вот так:

table.music {
	table-layout:fixed; width:450px;
}
table.music td,
table.music th {
	overflow:hidden;
}
table.music td:nth-of-type(1),
table.music th:nth-of-type(1) {
	width:200px;
}
table.music td:nth-of-type(2),
table.music th:nth-of-type(2) {
	width:75px;
}
table.music td:nth-of-type(3),
table.music th:nth-of-type(3) {
	width:175px;
}


sysadmin.ru

Как задать максимальную ширину таблицы при помощи CSS

Вам нужно вывести таблицу конкретно заданной ширины? Ваша таблица очень большая и при отображении ее «разносит» до неприличных размеров? Да еще при этом свойство max-width не работает? Тогда вы попали по адресу. В этой статье мы рассмотрим способы решения данной проблемы.

Как задать максимальную ширину таблицы

Давайте рассмотрим проблему в корне.

Согласно html спецификациям, результат использования свойств max(min)-width(height) для таблиц не определён.

Теперь вспомним немного теории: у нас есть возможность задавать произвольные размеры для блочного элемента.

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

Рассмотрим сказанное на примере.

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Задаем максимальную ширину таблице</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" media="all" type="text/css" href="./style2.css" /> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
 <body>
  <div>
  <table border="1">
    <tr> 
     <td>Задаем</td><td>фиксированную</td><td>ширину</td><td>таблицы</td>
     </tr>
   </table>
  </div>
 </body>
</html>

CSS:

table {
    width: 100%; /* Задаем ширину таблицы */
   }
   div {
    max-width: 900px; /* Задаем ширину родительского блока */} 

Таблица ограниченной ширины

Как видим, теперь, методом «родительского контроля», можно ограничивать нашу «непослушную» таблицу.

Важно!!!

  1. Ширина таблицы указывается в процентах от размера родительского элемента.
  2. Если у вас очень большая таблица, для корректного расчета ширины ячеек можно добавить строчку.

Оценок: 12 (средняя 5 из 5)

Таблица ограниченной шириныТаблица ограниченной ширины

Понравилась статья? Расскажите о ней друзьям:

Курсы по CSS (в открытом доступе)

Уровень сложности:

Средний

Еще интересное

vaden-pro.ru

Отправить ответ

avatar
  Подписаться  
Уведомление о