Дизайн таблиц и ячеек при помощи css

Для изменения вида таблиц и ячеек будем использовать CSS

Простая таблица (html)

<table border="1" cellpadding="0" cellspacing="0" width="70%" align="center">
<tr>
<td width="33%">текст</td>
<td width="33%">текст</td>
<td width="34%">текст</td>
</tr>
<tr>
<td width="33%">текст</td>
<td width="33%">текст</td>
<td width="34%">текст</td>
</tr>
<tr>
<td width="33%">текст</td>
<td width="33%">текст</td>
<td width="34%">текст</td>
</tr>
</table>

Результат

Добавляем идентификатор и классы

Убираем из html кода таблицы все лишнее, добавляем id и class

<table id="table1">
<tr>
<td class="td1">текст</td>
<td class="td2">текст</td>
<td class="td3">текст</td>
</tr>
<tr>
<td class="td4">текст</td>
<td class="td5">текст</td>
<td class="td6">текст</td>
</tr>
<tr>
<td class="td7">текст</td>
<td class="td8">текст</td>
<td class="td9">текст</td>
</tr>
</table>

Пишем CSS

Используйте семантически правильные имена классов, которые описывают то, что делает элемент, а не то, как он выглядит.

#table1 {
margin : 0 auto;
padding : 0;
border-collapse: collapse;
width:70%;
}
.td1 {
margin : 0;
padding : 7px 9px 7px 9px;
background-color:green;
color : white;
}
.td2 {
margin : 0;
padding : 7px 9px 7px 9px;
background-color:red;
color : moccasin;
}
.td3 {
margin : 0;
padding : 7px 9px 7px 9px;
background-color:coral;
color : brown;
}
.td4 {
margin : 0;
padding : 7px 9px 7px 9px;
background-color:chocolate;
color : bisque;
}
.td5 {
margin : 0;
padding : 7px 9px 7px 9px;
background-color:gold;
color : sienna;
}
.td6 {
margin : 0;
padding : 7px 9px 7px 9px;
background-color:aqua;
color : teal;
}
.td7 {
margin : 0;
padding : 7px 9px 7px 9px;
background-color:magenta;
color : darkred;
}
.td8 {
margin : 0;
padding : 7px 9px 7px 9px;
background-color:tan;
color : maroon;
}
.td9 {
margin : 0;
padding : 7px 9px 7px 9px;
background-color:silver;
color : black;
}

Результат

Объединим повторяющиеся параметры

Для уменьшения веса файла CSS объединим повторяющиеся параметры

#table1 {
margin : 0 auto;
padding : 0;
border-collapse: collapse;
width:70%;
}
.td1,.td2,.td3,.td4,.td5,.td6,.td7,.td8,.td9 {
margin : 0;
padding : 7px 9px 7px 9px;
}
.td1 {
background-color:green;
color : white;
}
.td2 {
background-color:red;
color : moccasin;
}
.td3 {
background-color:coral;
color : brown;
}
.td4 {
background-color:chocolate;
color : bisque;
}
.td5 {
background-color:gold;
color : sienna;
}
.td6 {
background-color:aqua;
color : teal;
}
.td7 {
background-color:magenta;
color : darkred;
}
.td8 {
background-color:tan;
color : maroon;
}
.td9 {
background-color:silver;
color : black;
}

Рисунок в виде фона таблицы и ячеек

Конструкция - background:green url(images/001.jpg); позволит использовать фоновый рисунок для выбранного элемента, а если по каким-то причинам рисунок не отобразится, фон элемента будет закрашен указанным цветом.

#table1 {
margin : 0 auto;
padding : 0;
width:70%;
border-collapse: collapse;
}
.td1,.td2,.td3,.td4,.td5,.td6,.td7,.td8,.td9 {
margin : 0;
padding : 7px 9px 7px 9px;
}
.td1 {
background:green url(images/001.jpg);
color : white;
}
.td2 {
background:red url(images/002.jpg);
color : moccasin;
}
.td3 {
background:coral url(images/003.jpg);
color : brown;
}
.td4 {
background:chocolate url(images/004.jpg);
color : bisque;
}
.td5 {
background:gold url(images/005.jpg);
color : sienna;
}
.td6 {
background:aqua url(images/006.jpg);
color : teal;
}
.td7 {
background:magenta url(images/007.jpg);
color : darkred;
}
.td8 {
background:tan url(images/008.jpg);
color : maroon;
}
.td9 {
background:silver url(images/009.jpg);
color : black;
}

Результат