Оформление таблицы | HTML/CSS

Простой код таблицы, которую будем стилизовать с помощью стилей CSS

<table class="demotable">
  <tr>
    <th>
    <th>Столбец 1
    <th>Столбец 2
    <th>Столбец 3
  <tr>
    <th>Строка 1
    <td>Ячейка 1.1
    <td></td>
    <td>Ячейка 1.3
  <tr>
    <th>Строка 2
    <td>Ячейка 2.1
    <td>Ячейка 2.2
    <td>Ячейка 2.3
  <tr>
    <th>Строка 3
    <td></td>
    <td>Ячейка 3.2
    <td>Ячейка 3.3
  <tr>
    <th>Строка 4
    <td>Ячейка 4.1
    <td>Ячейка 4.2
    <td>Ячейка 4.3
</table>

	Столбец 1	Столбец 2	Столбец 3
Строка 1	Ячейка 1.1		Ячейка 1.3
Строка 2	Ячейка 2.1	Ячейка 2.2	Ячейка 2.3
Строка 3		Ячейка 3.2	Ячейка 3.3
Строка 4	Ячейка 4.1	Ячейка 4.2	Ячейка 4.3

Провести рамку таблице

<style>
.demotable {
  border-collapse: collapse;
  border: 2px solid;
}
.demotable th, .demotable td {
  border: 1px solid;
}
</style>

	Столбец 1	Столбец 2	Столбец 3
Строка 1	Ячейка 1.1		Ячейка 1.3
Строка 2	Ячейка 2.1	Ячейка 2.2	Ячейка 2.3
Строка 3		Ячейка 3.2	Ячейка 3.3
Строка 4	Ячейка 4.1	Ячейка 4.2	Ячейка 4.3

Поменять фон у пустых ячеек

<style>
.demotable {
  border-collapse: collapse;
  border: 2px solid;
}
.demotable th, .demotable td {
  border: 1px solid;
}
.demotable td:empty {
  background: #ccc;
}
</style>

	Столбец 1	Столбец 2	Столбец 3
Строка 1	Ячейка 1.1		Ячейка 1.3
Строка 2	Ячейка 2.1	Ячейка 2.2	Ячейка 2.3
Строка 3		Ячейка 3.2	Ячейка 3.3
Строка 4	Ячейка 4.1	Ячейка 4.2	Ячейка 4.3

Сделать цветную заливку шапке и боковым заголовкам

<style>
.demotable {
  border-collapse: collapse;
  border: 2px solid;
}
.demotable th, .demotable td {
  border: 1px solid;
}
.demotable td:empty {
  background: #ccc;
}
.demotable th {
  background: #f5f8ec;
}
</style>

	Столбец 1	Столбец 2	Столбец 3
Строка 1	Ячейка 1.1		Ячейка 1.3
Строка 2	Ячейка 2.1	Ячейка 2.2	Ячейка 2.3
Строка 3		Ячейка 3.2	Ячейка 3.3
Строка 4	Ячейка 4.1	Ячейка 4.2	Ячейка 4.3

Строки таблицы меняют свой цвет при наведении курсора мышки

<style>
.demotable {
  border-collapse: collapse;
  border: 2px solid;
}
.demotable th, .demotable td {
  border: 1px solid;
}
.demotable td:empty {
  background: #ccc;
}
.demotable th {
  background: #f5f8ec;
}
.demotable tr:hover td:not(:empty) {
  background: yellow;
}
.demotable tr:nth-child(n+2):hover th {
  background: #d5e0cc;
}
</style>

	Столбец 1	Столбец 2	Столбец 3
Строка 1	Ячейка 1.1		Ячейка 1.3
Строка 2	Ячейка 2.1	Ячейка 2.2	Ячейка 2.3
Строка 3		Ячейка 3.2	Ячейка 3.3
Строка 4	Ячейка 4.1	Ячейка 4.2	Ячейка 4.3

Столбцы таблицы выделяются при наведении курсора мышки

Только на CSS не получится. Самый быстрый способ срабатывания скрипта.

<style id="stolbec2"></style><style id="stolbec3"></style><style id="stolbec4"></style>

<script>
document.querySelector('.stolbec').onmousemove = function() {
  for (var j = 2; j < 5; j++) {
    if(document.querySelectorAll('.stolbec th:nth-child(' + j + '):hover, .stolbec td:nth-child(' + j + '):hover').length){
      if(document.querySelector('#stolbec' + j).innerHTML == ''){
        document.querySelector('#stolbec' + j).innerHTML = '.stolbec th:nth-child(' + j + ') {background: #d5e0cc;} .stolbec td:nth-child(' + j + '):not(:empty) {background: yellow;}';
      }
    }else{
      document.querySelector('#stolbec' + j).innerHTML = '';
    }
  }
}
document.querySelector('.stolbec').onmouseout = function() {
  var style = document.querySelectorAll('style[id^="stolbec"]');
  for (var i = 0; i < style.length; i++)
    style[i].innerHTML = '';
}
</script>

	Столбец 1	Столбец 2	Столбец 3
Строка 1	Ячейка 1.1		Ячейка 1.3
Строка 2	Ячейка 2.1	Ячейка 2.2	Ячейка 2.3
Строка 3		Ячейка 3.2	Ячейка 3.3
Строка 4	Ячейка 4.1	Ячейка 4.2	Ячейка 4.3