Таблица HTML Colspan и Rowspan
❮ Предыдущая Далее ❯
В таблицах HTML могут быть ячейки, занимающие несколько строк и/или столбцов.
АПРЕЛЬ | ||
---|---|---|
2022 | ||
---|---|---|
ФИЕСТА | ||
Таблица HTML — Colspan
Чтобы создать ячейку, охватывающую несколько столбцов, используйте атрибут colspan
:
Пример
Возраст | ||
---|---|---|
Джилл | Смит | 43 |
Ева | Jackson | 57 |
Примечание: Значение атрибута colspan
представляет число столбцов для охвата.
Таблица HTML — Rowspan
Чтобы создать диапазон ячеек, состоящий из нескольких строк, используйте атрибут rowspan
:
Пример
Name | Джилл |
---|---|
Телефон | 555-1234 |
555-8745 |
Попробуйте сами »
Примечание: Значение атрибута rowspan
представляет количество
строки для охвата.
HTML-упражнения
Проверьте себя с помощью упражнений
Упражнение:
Используйте правильный HTML-атрибут, чтобы первый элемент TH занимал два столбца.
<таблица>
Начать упражнение
❮ Предыдущий Следующий ❯
ВЫБОР ЦВЕТА
Лучшие учебники
Учебник по HTMLУчебник по CSS
Учебник по JavaScript
Учебник How To
Учебник по SQL
Учебник по Python
Учебник по W3. CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery
2 Top 9 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery
Основные примеры
Примеры HTMLПримеры CSS
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery2
| О
W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.
Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools использует W3.CSS.
Как применить к HTML-таблице интервалы между ячейками только по горизонтали?
спросил
Изменено 3 года, 9 месяцев назад
Просмотрено 46 тысяч раз
Недавно я обнаружил, что мне нужно использовать атрибут cellpacing в своей таблице, но мне было интересно, смогу ли я заставить его работать только по горизонтали. Я не хочу, чтобы он растянулся по вертикали, что испортит макет всей моей страницы.
- html
- html-таблица
1
Лучше, чем установка Cellspacing="10"
, использовать CSS. Вы можете использовать следующий CSS, чтобы настроить интервал между ячейками таблицы.
таблица { расстояние между границами: 10 пикселей 0; }
Первое значение указывает интервал по горизонтали, а второе значение — интервал по вертикали.
4
Да, я знаю, что это уродливо и отвратительно для разделения содержимого и стилей, но добавление разделителей (невидимых) столбцов кажется единственным, что последовательно работает на всех платформах.
Здесь я поместил некоторые пустые данные таблицы в первую строку и задал им ширину (в пикселях). Я сделал соответствующие пустые данные таблицы в последовательных строках. Это кажется настоящим олдскул , но он простой и работает.
<таблица>некоторый контент для столбца 1 <тд />другое содержимое для 2-го видимого столбца (фактически столбца 3) <тд />содержимое для 3-го видимого столбца (фактически столбец 5) таблица> png" /> <тд /><тд />
4
Если вам просто нужно отделить содержимое ячейки от , используйте интервалы внутри ячеек (и установите Cellspacing=0
в HTML). Это повсеместно поддерживается браузерами с поддержкой CSS.
Если вам действительно нужно разделить сами ячейки, чтобы между их границами или их цветным фоном был интервал, то border-spacing
решит проблему, но только в поддерживающих браузерах.
В зависимости от контекста вы можете даже рассмотреть возможность имитации интервала между ячейками, поместив содержимое ячейки в div
, настроенный на покрытие области ячейки, за исключением желаемого отступа, который тогда будет выглядеть как интервал между ячейками. Затем вы должны установить любую желаемую границу или фон для этих
.