Размер ячеек таблицы — как изменить ?
Доброго времени!
Такая проблемка: есть таблица со свойством table-layout: fixed; это свойство делит таблицу на ячейки равной ширины, хотя для каждой ячейки задан размер.
Как поменять размер ячеек.
Добавлено через 9 минут
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
table id = "main-basis"> tr>td colspan = "2" class = "header-basis">header/td>/tr> tr>td class = "left-basis"> left-basis /td> td class = "right-basis"> right-basis /td> /tr> tr> td colspan = "2" class = "footer-basis"> footar-basis /td> /tr> /table>
Добавлено через 49 секунд
не могу поменять размер у left-basis и right-basis
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Размер ячеек таблицы
Хочу увеличить расстояние между 1/2 и 2/3 ячейками. Писал и cellspacing и border radius. Толку 0.
Таблицы. Различный размер ячеек
Всем привет! Прошу помощи. Столкнулся с проблемой, не могу поменять ширину ячейки в таблице.
Выпадающее горизонтальное меню, изменить размер ячеек подменю под текст
Как сделать чтобы ячейки выпадающего меню были другого размера? Скриншот прилагаю:
Изменить размер таблицы
Всем привет. Не могу выставить размер двух колонок, указал на скрине, Что бы расстояние между.
1025 / 678 / 295
Регистрация: 04.04.2013
Сообщений: 2,707
Maxx Vell, прям в коде можно указать, можно через класс:
1 2 3 4 5 6 7
table> tr> td>/td> td width="60%">/td> td>/td> /tr> /table>
Регистрация: 31.12.2013
Сообщений: 18
размер указан
1 2 3 4 5 6 7 8 9
.left-basis { height: 480px; width: 290px; } .right-basis { height: 480px; width: 710px; }
Задаём размеры отдельных ячеек и столбцов
Размеры ячеек и столбцов тоже можно задавать вручную, особенно если вам не нравится, как браузер распределил ширину колонок. Размеры ячеек задаются точно так же, как и размеры таблицы: с помощью CSS-свойств width и height .
Есть два варианта добавления стилей ячейкам:
- Назначать ячейкам уникальные имена классов, например, class=»cell-11″ , и применять стили для этих классов.
- Использовать атрибут style , внутри которого можно писать CSS-код.
Пример второго варианта:
К счастью, редко нужно задавать размеры каждой ячейки. Обычно размеры ячеек прописывают, когда надо вручную установить ширину столбцов таблицы: для этого достаточно задать ширину для каждой ячейки из первой строки.
В этом задании вы зададите ширину столбцов, используя атрибут style . А также увидите отличия между шириной столбцов по умолчанию и заданной вручную.
Хотите досконально разбираться в разметке, знать о доступности, строить сетки на флексбоксах? Записывайтесь на профессиональный курс по вёрстке первого уровня, проходящий c 29 января по 1 апреля 2024. До 27 ноября цена 19 900 ₽ 22 900 ₽
Перейти к заданию
- index.html Сплит-режим
- style.css Сплит-режим
Фиксируем размер ячеек HTML таблицы с помощью CSS3
На данный ширина всех столбцов будет определяться браузером клиента автоматически, чего собственно мы и хотим избежать. Поможет нам в этом следующий 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)
Как можно догадаться, table td:nth-of-type(1), table td:nth-of-type(2) и table td:nth-of-type(3) содержат цифры колонок, а параметр width отвечает за их ширину. Важный совет — если у вашей таблицы задан свой определенный класс, то лучше использовать его в таблице CSS, потому что в противном случае данные размеры применятся на любые таблицы, которые расположены на страницах, где используется данный css файл. Допустим, у вашей таблицы следующий код, в котором видно, что класс таблицы — music:
Kraftwerk 1969 Германия Deutsch Amerikanische Freundschaft 1978 Германия Front 242 1981 Бельгия
То и 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)
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)
Таблицы в HTML. Управление размерами.
Если размеры таблиц не указаны вебмастером, то они определяются содержимым ячеек. Чем объемнее это содержимое, тем больше размеры ячеек и таблицы в целом. Т.е., если вы напишете в ячейке одну букву, то размеры ячейки подстроятся под эту букву. Если вы теперь допишете вторую букву, то горизонтальный размер ячейки увеличится. Вертикальные размеры ячейки определяются размерами текстовых строк. Чем больше строк, и чем выше сама строка — тем больше и размеры ячейки. Если в ячейке находится изображение, то ее размеры опредялются размерами этой картинки.
Теперь поговорим о том, как задать вполне конкретные числовые размеры ячейки. Для этого есть два свойства — ширина и высота; и два соответствующих этим свойствам параметра — width и height.
Параметры width и height имеют числовое значение. Как правило — это пикселы или проценты. В первом случае размеры становятся абсолютными, а во втором — относительными.
Абсолютные размеры таблиц
Сначала поговорим об абсолютных размерах. Наиболее распространенная единица измерения абсолютных размеров в HTML — пикселы. Один пиксел равен по размерам светящейся точке вашего монитора, из которых состоит весь дисплей. В HTML для пикселов применяется сокращение — px. Например, запись 100px в html-коде, переводится на русский как 100 пикселов. А теперь небольшой вопрос: 100 пикселов — это много или мало? Для ответа на такие вопросы я советую скачать электронную линейку , которая позволит измерить любой объект на экране, а также визуально оценить величину любого размера. Она очень проста в использовании, так что вы без труда с ней разберетесь. Теперь я приведу пример задания ячейки с абсолютными размерами. Предположим у вас есть ячейка и вы хотите, чтобы ее размеры составляли ни много ни мало, а 300х100 (в таких записях сначала пишется ширина, а затем высота). Чтобы осуществить задуманное, нужно написать такой код:
Здесь, как и во всем языке HTML, не имеет значения порядок появления параметров тега, поэтому возможны оба варианта записи. Теперь создадим таблицу шириной в 360 пикселов и высотой в 80 пикселов. Таблица будет состоять из двух строк и двух столбцов (т.е. будет включать в себя 4 ячейки). Строки будут иметь равную высоту, а ячейки — равную ширину. Посчитайте самостоятельно размеры отдельно взятой ячейки, а затем нарисуйте и образмерьте будущую таблицу. Пишем код, пока не задавая конкретных размеров:
К слову,подобный код вы уже видели. Он был приведен в качестве примера на предыдущей странице, только там было три строки и три столбца, а здесь по 2 тех и других. Сейчас вы дополните этот несложный код размерными параметрами. Сначала попытайтесь сделать это самостоятельно, а уже затем смотрите на готовый код, приведенный ниже:
В результате помещения этого кода в браузер, вы увидите подобную картинку.
| Первая ячейка | Вторая ячейка |
| Третья ячейка | Четвертая ячейка |
Относительные размеры таблиц
Теперь перейдем к относительной единице измерения — процентам. Система относительных размеров является более гибкой. Потому что в этом случае размеры ячейки, или таблицы подстраиваются под размеры того элемента, в котором эта ячейка или таблица находится. Такой внешний элемент, содержащий в себе рассматриваемую ячейку или таблицу, называют еще родительским элементом. Для ячейки родительским элементом всегда является таблица, включающая в себя эту ячейку. Для таблицы, расположенной в ячейке «cell» другой таблицы, родительским элементом будет ячейка «cell». Для таблицы, находящейся непосредственно в контейнере тега родительским элементом будет тело страницы. Итак, если для ячейки/таблицы задан размер в процентах, браузер посчитает эти проценты от размера родительского элемента. Если вы пока не поняли, о чем идет речь — не страшно: примеры помогут уловить суть.
Пример первый. Предположим, таблица находится непосредственно в теле страницы. И параметр ширины таблицы следующий: width=»50%». В такой ситуации ширина таблицы всегда будет равна половине ширины страницы. На каком бы мониторе эта страница не была открыта. И как бы не менялись размеры окна браузера.
Пример второй. Допустим задана таблица в 500 пикселов шириной. А ширина какой либо ячейки задана так: width=»10%». В этом случае ширина ячейки составит 10% от ширины таблицы, т.е. ширина ячейки будет равна 50 пикселам. Но вот вы решили изменить ширину таблицы на 700 пикселов. Как только вы это сделаете, ширина ячейки автоматически изменится на 70 пикселов.
Пример третий. Ширина таблицы составляет 70% от ширины страницы. А размер ячейки width=»10%». В этом случае ширина таблицы подстроится под ширину окна браузера, как в первом примере. А ширина ячейки подстроится под ширину таблицы. Т.е. при растяжении/сжатии окна браузера по ширине, автоматически меняется не только ширина таблицы, но и ширина ячейки.
А теперь создадим ту же самую таблицу, что была приведена чуть выше, но размеры ячеек сделаем относительными.