Как добавить пробел между строками в таблице
Сегодняшняя задача — создать пробел между двумя строками в таблице. Пространство между двумя строками в
, определяющий ячейку заголовка в таблице HTML.| , определяющий стандартную ячейку данных в таблице HTML. |  <тело>
<дел>
стол {
граница-коллапс: раздельная;
интервал между границами: 0 15 пикселей;
}
й {
цвет фона: #4287f5;
белый цвет;
}
й,
тд {
ширина: 150 пикселей;
выравнивание текста: по центру;
граница: 1px сплошной черный;
отступ: 5px;
}
h3 {
цвет: #4287f5;
} Вот результат нашего кода. Пример добавления пробела между горизонтальными строками:
<голова>
Попробуй сам » РезультатРасстояние между строками в таблице
Пример добавления пробела между вертикальными столбцами:
<голова>
Попробуй сам » В нашем первом примере для свойства border-spacing мы используем значение «0 15px», что означает, что пространство находится между горизонтальными рядами. Проблема?!Давайте обратимся к нашей таблице, чтобы понять, о чем мы говорим, итак: таблица {
граница-коллапс: раздельная;
расстояние между границами: 20 пикселей 0;
фон: хаки; /* добавить эту строку */
} И вот результат: Что, если мы хотим, чтобы в этом примере были удалены внутренние границы между столбцами? Теперь у нас есть это в открытом космосе из столбцов Employee ID и Age . Хорошо, давайте исправим это вместе! Удалите границы коллапса: отдельные и интервалы между границами: 20px 0 из таблицы CSS. Теперь мы добавим border-spacing: 20px 0 для каждого td нашей таблицы, а не для всей таблицы. Мы также должны добавить свойство отображения блока, чтобы он работал так, как мы хотим. Итак, наши изменения будут такими: таблица {
фон: хаки;
}
таблица tbody {
дисплей: блок;
расстояние между границами: 20 пикселей 0;
} Результат будет таким же, как и раньше. таблица {
фон: хаки;
}
таблица tbody {
поля: 0-20px; /* добавьте эту строку, отступ -20 пикселей слева и справа, 20 пикселей основаны на величине интервала между границами, который в этом примере равен 20 пикселям */
дисплей: блок;
расстояние между границами: 20 пикселей 0;
} И поехали! Это именно то, что мы хотели! Как видите, левое и правое космическое пространство ушли навсегда! Теперь вы можете удалить цвет фона и получить красивый стол! Надеюсь, вам понравилось, приятного времяпрепровождения! Таблицы HTML❮ Предыдущая Следующая Глава ❯ Пример таблицы HTML
Определение таблиц HTMLПример
Попробуйте сами » Объяснение примера: Таблицы определяются с помощью <таблица> тег. Таблицы разделены на строк таблицы с тегом Строки таблицы делятся на данные таблицы с тегом Строка таблицы также может быть разделена на заголовков таблицы с помощью тега Данные таблицы Если не указать рамку для таблицы, она будет отображаться без рамок. Граница может быть добавлена с помощью атрибута границы: Попробуйте сами » Атрибут границы постепенно выходит из стандарта HTML! Лучше использовать CSS. Чтобы добавить границы, используйте свойство CSS border : table, th, td { Попробуйте сами » Не забудьте определить границы как для таблицы, так и для ячеек таблицы. Если вы хотите, чтобы границы свернулись в одну, добавьте CSS border-collapse : table, th, td { Попробуйте сами » Заполнение ячеек указывает пространство между содержимым ячейки и ее границами. Если не указать заполнение, ячейки таблицы будут отображаться без заполнения. Чтобы задать заполнение, используйте свойство CSS padding : table, th, td { Попробуйте сами » Заголовки таблиц определяются тегом По умолчанию все основные браузеры отображают заголовки таблиц жирным шрифтом и выравнивают по центру: Попробуйте сами » Чтобы выровнять заголовки таблицы по левому краю, используйте свойство CSS text-align : th { Попробуйте сами » Расстояние между границами определяет расстояние между ячейками. Чтобы установить расстояние между границами таблицы, используйте свойство CSS border-spacing : table { Попробуй сам » Если у таблицы свернутые границы, интервал между границами не действует. Чтобы ячейка занимала более одного столбца, используйте кнопку 9.0051 colspan атрибут: Попробуйте сами » Чтобы ячейка занимала несколько строк, используйте кнопку 9.0051 rowspan атрибут: Попробуйте сами » Чтобы добавить заголовок к таблице, используйте тег Попробуйте сами » Тег | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Во втором примере мы используем значение «20px 0», что означает, что пространство находится между вертикальными рядами.
Теперь пришло время удалить левое и правое внешнее граничное пространство. Это можно сделать быстро, просто добавив отрицательное поле слева и справа от каждого элемента td, чтобы убрать это пространство для нас.
