Css внутренние границы таблицы – html — Как сделать расстояния между ячейками таблицы, чтобы при этом по краям этой таблицы отступов от ячеек не было?

Содержание

CSS свойства таблицы и принципы табличной верстки

Цель урока: Знакомство со свойствами таблицы и с принципами табличной верстки CSS


Свойства таблицы

Рассмотрим основные CSS свойства таблицы

border

Свойство рассматривается в одном из предыдущих уроков и включает одновременно несколько свойств:

  • BORDER-STYLE (СТИЛЬ ГРАНИЦЫ)
  • BORDER-WIDTH (ШИРИНА ГРАНИЦЫ)
  • BORDER-COLOR (ЦВЕТ ГРАНИЦЫ)

Существует также сборное правило:

border:border-width border-style border-color;
border: 1px solid #000;

border:border-width border-style border-color; border: 1px solid #000;

border-collapse
(слияние границы)

Значения:

  • collapse (слитая граница)
  • separate (вокруг каждой ячейки — своя собственная рамка)

Пример:

table.collapse{
        border-collapse:collapse;
}
table.separate{
        border-collapse:separate;
}

table.collapse{ border-collapse:collapse; } table.separate{ border-collapse:separate; }

Результат:

width и height
(высота и ширина таблицы)

Значения:

Пример:

table{
	width:100%;
	height:100px;
}

table{ width:100%; height:100px; }

Результат:

Таблица Таблица
Таблица Таблица

text-align
(выравнивание по горизонтали)

Значения:

  • center (по центру)
  • left (по левому краю)
  • right (по правому краю)
  • justify (по ширине)

vertical-align
(выравнивание по вертикали)

Значения:

  • baseline (по базовой линии)
  • sub (как подиндекс)
  • super (как надиндекс)
  • top (по верхнему краю)
  • middle (посередине)
  • bottom(по нижнему краю)
  • % (от высоты межстрочного интервала)

Пример:

table{
	text-align:right;
	height:100px;
	vertical-align:middle;
}

table{ text-align:right; height:100px; vertical-align:middle; }

Результат:

Таблица Таблица
Таблица Таблица

padding
(внутренние отступы в таблице)

Данное свойство полностью соответствует правилам данного свойства для всех элементов. Поэтому рассмотреть его можно в одном из предыдущих уроков.

background-color (задний фон)
color (цвет текста)

Данные свойства соответствуют правилом их определения для всех остальных элементов. Поэтому темы можно рассмотреть из предыдущих уроков: задний фон и цвет.

Задание:
Открыть/создть файл style.css
:
  1. Добавить свойства для следующих тегов (если еще не добавлены):
  • body основная страница
  • p абзац
  • a гиперссылка
  • h2, h3, h4, … заголовки
  • ul, ol, li списки, пункты списков
  • table, tr, td таблица, строка, ячейка строки
  • hr линия
  • span, div строчный тег, блочный тег
  • Добавить комментарий с пояснением к каждому свойству:
  • Прикрепите стилевой файл к какой-либо готовой веб-странице
  • Табличная верстка CSS

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

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

    Сейчас есть другой способ — использование слоев, которые постепенно заменили таблицы в этом виде работы с веб-страницей. Однако и в наше время некоторые дизайнеры успешно используют табличную верстку.

    Табличная верстка из двух колонок

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

  • Обычно левая часть — меню и дополнительные элементы, а правая часть — основная, для главного контента.
  • В таком случае ширина левой части задается определенным значением, т.е. жестко, а правая часть занимает оставшуюся область страницы.
  • В таком случае необходимо задать общую ширину всей таблицы (тега table) в процентах через свойство width (100%), а для первой ячейки (тега td) установить ширину (также свойство
    width
    ) в пикселах или процентах.
  • Пример: задать основной каркас страницы из двух колонок: первая — с фиксированным размером, вторая — на оставшуюся область браузера. Выполнить задание используя CSS стили (метод вложения)
    Выполнение:
    <style type="text/css"> 
    /* для таблицы */
    table#maket{
    	width:100%;
    	padding:5px; /* внутренние отступы */
    	border-collapse:collapse; /* убираем двойную границу */
    }
    /* для левой ячейки */
    td#left{
    	width:200px;
    }
    /* для всех ячеек */
    #maket td{
    	vertical-align:top;
            border:1px solid black; /* временно обозначим границы */
    }
    </style>

    <style type=»text/css»> /* для таблицы */ table#maket{ width:100%; padding:5px; /* внутренние отступы */ border-collapse:collapse; /* убираем двойную границу */ } /* для левой ячейки */ td#left{ width:200px; } /* для всех ячеек */ #maket td{ vertical-align:top; border:1px solid black; /* временно обозначим границы */ } </style>

    </head> 
    <body>
    <table cellspacing="0">
    	<tr>
    		<td>1</td>
    		<td>2</td>
    	</tr>
    </table>
    ...

    </head> <body> <table cellspacing=»0″> <tr> <td>1</td> <td>2</td> </tr> </table> …

    Результат:

  • Теперь попробуем визуально отделить две колонки таблицы друг от друга.
  • Пример: задать разный фон ячеек (чтобы разделить две колонки друг от друга) и установить расстояние между колонками (разделитель)


    Выполнение:
    Добавим новые свойства стилей:
    /* для левой ячейки */
    td#left{
    	width:200px;
    	background: #ccc; /* Цвет фона левой колонки */
            border:1px solid black; /* временно обозначим границы */
    }
    /* для правой ячейки */
    td#right{
    	background: #fc3; /* Цвет фона правой колонки */
            border:1px solid black; /* временно обозначим границы */
    }
    /* для разделителя */
    #razdel{
        width: 10px; /* Расстояние между колонками */
       }

    /* для левой ячейки */ td#left{ width:200px; background: #ccc; /* Цвет фона левой колонки */ border:1px solid black; /* временно обозначим границы */ } /* для правой ячейки */ td#right{ background: #fc3; /* Цвет фона правой колонки */ border:1px solid black; /* временно обозначим границы */ } /* для разделителя */ #razdel{ width: 10px; /* Расстояние между колонками */ }

    Все вместе:

    <style type="text/css">
    /* для таблицы */
    table#maket{
    	width:100%;
    	padding:5px; /* внутренние отступы */
    	border-collapse:collapse; /* убираем двойную границу */
    }
    /* для левой ячейки */
    td#left{
    	width:200px;
    	background: #ccc; /* Цвет фона левой колонки */
            border:1px solid black; /* временно обозначим границы */
    }
    /* для правой ячейки */
    td#right{
    	background: #fc3; /* Цвет фона правой колонки */
            border:1px solid black; /* временно обозначим границы */
    }
    /* для всех ячеек */
    #maket td{
    	vertical-align:top;
    }
    /* для разделителя */
    #razdel{
        width: 10px; /* Расстояние между колонками */
       }
    </style>

    <style type=»text/css»> /* для таблицы */ table#maket{ width:100%; padding:5px; /* внутренние отступы */ border-collapse:collapse; /* убираем двойную границу */ } /* для левой ячейки */ td#left{ width:200px; background: #ccc; /* Цвет фона левой колонки */ border:1px solid black; /* временно обозначим границы */ } /* для правой ячейки */ td#right{ background: #fc3; /* Цвет фона правой колонки */ border:1px solid black; /* временно обозначим границы */ } /* для всех ячеек */ #maket td{ vertical-align:top; } /* для разделителя */ #razdel{ width: 10px; /* Расстояние между колонками */ } </style>

    </head> 
    <body>
    <table cellspacing="0">
    	<tr>
    		<td>1</td>
    		<td></td>
    		<td>2</td>
    	</tr>
    </table>

    </head> <body> <table cellspacing=»0″> <tr> <td>1</td> <td></td> <td>2</td> </tr> </table>

    Для разделителя была добавлена новая ячейка.
    Результат:

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


    Выполнение:
    Добавим новые свойства границ для ячеек:
    /* для левой ячейки */
    td#left{
    	width:200px;
    	background: #ccc; /* Цвет фона левой колонки */
    /* новое */
            border-right: 1px dashed #000; /* Параметры правой пунктирной границы */
    }

    /* для левой ячейки */ td#left{ width:200px; background: #ccc; /* Цвет фона левой колонки */ /* новое */ border-right: 1px dashed #000; /* Параметры правой пунктирной границы */ }

    Все вместе:

    <style type="text/css">
    /* для таблицы */
    table#maket{
    	width:100%;
    	padding:5px; /* внутренние отступы */
    	border-collapse:collapse; /* убираем двойную границу */
    }
    /* для левой ячейки */
    td#left{
    	width:200px;
    	background: #ccc; /* Цвет фона левой колонки */
            border-right: 1px dashed #000; /* Параметры правой пунктирной границы */
    }
    /* для правой ячейки */
    td#right{
    	background: #fc3; /* Цвет фона правой колонки */
    }
    /* для всех ячеек */
    #maket td{
    	vertical-align:top;
    }
    </style>

    <style type=»text/css»> /* для таблицы */ table#maket{ width:100%; padding:5px; /* внутренние отступы */ border-collapse:collapse; /* убираем двойную границу */ } /* для левой ячейки */ td#left{ width:200px; background: #ccc; /* Цвет фона левой колонки */ border-right: 1px dashed #000; /* Параметры правой пунктирной границы */ } /* для правой ячейки */ td#right{ background: #fc3; /* Цвет фона правой колонки */ } /* для всех ячеек */ #maket td{ vertical-align:top; } </style>

    </head> 
    <body>
    <table cellspacing="0">
    	<tr>
    		<td>1</td>
    		<td>2</td>
    	</tr>
    </table>

    </head> <body> <table cellspacing=»0″> <tr> <td>1</td> <td>2</td> </tr> </table>

    Результат:

    Табличная верстка из трех колонок

    Существует понятие фиксированного или «резинового» макета верстки.

    Фиксированный макет CSS

    • При использовании фиксированного макета ширина всей таблицы задается в пикселях, и тогда, независимо от разрешения монитора и окна браузера, таблица будет всегда иметь одинаковую ширину.
    • В таком случае ширину остальных колонок стоит также сделать фиксированной.
    • Можно не указать ширину одной ячейки, тогда она будет вычислена автоматически, исходя из размеров остальных ячеек и всей таблицы.
    Пример: создать шаблон страницы из трех колонок. Использовать фиксированный макет табличной верстки:
    • левая колонка — 150 пикселей;
    • средняя колонка — 400 пикселей;
    • правая колонка — 200 пикселей;

    Задать фон для колонок и визуально разделить колонки границей.


    Выполнение:
    <style type="text/css">
    /* для таблицы */
    table#maket{
    	width:750px;
    	padding:5px; /* внутренние отступы */
    	border-collapse:collapse; /* убираем двойную границу */
    }
    /* для левой ячейки */
    td#left{
    	width:150px;
    	background: #ccc; /* Цвет фона левой колонки */
    	border-right: 1px dashed #000; /* граница между колонками */
    }
    /* для центральной ячейки */
    td#central{
    	width:400px;
    	background: #fc3; /* Цвет фона колонки */
    	border-right: 1px dashed #000; /* граница между колонками */
    }
    /* для правой ячейки */
    td#right{
    	width:200px;
    	background: #ccc; /* Цвет фона правой колонки */
    	}
    /* для всех ячеек */
    #maket td{
    	vertical-align:top;
    }
    </style>

    <style type=»text/css»> /* для таблицы */ table#maket{ width:750px; padding:5px; /* внутренние отступы */ border-collapse:collapse; /* убираем двойную границу */ } /* для левой ячейки */ td#left{ width:150px; background: #ccc; /* Цвет фона левой колонки */ border-right: 1px dashed #000; /* граница между колонками */ } /* для центральной ячейки */ td#central{ width:400px; background: #fc3; /* Цвет фона колонки */ border-right: 1px dashed #000; /* граница между колонками */ } /* для правой ячейки */ td#right{ width:200px; background: #ccc; /* Цвет фона правой колонки */ } /* для всех ячеек */ #maket td{ vertical-align:top; } </style>

    </head> 
    <body>
    <table cellspacing="0">
    	<tr>
    		<td>1</td>
    		<td>2</td>
    		<td>3</td>
    	</tr>
    </table>

    </head> <body> <table cellspacing=»0″> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </table>

    Результат:

    Резиновый макет

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

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


    Пример: создать шаблон страницы из трех колонок. Использовать резиновый макет табличной верстки:
    • левая колонка — 20%;
    • средняя колонка — 40%;
    • правая колонка — 40%;

    Задать фон для колонок и визуально разделить колонки границей.

    Выполнение:

    <style type="text/css">
    /* для таблицы */
    table#maket{
    	width:90%;
    	padding:5px; /* внутренние отступы */
    	border-collapse:collapse; /* убираем двойную границу */
    }
    /* для левой ячейки */
    td#left{
    	width:20%;
    	background: #ccc; /* Цвет фона левой колонки */
    	border-right: 1px dashed #000; /* граница между колонками */
    }
    /* для центральной ячейки */
    td#central{
    	width:40%;
    	background: #fc3; /* Цвет фона колонки */
    	border-right: 1px dashed #000; /* граница между колонками */
    }
    /* для правой ячейки */
    td#right{
    	width:40%;
    	background: #ccc; /* Цвет фона правой колонки */
    	}
    /* для всех ячеек */
    #maket td{
    	vertical-align:top;
    }
    </style>

    <style type=»text/css»> /* для таблицы */ table#maket{ width:90%; padding:5px; /* внутренние отступы */ border-collapse:collapse; /* убираем двойную границу */ } /* для левой ячейки */ td#left{ width:20%; background: #ccc; /* Цвет фона левой колонки */ border-right: 1px dashed #000; /* граница между колонками */ } /* для центральной ячейки */ td#central{ width:40%; background: #fc3; /* Цвет фона колонки */ border-right: 1px dashed #000; /* граница между колонками */ } /* для правой ячейки */ td#right{ width:40%; background: #ccc; /* Цвет фона правой колонки */ } /* для всех ячеек */ #maket td{ vertical-align:top; } </style>

    </head> 
    <body>
    <table cellspacing="0">
    	<tr>
    		<td>1</td>
    		<td>2</td>
    		<td>3</td>
    	</tr>
    </table>

    </head> <body> <table cellspacing=»0″> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </table>

    Результат:

    Рассмотрим второй вариант, когда ширина центральной колонки автоматически подбирается браузером; примером может служить рисунок:

    Пример: создать шаблон страницы из трех колонок. Использовать резиновый макет табличной верстки:
    • левая колонка — 150 пикселей;
    • средняя колонка — 40%;
    • правая колонка — 200 пикселей;

    Задать фон для колонок и визуально разделить колонки границей.


    Выполнение:
    <style type="text/css">
    /* для таблицы */
    table#maket{
    	width:90%;
    	padding:5px; /* внутренние отступы */
    	border-collapse:collapse; /* убираем двойную границу */
    }
    /* для левой ячейки */
    td#left{
    	width:150px;
    	background: #ccc; /* Цвет фона левой колонки */
    	border-right: 1px dashed #000; /* граница между колонками */
    }
    /* для центральной ячейки */
    td#central{
    	background: #fc3; /* Цвет фона колонки */
    	border-right: 1px dashed #000; /* граница между колонками */
    }
    /* для правой ячейки */
    td#right{
    	width:200px;
    	background: #ccc; /* Цвет фона правой колонки */
    	}
    /* для всех ячеек */
    #maket td{
    	vertical-align:top;
    }
    </style>

    <style type=»text/css»> /* для таблицы */ table#maket{ width:90%; padding:5px; /* внутренние отступы */ border-collapse:collapse; /* убираем двойную границу */ } /* для левой ячейки */ td#left{ width:150px; background: #ccc; /* Цвет фона левой колонки */ border-right: 1px dashed #000; /* граница между колонками */ } /* для центральной ячейки */ td#central{ background: #fc3; /* Цвет фона колонки */ border-right: 1px dashed #000; /* граница между колонками */ } /* для правой ячейки */ td#right{ width:200px; background: #ccc; /* Цвет фона правой колонки */ } /* для всех ячеек */ #maket td{ vertical-align:top; } </style>

    </head> 
    <body>
    <table cellspacing="0">
    	<tr>
    		<td>1</td>
    		<td>2</td>
    		<td>3</td>
    	</tr>
    </table>

    </head> <body> <table cellspacing=»0″> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </table>

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

    Использование вложенной таблицы в резиновом макете

    Если ширина двух колонок устанавливается в процентах, а третьей — в пикселях, обойтись одной таблицей не получится. Так, если ширина всей таблицы равна 100 процентов, первой колонки — 200 пикселей, а оставшихся колонок по 20 процентов, то простое вычисление показывает, что размер первой колонки получается равным 60 процентов. В таком случае заданное значение в пикселях браузером не воспримется, а размер будет установлен в процентах.

    • Исходная таблица создается с двумя ячейками. Ширина таблицы задается в процентах.
    • Для левой ячейки (первой колонки) устанавливается ширина в пикселях.
    • Ширина правой ячейки (основа для других колонок) не указывается. Внутрь этой ячейки вставляется вторая таблица, тоже состоящая из двух ячеек.
    • У ячеек вложенной таблицы ширина устанавливается в процентах.
    • Ширина внутренней таблицы должна быть установлена в 100 процентов, чтобы эта таблица занимала все свободное пространство во внешней таблице.
    • Ширина центральной и правой колонки вычисляется относительно ширины ячейки, а не внешней таблицы в целом.
    Пример: создать шаблон страницы из трех колонок. Использовать резиновый макет с вложенной таблицей:
    • левая колонка — 150 пикселей;
    • средняя колонка — 60%;
    • правая колонка — 40%;

    Задать фон для колонок.

    Выполнение:

    <style type="text/css">
    /* для таблицы */
    table{
    	width:100%;
    	border-collapse:collapse; /* убираем двойную границу */
    }
    /* для левой ячейки */
    td#left{
    	width:150px;
    	background: #ccc; /* Цвет фона левой колонки */
    }
    /* для центральной ячейки */
    td#central{
    	width:60%;
    	background: #fc3; /* Цвет фона колонки */
    }
    /* для правой ячейки */
    td#right{
    	width:40%;
    	background: #ccc; /* Цвет фона правой колонки */
    	}
    /* для всех ячеек */
    td{
    	vertical-align:top;
    }
    #left,#central,#right{
    	padding:5px; /* внутренние отступы */
    }

    <style type=»text/css»> /* для таблицы */ table{ width:100%; border-collapse:collapse; /* убираем двойную границу */ } /* для левой ячейки */ td#left{ width:150px; background: #ccc; /* Цвет фона левой колонки */ } /* для центральной ячейки */ td#central{ width:60%; background: #fc3; /* Цвет фона колонки */ } /* для правой ячейки */ td#right{ width:40%; background: #ccc; /* Цвет фона правой колонки */ } /* для всех ячеек */ td{ vertical-align:top; } #left,#central,#right{ padding:5px; /* внутренние отступы */ }

    </style>
    </head> 
    <body>
    <table cellpadding="0" cellspacing="0">
    	<tr>
    		<td>1</td>
    		<td>
    		<table cellpadding="0" cellspacing="0">
    			<td>2</td>
    			<td>3</td>
    		</table>
    		</td>
    	</tr>
    </table>

    </style> </head> <body> <table cellpadding=»0″ cellspacing=»0″> <tr> <td>1</td> <td> <table cellpadding=»0″ cellspacing=»0″> <td>2</td> <td>3</td> </table> </td> </tr> </table>

    Атрибуты тегов cellpadding и cellspacing здесь необходимы, для того, чтобы не было «зазора» между таблицами.
    Результат:

    Таблицы в CSS. Границы таблицы

    Отображение границ ячеек

    CSS позволяет установть не только стиль границы таблицы, но и стиль границ отдельных ячеек. Так как у каждой ячейки свои границы, то между соседними ячейками граница получается сдвоенная. Но существует возможность объединить границы соседних ячеек в одну. Для этого есть свойство border-collapse. Оно принимает значения:

    border-collapse: separate — у каждой ячейки своя граница (по умолчанию)

    border-collapse: collapse — общая граница

    border-collapse: inherit — значение принимается от родительского элемента

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

    Стиль:

    +

    7
    8
    9
    10

    td
      {
      border: 1px solid Red;
      }

    HTML код:

    14
    15
    16
    17
    18
    19
    20
    21
    22

    <table>
      <tr>
        <td>строка 1 ячейка 1</td>
        <td>строка 1 ячейка 2</td>
      </tr>
      <tr>
        <td>строка 2 ячейка 1</td>
        <td>строка 2 ячейка 2</td>
    </tr></table>

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

    Теперь установим таблице свойство border-collapse.

    11
    12
    13
    14

    #t1
      {
      border-collapse: collapse;
      }

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

    Расстояние между ячейками

    CSS даёт возможность установить конкретное расстояние между ячейками таблицы. Для этого используется свойтсво border-spacing. Значением свойства является расстояние в единицах измерения CSS. Это свойство не работает, если установлено свойство border-collapse со значением collapse.

    Создадим ещё одну таблицу и установим расстояние между ячейками:

    Стиль:

    15
    16
    17
    18

    #dis 
      {
      border-spacing: 10px;
      }

    HTML код:

    31
    32
    33
    34
    35
    36
    37
    38
    39

    <table>
      <tr>
        <td>строка 1 ячейка 1</td>
        <td>строка 1 ячейка 2</td>
      </tr>
      <tr>
        <td>строка 2 ячейка 1</td>
        <td>строка 2 ячейка 2</td>
    </tr></table>

    Свойству border-spacing можно указать два значения через пробел. При этом, первое значение — это расстояние по горизонтали, а второе — по вертикали.

    Укажем созданной таблице разные расстояния. 17 строка будет выглядеть так:

    17

    border-spacing: 5px 15px;

    Положение заголовка таблицы

    Для таблицы можно создать заголовок. Он создаётся с помощью тэга <caption>. Свойство caption-side позволяет установить положение заголовка. Оно принимает значения:

    caption-side: top — над таблицей (по умолчанию)

    caption-side: bottom — под таблицей

    Существуют другие значения, но они поддерживаются не всеми браузерами.

    Добавим второй таблице заголовок и расположим его под таблицей:

    32

    <caption>Заголовок таблицы</caption>

    Отображение пустых ячеек

    Для пустых ячеек можно запретить отображение фона и рамки. Если ячейка содержит пробел, перевод строки или табуляцию, то она всё равно считается пустой. Отмену отображения пустых ячеек устанавливает свойство empty-cells. Может принимать значения:

    empty-cells: show — ячейки видны (по умолчанию)

    empty-cells: hide — ячейки не видны

    Создадим таблицу с пустой ячейкой. Кроме рамки, установим ячейкам фон. Пока не будем ничего менять, посмотрите, как будет выглядеть таблица.

    Стиль:

    19
    20
    21
    22

    #hid td
      {
      background-color: #909090;
      }

    HTML код:

    45
    46
    47
    48
    49
    50
    51
    52
    53

    <table>
      <tr>
        <td>строка 1 ячейка 1</td>
        <td>строка 1 ячейка 2</td>
      </tr>
      <tr>
        <td></td>
        <td>строка 2 ячейка 2</td>
    </tr></table>

    Пустая ячейка видна, у неё отображаются рамка и фон.

    Теперь добавим таблице свойство empty-cells.

    19
    20
    21
    22

    #hid 
      {
      empty-cells: hide;
      }

    Обратите внимание, пустая ячейка не отображается в таблице

    Отображение внутренних границ таблицы css. Границы в CSS

    Отображение внутренних границ таблицы css. Границы в CSS

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

    Цвет фона ячеек

    Цвет фона одновременно всех ячеек таблицы устанавливается через свойство background , которое применяется к селектору TABLE . При этом следует помнить о правилах использования стилей, в частности, наследовании свойств элементов. Хотя свойство background не наследуется, для ячеек значением фона по умолчанию выступает transparent , т.е. прозрачность, поэтому эффект заливки фона получается и у ячеек. Если одновременно с TABLE задать цвет у селектора TD или TH , то этот цвет будет установлен в качестве фона ячейки (пример 2.3).

    Пример 2.3. Цвет фона

    Таблицы
    Заголовок 1Заголовок 2
    Ячейка 3Ячейка 4

    В данном примере получим синий цвет фона у ячеек (тег

    ) и красный у заголовка (тег ). Это связано с тем, что стиль для селектора TH не определен, поэтому «просвечивается» фон родителя, в данном случае, селектора TABLE . А цвет для селектора TD указан явно, вот ячейки и «заливаются» синим цветом.

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

    Рис. 2.4. Изменение цвета фона

    Поля внутри ячеек

    Полем называется расстояние между краем содержимого ячейки и её границей. Обычно для этой цели применяется атрибут cellpadding тега

    . Он определяет значение поля в пикселах со всех сторон ячейки. Допускается использовать стилевое свойство padding , добавляя его к селектору TD , как показано в примере 2.4.

    Пример 2.4. Поля в таблицах

    XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

    Таблицы
    Заголовок 1Заголовок 2
    Ячейка 3Ячейка 4

    В данном примере с помощью группирования селекторов поля установлены одновременно для селектора TD и TH . Результат примера показан на рис. 2.5.

    Отображение внутренних границ таблицы css. Границы в CSS

    Рис. 2.5. Поля в ячейках

    Если применяется стилевое свойство padding для ячеек таблицы, то действие атрибута cellpadding тега

    игнорируется.

    Расстояние между ячейками

    Для изменения расстояния между ячейками применяется атрибут cellspacing тега

    . Влияние этого атрибута хорошо заметно при использовании границ вокруг ячеек или при заливке ячеек цветом, который выделяется на фоне страницы. В качестве замены cellspacing выступает стилевое свойство border-spacing , оно устанавливает расстояние между границами ячеек. Одно значение устанавливает одновременно расстояние по вертикали и горизонтали между границами ячеек. Если значений у этого свойства два, то первое определяет горизонтальное расстояние (т.е. слева и справа от ячейки), а второе — вертикальное (сверху и снизу).

    Свойство border-spacing действует только в том случае, если для селектора TABLE не задано свойство border-collapse со значением collapse (пример 2.5).

    Пример 2.5. Расстояние между границами ячеек

    XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx

    Замена cellspacing
    Леонардо58
    Рафаэль411
    Микеланджело249
    Донателло213

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

    Отображение внутренних границ таблицы css. Границы в CSS

    Рис. 2.6. Вид таблицы при использовании border-spacing

    Браузер Internet Explorer до седьмой версии включительно не поддерживает свойство border-spacing , поэтому в этом браузере для таблиц будет применяться значение cellspacing заданное по умолчанию (обычно оно равно 2px).

    При добавлении к селектору TABLE свойства border-collapse со значение

    Сетка таблицы | htmlbook.ru

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

    Для создания таблицы показанной на рис. 1 потребуется всего ничего: установить стилевое свойство border для каждой ячейки и воспользоваться свойством border-collapse.

    Рис. 1. Вид таблицы с сеткой

    При добавлении свойства border к селектору TD или TH между ячейками возникают двойные линии, которые образуются за счет соприкосновения рамок вокруг ячеек. Чтобы этого не произошло, для селектора TABLE указывается свойство border-collapse со значением collapse, как показано в примере 1.

    Пример 1. Создание сетки

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
     <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Таблица</title>
      <style type="text/css">
       TABLE {
        width: 300px; /* Ширина таблицы */
        border-collapse: collapse; /* Убираем двойные линии между ячейками */
       }
       TD, TH {
        padding: 3px; /* Поля вокруг содержимого таблицы */
        border: 1px solid black; /* Параметры рамки */
       }
       TH {
        background: #b0e0e6; /* Цвет фона */
       }
      </style>
     </head>
     <body>
      <table>
       <tr>
        <th>&nbsp;</th><th>2004</th><th>2005</th><th>2006</th>
       </tr>
       <tr>
        <td>Рубины</td><td>43</td><td>51</td><td>79</td>
       </tr>
       <tr>
        <td>Изумруды</td><td>28</td><td>34</td><td>48</td>
       </tr>
       <tr>
        <td>Сапфиры</td><td>29</td><td>57</td><td>36</td>
       </tr>
      </table>
     </body>
    </html>

    В данном примере также устанавливается цвет фона для ячеек заголовка (тег <th>) через свойство background.

    Как вариант, можно вообще убрать рамку вокруг таблицы, оставив только линии внутри нее (рис. 2).

    Рис. 2. Сетка внутри таблицы

    При этом удобнее всего будет не убрать рамку, а спрятать ее, задав ей цвет, совпадающий с цветом фона веб-страницы. Так, в примере 2 фон страницы задан белым и такого же цвета используется граница, которая добавляется к селектору TABLE.

    Пример 2. Таблица без внешней рамки

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
     <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Таблица</title>
      <style type="text/css">
       BODY {
        background: white; /* Цвет фона веб-страницы */
       }
       TABLE {
        width: 300px; /* Ширина таблицы */
        border-collapse: collapse; /* Убираем двойные линии между ячейками */
        border: 2px solid white; /* Прячем рамку вокруг таблицы */
       }
       TD, TH {
        padding: 3px; /* Поля вокруг содержимого таблицы */
        border: 1px solid maroon; /* Параметры рамки */
        text-align: left; /* Выравнивание по левому краю */
       }
      </style>
     </head>
     <body>
      <table>
       <tr>
        <th>&nbsp;</th><th>2004</th><th>2005</th><th>2006</th>
       </tr>
       <tr>
        <td>Рубины</td><td>43</td><td>51</td><td>79</td>
       </tr>
       <tr>
        <td>Изумруды</td><td>28</td><td>34</td><td>48</td>
       </tr>
       <tr>
        <td>Сапфиры</td><td>29</td><td>57</td><td>36</td>
       </tr>
      </table>
     </body>
    </html>

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

    Рамка и отступы таблицы (свойства border-spacing, empty-cells, border-collapse)

    Как сделать рамку для таблицы

    Вид, толщину, цвет рамки таблицы определяет свойство border. Его можно указать в атрибуте style.

    Ячейка Ячейка
    Ячейка Ячейка
    <table style="border: 1px solid red;">
      <tr>
        <td>Ячейка
        <td>Ячейка
      <tr>
        <td>Ячейка
        <td>Ячейка
    </table>

    Установить рамку каждой ячейке также можно с помощью атрибута style. Но предпочтительней стиль вынести в тег style или файл .css: кода меньше, возможности шире, удобства больше (чтобы изменить цвет рамки у всех ячеек, достаточно поменять значение один раз).

    Ячейка Ячейка
    Ячейка Ячейка
    <table style="border: 1px solid red;">
      <tr>
        <td style="border: 1px solid red;">Ячейка
        <td style="border: 1px solid red;">Ячейка
      <tr>
        <td style="border: 1px solid red;">Ячейка
        <td style="border: 1px solid red;">Ячейка
    </table>
    
    
    
    <style>
    .raz,
    .raz td {
      border: 1px solid red;
    }
    </style>
    
    <table class="raz">
      <tr>
        <td>Ячейка
        <td>Ячейка
      <tr>
        <td>Ячейка
        <td>Ячейка
    </table>

    Убрать промежутки от ячеек до краёв таблицы

    Ячейка Ячейка Ячейка
    Ячейка Ячейка Ячейка
    Ячейка Ячейка Ячейка
    Ячейка Ячейка Ячейка
    <style>
    
    
    
    .raz {
      border-spacing: 0;
      padding: 0 2em 3em 0;  
    }
    .raz,
    .raz td {
      position: relative;
      border: 1px solid red;
    }
    .raz td:nth-child(2) {
      left: 1em;
    }
    .raz td:nth-child(3) {
      left: 2em;  
    }
    .raz tr:nth-child(2) td {
      top: 1em;
    }
    .raz tr:nth-child(3) td {
      top: 2em;
    }
    .raz tr:nth-child(4) td {
      top: 3em;
    }
    </style>
    
    <table>
      <tr>
        <td>Ячейка
        <td>Ячейка
        <td>Ячейка
      <tr>
        <td>Ячейка
        <td>Ячейка
        <td>Ячейка
      <tr>
        <td>Ячейка
        <td>Ячейка
        <td>Ячейка
      <tr>
        <td>Ячейка
        <td>Ячейка
        <td>Ячейка
    </table>

    Скрыть пустые ячейки в таблице c border-collapse: collapse; можно с помощью псевдоклассов :empty или :blank.

    border-collapse: схлопывание границ ячеек

    separate
    у каждой ячейки и таблицы в целом своя граница, игнорируется свойство border у thead, tfoot, tbody и tr
    collapse
    между ячейками и контейнером единая граница, отсутствуют двойные рамки таблицы, игнорируются свойства border-spacing, empty-cells, padding у table
    initial
    separate
    inherit
    наследует значение родителя
    unset
    наследует значение родителя
    Ячейка Ячейка
    Ячейка Ячейка
    <style>
    .raz {
      border-collapse: collapse; 
    }
    .raz,
    .raz td {
      border: 1px solid red;
    }
    .raz tbody,
    .raz tr,
    .raz td {
      margin: 1em; 
    }
    .raz tbody,
    .raz tr {
      padding: 1em; 
    }
    </style>
    
    <table>
      <tbody>
        <tr>
          <td>Ячейка
          <td>Ячейка
        <tr>
          <td>Ячейка
          <td>Ячейка
    </table>

    Жирные внешние границы таблицы

    Ячейка Ячейка
    Ячейка Ячейка
    <style>
    .raz {
      border-collapse: collapse;
      border: 4px solid red;
    }
    .raz td {
      border: 1px solid red;
    }
    </style>
    
    <table>
      <tr>
        <td>Ячейка
        <td>Ячейка
      <tr>
        <td>Ячейка
        <td>Ячейка
    </table>

    Таблица без границ аки сетка без внешней рамки

    Ячейка Ячейка
    Ячейка Ячейка
    <style>
    .raz {
      border-collapse: collapse;
      border-style: hidden;
    }
    .raz td {
      border: 1px solid red;
    }
    </style>
    
    <table>
      <tr>
        <td>Ячейка
        <td>Ячейка
      <tr>
        <td>Ячейка
        <td>Ячейка
    </table>

    Свойство border у tr

    Заголовок Заголовок
    Ячейка Ячейка
    Ячейка Ячейка
    <style>
    .raz {
      border-collapse: collapse;
    }
    .raz tr:first-child {
      border-bottom: 1px solid red;
    }
    .raz th+th,
    .raz td+td {
      padding-left: 1em;  
    }
    </style>
    
    <table>
      <tr>
        <th>Заголовок
        <th>Заголовок
      <tr>
        <td>Ячейка
        <td>Ячейка
      <tr>
        <td>Ячейка
        <td>Ячейка
    </table>

    Свойство padding у table при border-collapse: collapse;

    Ячейка Ячейка
    Ячейка Ячейка
    <style>
    .raz {
      border-collapse: collapse;
      outline: 1px solid red;  
      outline-offset: 2px;
      margin: 3px;  
    }
    .raz,
    .raz td {
      border: 1px solid red;
    }
    </style>
    
    <table>
      <tr>
        <td>Ячейка
        <td>Ячейка
      <tr>
        <td>Ячейка
        <td>Ячейка
    </table>

    Отступы внутри ячейки таблицы

    Расстояние от содержимого до края ячейки определяет свойство padding.

    Ячейка Ячейка
    Ячейка Ячейка
    <style>
    .raz {
      border-collapse: collapse;
    }
    .raz td {
      border: 1px solid red;
      padding: .3em 1em;  
    }
    </style>
    
    <table>
      <tr>
        <td>Ячейка
        <td>Ячейка
      <tr>
        <td>Ячейка
        <td>Ячейка
    </table>

    border-spacing | CSS | WebReference

    Задаёт расстояние между границами ячеек в таблице. border-spacing не работает в случае, когда для таблицы установлено свойство border-collapse со значением collapse.

    Краткая информация

    Значение по умолчанию0
    НаследуетсяДа
    ПрименяетсяК таблицам
    АнимируетсяНет

    Синтаксис ?

    border-spacing: <размер> [<размер>]

    Обозначения

    ОписаниеПример
    <тип>Указывает тип значения.<размер>
    A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
    A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
    A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
    [ ]Группирует значения.[ crop || cross ]
    *Повторять ноль или больше раз.[,<время>]*
    +Повторять один или больше раз.<число>+
    ?Указанный тип, слово или группа не является обязательным.inset?
    {A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
    #Повторять один или больше раз через запятую.<время>#
    ×

    Значения

    Одно значение устанавливает одновременно расстояние по вертикали и горизонтали между границами ячеек. Если значений два, то первое определяет горизонтальное расстояние, а второе — вертикальное.

    Пример

    <!DOCTYPE html>
    <html>
     <head>
      <meta charset="utf-8">
      <title>border-spacing</title>
      <style>
       table {
        border: 4px double #333; /* Рамка вокруг таблицы */ 
        border-collapse: separate; /* Способ отображения границы */ 
        width: 100%; /* Ширина таблицы */ 
        border-spacing: 7px 11px; /* Расстояние между ячейками */ 
       }
       td {
        padding: 5px; /* Поля вокруг текста */ 
        border: 1px solid #a52a2a; /* Граница вокруг ячеек */ 
       }
      </style>
     </head>
     <body>
      <table>
       <tr>
        <td>1</td><td>2</td>
       </tr>
       <tr>
        <td>3</td><td>4</td>
       </tr>
      </table>
     </body>
    </html>

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

    Применение свойства border-spacing

    Рис. 1. Применение свойства border-spacing

    Объектная модель

    Объект.style.borderSpacing

    Примечание

    Если к элементу <table> добавлен атрибут cellspacing, то при использовании стилевого свойства border-spacing атрибут cellspacing не принимается во внимание и его значение игнорируется.

    Спецификация ?

    Спецификация

    Каждая спецификация проходит несколько стадий одобрения.

    • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
    • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
    • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
    • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
    • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
    • Draft (Черновик спецификации) — первая черновая версия стандарта.
    ×

    Браузеры

    В таблице браузеров применяются следующие обозначения.

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

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

    ×

    Автор и редакторы

    Автор: Влад Мержевич

    Последнее изменение: 10.01.2019

    Редакторы: Влад Мержевич

    Курс по вёрстке сайта на CSS Grid

    Убрать границы таблицы css стилей с помощью свойства border

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

    Именно поэтому в сегодняшней публикации я расскажу, как убрать границы таблицы css-средствами. Это очень простая тема и вы быстро ее освоите. Так что давайте побыстрее приступим к делу!

    В каких случаях могут пригодиться знания о прозрачных границах?

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

    Что касается меня, то я не исключение и частенько прибегаю к такому способу презентации информации для вас.

    Однако помимо традиционного предназначения таблицы еще используют в верстке. В широких кругах она известна как табличная верстка. Конечно современные и профессиональные сайты отдают предпочтение типу верстки при помощи такого тега html, как div, но это не мешает подавляющему количеству веб-ресурсов создаваться при помощи таблиц с прозрачными границами.

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

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

     

    Данное свойство также отвечает за толщину и цвет границ. К тому же можно устанавливать уникальные параметры для каждой стороны отдельно, если конкретно указать часть рамки (например, border-left). Для полной прозрачности всех границ достаточно написать: border:0.

    Программная реализация прозрачных границ

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=utf-8">
    <title>Пример 1</title>
    <style type="text/css">
    body { background: #FA8072; margin:0;}
    TABLE {
    background: #fff;
    width: 90%;
    margin: 5% 5% 0 5%;
    border-left: 11px double #b0e0e6;
    border-right: 11px double #b0e0e6;
    }
    TD {
    padding: 15px;
    text-align:center;
    }
    TH {
    background: #b0e0e6;
    font-size: 35px;
    color:#FA8072;
    text-shadow: -3px 1px 9px #A52A2A;
    padding: 19px;
    }
    </style>
    </head>
    <body>
    <table>
    <tr>
    <th colspan="4">Журнал моды. Ведущие направления 2016 года</th>
    </tr>
    <tr>
    <td><img src="http://yavmode.ru/wp-content/uploads/2015/11/Ermanno-Scervino.jpg"  alt="lorem"></td>
    <td><img src="http://ohfashion.ru/wp-content/uploads/2015/04/Devushka-demonstriruyushhaya-idealnyiy-primer-kostyuma-s-topom-byuste.jpg"  alt="lorem"></td>
    <td><img src="http://www.prelest.com/files/styles/insert1000/public/bodyimg/ulichnaya_moda_vesna16_i.jpg?itok=Kj8_4lWw"  alt="lorem"></td>
    <td><img src="http://www.prelest.com/files/styles/insert1000/public/bodyimg/ulichnaya_moda_vesna16_l.jpg?itok=C2splJQt"  alt="lorem"></td>
    </tr>
    <tr>
    <td  colspan="4">В текущем году ценятся теплые и яркие цвета, также не остаются в стороне классические и светлые оттенки. Лидером стал минимализм во всем.</td>
    </tr>
    </table>
    </body>
    </html>

    <!DOCTYPE html> <html> <head> <meta charset=utf-8″> <title>Пример 1</title> <style type=»text/css»> body { background: #FA8072; margin:0;} TABLE { background: #fff; width: 90%; margin: 5% 5% 0 5%; border-left: 11px double #b0e0e6; border-right: 11px double #b0e0e6; } TD { padding: 15px; text-align:center; } TH { background: #b0e0e6; font-size: 35px; color:#FA8072; text-shadow: -3px 1px 9px #A52A2A; padding: 19px; } </style> </head> <body> <table> <tr> <th colspan=»4″>Журнал моды. Ведущие направления 2016 года</th> </tr> <tr> <td><img src=»http://yavmode.ru/wp-content/uploads/2015/11/Ermanno-Scervino.jpg» alt=»lorem»></td> <td><img src=»http://ohfashion.ru/wp-content/uploads/2015/04/Devushka-demonstriruyushhaya-idealnyiy-primer-kostyuma-s-topom-byuste.jpg» alt=»lorem»></td> <td><img src=»http://www.prelest.com/files/styles/insert1000/public/bodyimg/ulichnaya_moda_vesna16_i.jpg?itok=Kj8_4lWw» alt=»lorem»></td> <td><img src=»http://www.prelest.com/files/styles/insert1000/public/bodyimg/ulichnaya_moda_vesna16_l.jpg?itok=C2splJQt» alt=»lorem»></td> </tr> <tr> <td colspan=»4″>В текущем году ценятся теплые и яркие цвета, также не остаются в стороне классические и светлые оттенки. Лидером стал минимализм во всем.</td> </tr> </table> </body> </html>

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

    Пока-пока!

    С уважением, Роман Чуешов

    Загрузка…

    Прочитано: 172 раз

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

    Ваш адрес email не будет опубликован.