Таблица CSS - httpdoc.ru

Таблицы CSS

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

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

  • граница
  • граница-коллапс
  • набивка
  • ширина
  • выравнивание текста
  • цвет
  • фоновый цвет

Граница таблицы CSS

Границы таблицы могут быть установлены для тегов table , th и td с помощью border свойства.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Table Border </title> 
  <meta charset="UTF-8">  
<style>
table, th, td {
    border: 1px solid black;
}
</style>
</head>

<body>
<h3>Add a border to a table with CSS:</h3>
<table style=" border: 1px solid black; width:50%;">
 <tr>
  <th>Firstname</th>
  <th>Lastname</th>
  <th>Marks</th>
 </tr>
 
 <tr>
  <td>Mohit</td>
  <td>Negi</td>
  <td>97%</td>
 </tr>

  <tr>
   <td>John</td>
   <td>Snow</td>
   <td>99%</td>

  </tr>
   <tr>
   <td>Peter</td>
   <td>Dinklage</td>
   <td>89%</td>
  </tr> 

  <tr>
   <td>Arya</td>
   <td>Stark</td>
   <td>95%</td>

  </tr>
   <tr>
   <td>Ned</td>
   <td>Stark</td>
   <td>55%</td>
  </tr>
</table>
</body>
</html>

Выход

CSS Table Border
Имя Фамилия Метки
Мохит Неги 97%
Джон Снег 99%
Питер Динклэйдж 89%
Арья Старк 95%
Нед Старк 55%

Свернуть границу таблицы

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

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Table Border Collapse </title> 
  <meta charset="UTF-8">  
<style>
table {
  border-collapse: collapse;
  width: 50%;
 }

 table, td, th {
  border: 1px solid black;
 }
</style>
</head>

<body>
<h3>Let the borders collapse:</h3>
<table>
  <tr>
  <th>Firstname</th>
  <th>Lastname</th>
  <th>Marks</th>
 </tr>
 
 <tr>
  <td>Mohit</td>
  <td>Negi</td>
  <td>97%</td>
 </tr>

  <tr>
   <td>John</td>
   <td>Snow</td>
   <td>99%</td>

  </tr>
   <tr>
   <td>Peter</td>
   <td>Dinklage</td>
   <td>89%</td>
  </tr> 

  <tr>
   <td>Arya</td>
   <td>Stark</td>
   <td>95%</td>

  </tr>
   <tr>
   <td>Ned</td>
   <td>Stark</td>
   <td>55%</td>
  </tr>
</table>
</body>
</html>

Выход

CSS Table Border Collapse
Имя Фамилия Метки
Мохит Неги 97%
Джон Снег 99%
Питер Динклэйдж 89%
Арья Старк 95%
Нед Старк 55%

Примечание. Если! DOCTYPE не указан, свойство border-collapse может привести к неожиданным результатам в IE8 и более ранних версиях.

Обивка стола

Перетяжка создает пространство между border и cells таблицы. Заполнение таблиц не является специальным заполнением для таблиц, это обычное заполнение CSS, которое используется в приведенном ниже примере таблицы.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Table Padding </title> 
  <meta charset="UTF-8">  
<style>
 table, td, th {    
  border: 1px solid #ddd;
  text-align: left;
 }

table {
  border-collapse: collapse;
 }

th, td {
  padding: 10px;
 }
</style>
</head>

<body>
<h2>The padding Property</h2>
<table style="width: 100%;">
   <tr>
  <th>Firstname</th>
  <th>Lastname</th>
  <th>Marks</th>
 </tr>

  <tr>
   <td>John</td>
   <td>Snow</td>
   <td>99%</td>

  </tr>
   <tr>
   <td>Peter</td>
   <td>Dinklage</td>
   <td>89%</td>
  </tr> 

  <tr>
   <td>Arya</td>
   <td>Stark</td>
   <td>95%</td>

  </tr>
   <tr>
   <td>Ned</td>
   <td>Stark</td>
   <td>55%</td>
  </tr>
</table>
</body>
</html>

Выход

CSS Table Padding
Имя Фамилия Метки
Джон Снег 99%
Питер Динклэйдж 89%
Арья Старк 95%
Нед Старк 55%

Ширина и высота стола

Как следует из названия, ширина и высота таблицы определяются по width и height свойствам.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Table Height and Width </title> 
  <meta charset="UTF-8">  

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

 table {
  border-collapse: collapse;
  width: 100%;
 }

 th {
  height: 50px;
 }
</style>
</head>

<body>
<h2>The width and height Properties</h2>
<p>Set the width of the table, and the height of the table header row:</p>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Brown</td>
    <td>$250</td>
</tr>
</table>

</body>
</html>

Выход

CSS Table Height and Width
Имя Фамилия Экономия
Питер Грифон 100 долларов США
Лоис Грифон 150 долларов США
Джо Swanson 300 долларов США
Кливленд коричневый 250 долл. США

Выравнивание текста

Горизонтальное выравнивание

text-align Свойство используется , чтобы установить горизонтальное выравнивание содержания в <th> или <td> метки. Возможные значения могут быть - left , right , center .

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Table Text Alignment </title> 
  <meta charset="UTF-8"> 
<style>
table, td, th {
    border: 1px solid black;
}

table {
    border-collapse: collapse;
    width: 100%;
}
th{
  text-align: center;
}
</style>
</head>
<body>
<table>
  <tr>
    <th style="text-align: center;">Firstname</th>
    <th  style="text-align: center;">Lastname</th>
    <th  style="text-align: center;">Savings</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Brown</td>
    <td>$250</td>
</tr>
</table>

</body>
</html>

Выход

CSS Table Text Alignment
Имя Фамилия Экономия
Питер Грифон 100 долларов США
Лоис Грифон 150 долларов США
Джо Swanson 300 долларов США
Кливленд коричневый 250 долл. США

Вертикальное выравнивание

vertical-align Свойство используется для установки вертикального выравнивания содержимого в <th> или <td> меток. Возможные значения могут быть - top , bottom или middle .

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Table Vertical Alignment </title> 
  <meta charset="UTF-8"> 
<style>
table, td, th {
 border: 1px solid black;
}

table {
 border-collapse: collapse;
 width: 100%;
}
#tablec{
 height: 50px;
 vertical-align: bottom;
}
</style>
</head>

<body>
<h3>The vertical-align Property</h3>
<p>This property sets the vertical alignment (like top, bottom, or middle) of the content in th or td.</p>
<table>
 <tr>
  <th>Firstname</th>
  <th>Lastname</th>
  <th>Savings</th>
 </tr>
 <tr id="tablec">
  <td>Peter</td>
  <td>Griffin</td>
  <td>$100</td>
 </tr>
 <tr id="tablec">
  <td>Lois</td>
  <td>Griffin</td>
  <td>$150</td>
 </tr>
 <tr id="tablec">
  <td>Joe</td>
  <td>Swanson</td>
  <td>$300</td>
 </tr>
 <tr id="tablec">
  <td>Cleveland</td>
  <td>Brown</td>
  <td>$250</td>
 </tr>
</table>
</body>
</html>

Выход

CSS Table Vertical Alignment
Имя Фамилия Экономия
Питер Грифон 100 долларов США
Лоис Грифон 150 долларов США
Джо Swanson 300 долларов США
Кливленд коричневый 250 долл. США

Цвет таблицы

Цвет фона таблицы можно изменить с помощью обычных свойств CSS, таких как, background-color а также можно изменить цвет текста с помощью color свойства.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Table Color </title> 
  <meta charset="UTF-8"> 
<style>
 table {
  border-collapse: collapse;
  width: 100%;
 }

 th, td {
  text-align: left;
 }

 #color {
  background-color: seagreen;
  color: white;
 }
</style>
</head>

<body>
<h2>Colored Table Header</h2>
<table>
  <tr>
    <th  id="color">Firstname</th>
    <th id="color">Lastname</th>
    <th id="color">Savings</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Brown</td>
    <td>$250</td>
</tr>
</table>
</body>
</html>

Выход

CSS Table Color
Имя Фамилия Экономия
Питер Грифон 100 долларов США
Лоис Грифон 150 долларов США
Джо Swanson 300 долларов США
Кливленд коричневый 250 долл. США

Подвижный стол

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

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Table Hover </title> 
  <meta charset="UTF-8"> 
<style>
 table {
  border-collapse: collapse;
  width: 100%;
 }

 th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid gray;
 }

 tr:hover{ background-color:seagreen }
</style>
</head>

<body>
<h2>Hoverable Table</h2>
<p>Move the mouse over the table rows to see the effect.</p>
<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Brown</td>
    <td>$250</td>
  </tr>
</table>
</body>
</html>

Выход

CSS Table Hover
Имя Фамилия Точки
Питер Грифон 100 долларов США
Лоис Грифон 150 долларов США
Джо Swanson 300 долларов США
Кливленд коричневый 250 долл. США