Благодаря языку CSS можно настраивать внешний вид таблицы по очень значительному числу параметров, о которых я бы и хотел рассказать далее.
Первое что мы будем изменять в нашей таблице это её размеры и делается это достаточно легко:
<!Doctype html>
<html lang="ru-RU">
<head>
<meta charset=windows-1251>
<title>CSS стилизация таблиц</title>
<style type="text/css">
.table {
width: 600px;
height: 250px;
}
th {
height: 50px;
{
</style>
</head>
<body>
<table border="1" class="table">
<tr>
<th>Четные</th>
<th>Не четные</th>
<th>Нули</th>
<th>Единицы</th>
</tr>
<tr>
<td>4</td>
<td>3</td>
<td>0</td>
<td>1</td>
</tr>
</table>
</body>
</html>
В браузере видим следующий результат:
Для изменения размеров таблицы используются всего два параметра это ширина width и высота height, задать их можно как в пикселях, что даст нам фиксированный размер таблицы, так и в процентах, что сделает таблицу адаптивной. Я сделал отдельный класс и назвал его table, для того чтобы не все таблицы на сайте имели данные размеры, а только те к которым присвоен этот класс, и задал отдельную высоту заголовкам th, а вот они теперь будут во всех таблицах документа иметь высоту 50px, но если вам это не надо, то можете просто придумать любой селектор классов и задать эти свойства.
<!Doctype html>
<html lang="ru-RU">
<head>
<meta charset=windows-1251>
<title>CSS фон таблиц</title>
<style type="text/css">
.table {
width: 600px;
height: 250px;
background: url('38.jpg');
}
th {
height: 50px;
background: #ff0000;
{
</style>
</head>
<body>
<table border="1" class="table">
<tr>
<th>Четные</th>
<th>Не четные</th>
<th>Нули</th>
<th>Единицы</th>
</tr>
<tr>
<td>4</td>
<td>3</td>
<td>0</td>
<td>1</td>
</tr>
</table>
</body>
</html>
В браузере видим следующий результат:
Как вы могли заметить я применил два разных фона в одной таблице, это было сделано для большей наглядности, возможностей. В первом случае я задал фон с использованием рисунка с помощью background: url('38.jpg');, а во втором случае применил обычный красный фон background: url('38.jpg');, который лег поверх фона рисунка. Я думаю здесь все просто, поэтому мы движемся далее:
Здесь есть свои особенности, так как тут у нас происходит столкновение html и css, и нужно знать кое какие особенности. Итак первый вариант:
<!Doctype html>
<html lang="ru-RU">
<head>
<meta charset=windows-1251>
<title>Рамки таблиц в CSS</title>
<style type="text/css">
.table {
width: 600px;
height: 250px;
border-color: #ff0000;
}
</style>
</head>
<body>
<table border="1" cellspacing="0" class="table">
<tr>
<th>Четные</th>
<th>Не четные</th>
<th>Нули</th>
<th>Единицы</th>
</tr>
<tr>
<td>4</td>
<td>3</td>
<td>0</td>
<td>1</td>
</tr>
</table>
</body>
</html>
В браузере:
В этом варианте мы делаем обычную рамку одним цветом, цвет задаем параметром border-color: #ff0000;, казалось бы ни чего сложного но есть и тут момент, эта рамка у нас будет толщиной максимум 1 пиксель и мы убираем пробелы между рамками с помощью атрибута cellspacing="0", и только тогда у нас получится красивая монотонная рамка. Попробуйте убрать атрибут cellspacing и увидите разницу между, ячейками и основной рамкой будут однопиксельные пробелы, или же поставьте любое значение скажем 5 и вы еще более наглядно все увидите. Естественно, можно сделать рамки и другими вот второй вариант с более расширенными настройками:
<!Doctype html>
<html lang="ru-RU">
<head>
<meta charset=windows-1251>
<title>Рамки таблиц</title>
<style type="text/css">
.table {
width: 600px;
height: 250px;
border-width: 10px;
border-style: dotted;
border-color: #ff0000;
}
th {
height: 50px;
border-width: 5px;
border-style: solid;
border-color: #000000;
{
</style>
</head>
<body>
<table border="1" class="table">
<tr>
<th>Четные</th>
<th>Не четные</th>
<th>Нули</th>
<th>Единицы</th>
</tr>
<tr>
<td>4</td>
<td>3</td>
<td>0</td>
<td>1</td>
</tr>
</table>
</body>
</html>
В браузере:
Здесь мы уже применили стили рамок для обрисовки общей таблицы мы применили border-style: dotted;, и задали ширину рамки border-width в 10 пикселей, так же мы отдельно обрисовали заголовки th для наглядности установив для них другой цвет и стиль border-style: solid, и мы не прописали атрибут cellspacing, и получил пробелы между рамками в 1 пиксель, так как это значение присваивается автоматически если вы его не опишите сами.
<!Doctype html>
<html lang="ru-RU">
<head>
<meta charset=windows-1251>
<title>Отступы и выравнивание в таблицах</title>
<style type="text/css">
.table {
width: 600px;
height: 250px;
padding: 10px;
text-align: center;
}
th {
padding: 30px;
}
</style>
</head>
<body>
<table border="1" class="table">
<tr>
<th>Четные</th>
<th>Не четные</th>
<th>Нули</th>
<th>Единицы</th>
</tr>
<tr>
<td>4</td>
<td>3</td>
<td>0</td>
<td>1</td>
</tr>
</table>
</body>
</html>
В браузере видим:
На самом деле сложного здесь ни чего нет, все отступы в таблицах мы задаем при помощи параметра padding который дает нам отступ от внутренних стенок, если мы присваиваем этот параметр тегу <table> то соответственно все что внутри него будет смещено от краёв на 10 пикселей, как в примере, но это практически неприменимо, так как на практике в этом нет ни какой необходимости, а вот отступ в ячейка это уже как раз самый распространенный момент, я в примере сделал отступ от <th>, можно так же легко это сделать и для тега <td>, тут как говориться по необходимости. Выравнивание в ячейках у нас осуществляется просто и легко по средствам параметра text-align и в примере я его выравнивал по центру.
И напоследок очень интересное свойство, которое так же можно применить не только к таблицам и появилось оно только в CSS3, поэтому оно достаточно новое, это тень, делается это достаточно легко добавление простого параметра box-shadow: 0 0 15px #000; где первые два значения это от сдвиг по оси х и у, третье это радиус размытия и цвет.
В этом уроке мы все плотнее и плотнее знакомились с css, узнали новые параметры которые можно применять не только с таблицами и подробно разобрали все основные моменты css стилизации таблиц. Сложного я думаю здесь ни чего нет и вы без проблем сможете сделать, то что вам необходимо, тренируйтесь, пробуйте.
Дата публикации:2014-05-22
Буду очень признателен, если вы поделитесь ссылкой на страницу со своими друзьями в социальных сетях.
Если у вас возникнут вопросы по теме пишите, надеюсь у вас все получиться, удачи вам и всего наилучшего!
Нашли ошибку в тексте!!!
Просто выделите её мышкой, нажмите Ctrl+Enter.
И мы все исправим.
