Cellspacing html table: Атрибут cellspacing | htmlbook.ru

Таблица HTML Colspan и Rowspan

❮ Предыдущая Далее ❯


В таблицах HTML могут быть ячейки, занимающие несколько строк и/или столбцов.


АПРЕЛЬ    
   
   
     
     
2022
     
ФИЕСТА  
 
     


Таблица HTML — Colspan

Чтобы создать ячейку, охватывающую несколько столбцов, используйте атрибут colspan :

Пример



s    /th>

 
 

   

 
 
   

   
 
Возраст
Джилл Смит 43
Ева Jackson 57

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

Примечание: Значение атрибута colspan представляет число столбцов для охвата.


Таблица HTML — Rowspan

Чтобы создать диапазон ячеек, состоящий из нескольких строк, используйте атрибут rowspan :

Пример


 
   

 
 
   

 
 


Name Джилл
Телефон 555-1234
555-8745

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

Примечание: Значение атрибута rowspan представляет количество строки для охвата.



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

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

Упражнение:

Используйте правильный HTML-атрибут, чтобы первый элемент TH занимал два столбца.

<таблица>
  
    Имя
    Возраст
  
  
    Джилл
    Смит
    50
  
  
    Ева


    Джексон
    94
  

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


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


ВЫБОР ЦВЕТА



Лучшие учебники
Учебник по 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
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery2

| О

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

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools использует W3.CSS.

Как применить к HTML-таблице интервалы между ячейками только по горизонтали?

спросил

10 лет, 5 месяцев назад

Изменено 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 , настроенный на покрытие области ячейки, за исключением желаемого отступа, который тогда будет выглядеть как интервал между ячейками. Затем вы должны установить любую желаемую границу или фон для этих

элементов div .

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

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