Красивое оформление таблиц css – Красивое оформление таблиц

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

Красивые таблицы на CSS

Простая таблица на CSS3

Первая таблица, которую мы создадим.

Пример меню можно увидеть здесь:

Посмотреть примерСкачать

HTML часть

HTML каркас не содержит в себе ничего нового. Он выглядит следующим образом:

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

<table cellspacing="0">
    <tr>
        <th>Lorem ipsum</th>
        <th>Lorem ipsum</th>
        <th>Lorem ipsum</th>
    </tr>
    <tr>
        <td>Etiam dolor</td>
        <td>100%</td>
        <td>Нет</td>
    </tr>
    <tr>
        <td>Etiam dolor</td>
        <td>100%</td>
        <td>Да</td>
    </tr>
    <tr>
        <td>Etiam dolor</td>
        <td>50%</td>
        <td>Да</td>
    </tr>
    <tr>
        <td>Etiam dolor</td>
        <td>0%</td>
        <td>Да</td>
    </tr>
    <tr>
        <td>Etiam dolor</td>
        <td>100%</td>
        <td>Да</td>
    </tr>
</table>

CSS часть

Сейчас добавим стили нашей таблице:

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

table {
    overflow:hidden;
    border:1px solid #d3d3d3;
    background:#fefefe;
    width:70%;
    margin:5% auto 0;
    -moz-border-radius:5px; /* FF1+ */
    -webkit-border-radius:5px; /* Saf3-4 */
    border-radius:5px;
    -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}
 
th, td {
    padding:18px 28px 18px; 
    text-align:center; 
}
 
th {
    padding-top:22px; 
    text-shadow: 1px 1px 1px #fff;
    background:#e8eaeb;
}
 
td {
    border-top:1px solid #e0e0e0; 
    border-right:1px solid #e0e0e0;
}
 
tr.odd-row td {
    background:#f6f6f6;
}
 
td.first, th.first {
    text-align:left
}
 
td.last {
    border-right:none;
}
 
td {
    background: -moz-linear-gradient(100% 25% 90deg, #fefefe, #f9f9f9);
    background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe));
}
 
tr.odd-row td {
    background: -moz-linear-gradient(100% 25% 90deg, #f6f6f6, #f1f1f1);
    background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f1f1f1), to(#f6f6f6));
}
 
th {
    background: -moz-linear-gradient(100% 20% 90deg, #e8eaeb, #ededed);
    background: -webkit-gradient(linear, 0% 0%, 0% 20%, from(#ededed), to(#e8eaeb));
}
 
tr:first-child th.first {
    -moz-border-radius-topleft:5px;
    -webkit-border-top-left-radius:5px; /* Saf3-4 */
}
 
tr:first-child th.last {
    -moz-border-radius-topright:5px;
    -webkit-border-top-right-radius:5px; /* Saf3-4 */
}
 
tr:last-child td.first {
    -moz-border-radius-bottomleft:5px;
    -webkit-border-bottom-left-radius:5px; /* Saf3-4 */
}
 
tr:last-child td.last {
    -moz-border-radius-bottomright:5px;
    -webkit-border-bottom-right-radius:5px; /* Saf3-4 */
}

Подсветка строки при наведении

Пример меню можно увидеть здесь:

Посмотреть примерСкачать

HTML часть

Эта таблица немного больше прошлой, но структура очень похожа:

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

<table>
    <thead>
        <tr>
            <th>№</th>        
            <th>Top 10 фильмов</th>
            <th>Год</th>
        </tr>
    </thead>
    <tr>
        <td>1</td>        
        <td>Побег из Шоушенка</td>
        <td>1994</td>
    </tr>        
    <tr>
        <td>2</td>         
        <td>Крестный отец</td>
        <td>1972</td>
    </tr>
    <tr>
        <td>3</td>         
        <td>Крестный отец: Часть II</td>
        <td>1974</td>
    </tr>    
    <tr>
        <td>4</td> 
        <td>Хороший, плохой, злой</td>
        <td>1966</td>
    </tr>
    <tr>
        <td>5</td> 
        <td>Криминальное чтиво</td>
        <td>1994</td>
    </tr>
    <tr>
        <td>6</td> 
        <td>12 разгневанных мужчин</td>
        <td>1957</td>
    </tr>
    <tr>
        <td>7</td> 
        <td>Список Шиндлера</td>
        <td>1993</td>
    </tr>    
    <tr>
        <td>8</td> 
        <td>Пролетая над гнездом кукушки</td>
        <td>1975</td>
    </tr>
    <tr>
        <td>9</td> 
        <td>Темный рыцарь</td>
        <td>2008</td>
    </tr>
    <tr>
        <td>10</td> 
        <td>Властелин колец: Возвращение Короля</td>
        <td>2003</td>
    </tr> 
</table>

CSS часть

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

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

.bordered {
    border: solid #ccc 1px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 1px 1px #ccc; 
    -moz-box-shadow: 0 1px 1px #ccc; 
    box-shadow: 0 1px 1px #ccc;         
}
 
.bordered tr:hover {
    background: #fbf8e9;
    -o-transition: all 0.1s ease-in-out;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;     
}    
 
.bordered td, .bordered th {
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
    padding: 10px;
    text-align: left;    
}
 
.bordered th {
    background-color: #dce9f9;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));
    background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image:    -moz-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image:     -ms-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image:      -o-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image:         linear-gradient(top, #ebf3fc, #dce9f9);
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; 
    -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;  
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;        
    border-top: none;
    text-shadow: 0 1px 0 rgba(255,255,255,.5); 
}
 
.bordered td:first-child, .bordered th:first-child {
    border-left: none;
}
 
.bordered th:first-child {
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
    border-radius: 6px 0 0 0;
}
 
.bordered th:last-child {
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
    border-radius: 0 6px 0 0;
}
 
.bordered th:only-child{
    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
}
 
.bordered tr:last-child td:first-child {
    -moz-border-radius: 0 0 0 6px;
    -webkit-border-radius: 0 0 0 6px;
    border-radius: 0 0 0 6px;
}
 
.bordered tr:last-child td:last-child {
    -moz-border-radius: 0 0 6px 0;
    -webkit-border-radius: 0 0 6px 0;
    border-radius: 0 0 6px 0;
}

Тем, кому лень писать код самостоятельно!

Существует специальный сервис, который позволяет генерировать стили для таблиц, лишь передвигая ползунки. Я сделал видео об этом сервисе, которое находится ниже. Сервис находится по ссылке — tablestyler.com (был найден новый сервис и ссылка обновлена 2 июня 2017 года). На видео идет видеообзор старого сервиса, но и с новым вы разберетесь 🙂 .

Вывод

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

Успехов!

sitehere.ru

Оформление таблиц | WebReference

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

Ширина таблицы

По умолчанию ширина таблицы устанавливается браузером самостоятельно, исходя из объёма в ней табличных данных. Если текста в ячейках много, тогда таблица будет занимать всю доступную ей ширину, а если мало, то ширина таблицы автоматически уменьшится. При наличии на странице нескольких таблиц их разная ширина выглядит порой небрежно. Так что лучше явно задать ширину таблицы в процентах, пикселях, em или любых других единицах CSS, как показано в примере 1.

Пример 1. Ширина таблицы в процентах

table { width: 100%; }
.tbl-medium { width: 60%; }
.tbl-small { width: 200px; }

В данном примере ширина 100% применяется ко всем таблицам. Опять же, классы помогают установить ширину для выбранных таблиц задействуя ранее созданный класс. Чтобы указать таблице ширину в 200 пикселей надо добавить к элементу <table> класс tbl-small.

<table>

Выравнивание таблиц

Исходно любая таблица располагается по левому краю окна браузера. Можно выровнять её по центру, если только таблица не занимает всю доступную область, другими словами, меньше 100%. Для этого к стилю таблицы следует добавить отступы через свойство margin со значением auto, как показано в примере 2.

Пример 2. Выравнивание таблицы с помощью margin

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Таблица</title>
  <style>
   table {
    margin: auto; /* Выравнивание по центру */
   }
  </style>
 </head>
 <body>
  <table>
   ...
  </table>
 </body>
</html>

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

Цвет фона

Цвет фона одновременно всех ячеек таблицы устанавливается через свойство background, которое применяется к селектору table. При этом следует помнить о правилах использования стилей, в частности, наследовании свойств элементов. Если одновременно с table задать цвет у селектора td или th, то он и будет установлен в качестве фона (пример 3).

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Таблица</title>
  <style>
   table {
    background: #f5e8d0; /* Цвет фона таблицы */
    border-spacing: 0; /* Расстояние между ячеек */
   }
   th {
    background: #496791; /* Цвет фона ячеек */
    color: #fff; /* Цвет текста */
   }
   td, th {
    padding: 5px 10px; /* Поля в ячейках */
   }
  </style>
 </head>
 <body>
  <table>
   <tr>
    <th rowspan="2">Вид соединения</th>
    <th colspan="2">Поля допусков ширины шпоночного паза</th>
   </tr>
   <tr>
    <th>Вал</th><th>Втулка</th>
   </tr>
   <tr>
    <td>Свободное</td><td>H9</td><td>D10</td>
   </tr>
   <tr>
    <td>Нормальное</td><td>N9</td><td>I<sub>s</sub>9</td>
   </tr>
   <tr>
    <td>Плотное</td><td colspan="2">P9</td>
   </tr>
  </table>
 </body>
</html>

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

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

Если нам требуется сделать зебру — так называется чередование строк разного цвета, то следует воспользоваться псевдоклассом :nth-child, добавляя его к селектору tr. Чтобы зебра распространялась только на тело таблицы, а не её заголовок, отделим их друг от друга с помощью элементов <thead> и <tbody> (пример 4).

Пример 4. Создание зебры

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Таблица</title>
  <style>
   table {
    width: 100%; /* Ширина таблицы */
    border-collapse: collapse; /* Убираем двойные линии */
   }
   thead {
    background: #f5e8d0; /* Цвет фона заголовка */
   }
   td, th {
    padding: 5px; /* Поля в ячейках */
    border: 1px solid #333; /* Параметры рамки */
   }
   tbody tr:nth-child(even) {
    background: #f0f0f0; /* Зебра */
   }
  </style>
 </head>
 <body>
  <table>
   <thead>
    <tr>
     <th rowspan="2">Интервалы размеров, мм</th>
     <th colspan="4">Допуск IT, мкм, для квалитетов</th>
    </tr>
    <tr>
     <th>5</th><th>6</th><th>7</th><th>8</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td>До 3</td><td>4</td><td>6</td><td>10</td><td>14</td>
    </tr>
    <tr>
     <td>Св. 3 до 6</td><td>5</td><td>8</td><td>12</td><td>18</td>
    </tr>
    <tr>
     <td>Св. 6 до 10</td><td>6</td><td>9</td><td>15</td><td>22</td>
    </tr>
    <tr>
     <td>Св. 10 до 18</td><td>8</td><td>11</td><td>18</td><td>27</td>
    </tr>
    <tr>
     <td>Св. 18 до 30</td><td>9</td><td>13</td><td>21</td><td>33</td>
    </tr>
    <tr>
     <td>Св. 30 до 50</td><td>11</td><td>16</td><td>25</td><td>39</td>
    </tr>
    <tr>
     <td>Св. 50 до 80</td><td>13</td><td>19</td><td>30</td><td>46</td>
    </tr>
   </tbody>
  </table>
 </body>
</html>

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

Рис. 2. Зебра

Значение even у селектора :nth-child применяет стиль ко всем чётным строкам и задаёт их цвет фона. Можно, также, поменять его на odd, тогда серым цветом будут выделяться нечётные строки.

Аналогичным образом цветом выделяются не строки, а колонки, для этого следует использовать селектор tbody td:nth-child(even).

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

Полем называется расстояние между границей ячейки и её содержимым. Без полей текст в таблице «налипает» на рамку, ухудшая тем самым его восприятие, добавление же полей позволяет улучшить читабельность текста. Для этой цели применяется стилевое свойство padding, которое работает с селектором td или th, как показано выше в примерах 3 и 4. Обычно указывают одно значение, оно тогда задаёт пустое пространство вокруг содержимого ячейки сразу со всех сторон. Два значения пишутся, когда надо задать разные поля по вертикали (первое значение) и горизонтали (второе значение).

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

Между ячеек имеется небольшое пустое расстояние, которое не видно, пока для ячеек не установить границу или фоновый цвет. Исходно это расстояние равно 2px и его можно изменить с помощью свойства border-spacing, добавляя его к селектору table (пример 5).

Пример 5. Использование border-spacing

table {
 border-spacing: 3px; /* Расстояние между ячеек */
}
thead  th {
 background: #e08156; /* Цвет фона заголовка */
 color: #333; /* Цвет текста */
}
td, th {
 padding: 5px; /* Поля в ячейках */
 background: #4c715b; /* Цвет фона ячеек */
 color: #f5e8d0; /* Цвет текста */
}

Добавляя этот стиль к любой таблице получим результат продемонстрированный на рис. 3.

Рис. 3. Вид таблицы с расстоянием между ячеек

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

Границы и рамки

Чтобы чётко отделить содержимое одной ячейки от другой, к ячейкам добавляются границы. За их создание отвечает стилевое свойство border, которое применяется к элементам (<td> или <th>). Однако здесь нас подстерегают подводные камни. Поскольку рамка создаётся для каждой ячейки, то в местах соприкосновения ячеек получается граница удвоенной толщины. Для устранения указанной особенности существует несколько путей. Самый простой — воспользоваться свойством border-collapse со значением collapse. В его задачу входит отслеживать соприкосновение линий и вместо двойной границы изображать одинарную. Это свойство достаточно добавить к селектору table, а дальше оно всё сделает самостоятельно (пример 6).

Пример 6. Применение свойства border-collapse при создании рамок таблицы

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Таблица</title>
  <style>
   table {
    border-collapse: collapse; /* Убираем двойные линии */
    width: 100%; /* Ширина таблицы */
    border-spacing: 0; /* Расстояние между ячеек */
   }
   td {
    border: 2px solid #333; /* Параметры границ */
    padding: 4px; /* Поля в ячейках */
    text-align: center; /* Выравнивание по центру */
   }
  </style>
 </head>
 <body>
  <table>
   <tr><td>O</td><td>X</td><td>X</td></tr>
   <tr><td>O</td><td>O</td><td>X</td></tr>
   <tr><td>X</td><td>X</td><td>O</td></tr>
  </table>
 </body>
</html>

Разница между границами таблицы при добавлении свойства border-collapse, а также без него, представлена на рис. 4.

а — свойство не установлено

б — свойство установлено

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

На рис. 4а показана рамка таблицы, используемая по умолчанию. Обратите внимание, что внутри таблицы все линии имеют удвоенную толщину. Добавление border-collapse убирает эту особенность, и толщина всех линий становится одинаковой (рис. 4б).

Линии не обязательно делать для всех сторон ячеек, согласно дизайну они могут отделять одну строку или колонку от другой. Для этого мы используем свойства border-bottom, border-left и другие подобные. Применять границы к элементам <tr>, <thead>, <tfoot> и <tbody> нельзя, поэтому добавляем их к селектору table и td (пример 7).

Пример 7. Линии между строк

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Таблица</title>
  <style>
   table {
    width: 100%; /* Ширина таблицы */
    border-collapse: collapse; /* Убираем двойные линии */
    border-bottom: 2px solid #333; /* Линия снизу таблицы */
    border-top: 2px solid #333; /* Линия сверху таблицы */
   }
   td { 
    text-align: center; /* Выравнивание по центру */
    border-bottom: 1px solid #333;
    border-top: 1px solid #333;
   }
   td, th {
    padding: 5px; /* Поля в ячейках */
   }
  </style>
 </head>
 <body>
  <table>
   <thead>
    <tr>
     <th rowspan="2">Вид соединения</th>
     <th colspan="2">Поля допусков ширины шпоночного паза</th>
    </tr>
    <tr>
     <th>Вал</th><th>Втулка</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td>Свободное</td><td>H9</td><td>D10</td>
    </tr>
    <tr>
     <td>Нормальное</td><td>N9</td><td>I<sub>s</sub>9</td>
    </tr>
    <tr>
     <td>Плотное</td><td colspan="2">P9</td>
    </tr>
   </tbody>
  </table>
 </body>
</html>

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

Рис. 5. Таблица с горизонтальными линиями

Выравнивание текста в ячейках

По умолчанию текст в ячейке таблицы выравнивается по левому краю и по центру высоты. Исключением служит элемент <th>, он определяет ячейку заголовка, в котором выравнивание происходит по центру. Чтобы изменить способ выравнивания применяется стилевое свойство text-align (пример 8).

Пример 8. Выравнивание содержимого ячеек по горизонтали

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Таблица</title>
  <style>
   table {
    border-collapse: collapse; /* Убираем двойные линии */
    width: 100%; /* Ширина таблицы */
   }
   th { 
    background: #dfebb7; /* Цвет фона ячейки */
    text-align: left; /* Выравнивание по левому краю */
   }
   td {
    text-align: center; /* Выравнивание по центру */
   }
   th, td {
    border: 1px solid black; /* Параметры рамки */
    padding: 4px; /* Поля вокруг текста */
   }
  </style>
 </head>
 <body>
  <table>
   <tr><th>Заголовок 1</th><td>Ячейка 1</td><td>Ячейка 2</td></tr>
   <tr><th>Заголовок 2</th><td>Ячейка 3</td><td>Ячейка 4</td></tr>
  </table>
 </body>
</html>

В данном примере содержимое <th> выравнивается по левому краю, а содержимое <td> — по центру. Результат примера показан ниже (рис. 6).

Рис. 6. Выравнивание текста в ячейках

Выравнивание по вертикали в ячейке всегда происходит по её центру, если это не оговорено особо. Это не всегда удобно, особенно для таблиц, у которых содержимое ячеек различается по высоте. В таком случае выравнивание устанавливают по верхнему краю ячейки с помощью свойства vertical-align со значением top, как показано в примере 9.

Пример 9. Выравнивание содержимого ячеек по вертикали

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Таблица</title>
  <style>
   th {
    background: #496791; /* Цвет фона ячеек заголовка */
    color: #fff; /* Цвет текста */
   }
   td { 
    background: #f5e8d0; /* Цвет фона ячеек */
    text-align: center; /* Выравниваем по центру */
   }
   td, th {
    padding: 5px 10px; /* Поля в ячейках */
    vertical-align: top; /* Выравниваем по верхнему краю */
   }
  </style>
 </head>
 <body>
  <table>
   <tr>
    <th rowspan="2">Вид соединения</th>
    <th colspan="2">Поля допусков ширины шпоночного паза</th>
   </tr>
   <tr>
    <th>Вал</th><th>Втулка</th>
   </tr>
   <tr>
    <td>Свободное</td><td>H9</td><td>D10</td>
   </tr>
   <tr>
    <td>Нормальное</td><td>N9</td><td>I<sub>s</sub>9</td>
   </tr>
   <tr>
    <td>Плотное</td><td colspan="2">P9</td>
   </tr>
  </table>
 </body>
</html>

В данном примере выравнивание текста происходит по верхнему краю. Результат примера показан на рис. 7.

Рис. 7. Выравнивание текста в ячейках

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

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

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

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

webref.ru

CSS: Оформление HTML таблиц — рамка, размер, выравнивание текста

Табличные данные — информация, которую можно отобразить в виде таблицы и логически разделить по столбцам и строкам. Для отображения табличных данных на веб-страницах используется HTML тег <table>, представляющий из себя контейнер с содержимым таблицы. Контент HTML таблицы описывается построчно, каждая строка начинается с открывающего тега <tr> и заканчивается закрывающим тегом </tr>.

Внутри тега <tr> располагаются ячейки таблицы, представленные тегами <th> или <td>. Именно ячейки содержат весь контент таблицы, отображаемый на веб-странице.

Рамка таблицы

По умолчанию HTML таблица на веб-странице отображается без рамки, для добавления рамки к таблице, как и ко всем другим элементам, используется CSS свойство border. Но стоит обратить внимание на то, что если добавить рамку только к элементу <table>, то она отобразиться вокруг всей таблицы. Для того, чтобы ячейки таблицы тоже имели рамку, надо будет установить свойство border и для элементов <th> и <td>.

table, th, td { border: 1px solid black; }

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      table, td, th { 
	    border: 4px outset blue;
		border-spacing: 5px;
	  }
      .first { border-collapse: collapse; }
    </style>
  </head>

  <body>
    <table>
      <tr><th>Имя</th><th>Фамилия</th></tr>
      <tr><td>Гомер</td><td>Симпсон</td></tr>
      <tr><td>Мардж</td><td>Симпсон</td></tr>
    </table>
    <br>
    <table>
      <tr><th>Имя</th><th>Фамилия</th></tr>
      <tr><td>Гомер</td><td>Симпсон</td></tr>
      <tr><td>Мардж</td><td>Симпсон</td></tr>
    </table>
  </body>
</html>

th, td { padding: 7px; }

table { width: 70%; }
th { height: 50px; }

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      table, td, th {
        border: 1px solid black; 
        border-collapse: collapse;
      }
      table { width: 70% }
      td { text-align: right; }
      th { height: 50px; }
      .test1 { vertical-align: top; }
      .test2 { vertical-align: bottom; }
    </style>
  </head>

  <body>
    <table>
      <tr><th>Имя</th><th>Фамилия</th></tr>
      <tr><td>Гомер</td><td>Симпсон</td></tr>
      <tr><td>Мардж</td><td>Симпсон</td></tr>
    </table>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      table {
        width: 70%;
        border-collapse: collapse;
      }
      td, th {
        border: 1px solid #98bf21;
        padding: 3px 7px 2px 7px;
      }
      th {
        text-align: left;
        padding: 5px;
        background-color: #A7C942;
        color: #fff;
      }
      .alt td { background-color: #EAF2D3; }
    </style>
  </head>
  <body>
    <table>
      <tr><th>Имя</th><th>Фамилия</th><th>Положение</th></tr>
      <tr><td>Гомер</td><td>Симпсон</td><td>отец</td></tr>
      <tr><td>Мардж</td><td>Симпсон</td><td>мать</td></tr>
      <tr><td>Барт</td><td>Симпсон</td><td>сын</td></tr>
      <tr><td>Лиза</td><td>Симпсон</td><td>дочь</td></tr>
    </table>
  </body>
</html>

tr:nth-child(odd) { background-color: #EAF2D3; }

tr:hover { background-color: #E0E0FF; }

table { margin: 10px auto; }

table { margin: 10px auto 30px; }

table, th, td {
   border: 1px solid black;
}

table {
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
}

table {
    border: 1px solid black;
}

table {
    width: 100%;
}

th {
    height: 50px;
}

td {
    height: 50px;
    vertical-align: bottom;
}

th, td {
    padding: 15px;
    text-align: left;
}

th, td {
    border-bottom: 1px solid #ddd;
}

tr:hover {background-color: #f5f5f5}

tr:nth-child(even) {background-color: #f2f2f2}

th {
    background-color: #4CAF50;
    color: white;
}

<div>

<table>
... содержимое таблицы ...
</table>

</div>