В td не указывай параметр colspan, если ты хочешь th растянуть на 2 столбца (только в th) и это если смотреть по твоему случаю. А так, вот, немного фантазии:
<!DOCTYPE html>
<html>
<style>
body
{
background: url(https://i.pinimg.com/originals/fc/22/93/fc2293c99bfcf61b3cd18c913890ff50.jpg)no-repeat center center fixed; /* Полупрозрачный фон */
background-color: rgb(0, 0, 0) ;
background-size: cover;
}
.center-img
{
display: block;
margin: 0 auto;
}
table {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; /*---Указываем шрифт---*/
font-size: 20px; /*---Размер шрифта---*/
background: rgba(134, 134, 134, 0.466); /*---Создаём цвет фона с применением Alpha---*/
max-width: 70%; /*---Задаём максимальный размер таблицы---*/
width: 70%; /*---Задаём действующий размер таблицы---*/
border-collapse: separate; /*---Создаём для ячейки собственную рамку---*/
text-align: center; /*---Выравниваем текст по центру---*/
margin: auto; /*---Выравниваем таблицу по центру окна браузера---*/
}
th {
font-weight: normal; /*---Устанавливаем насыщенность шрифта---*/
background: rgba(104, 104, 104, 0.651); /*---Создаём цвет фона с применением Alpha---*/
color: rgba(255, 255, 255, 0.7); /*---Соответсвенно цвет этого текста---*/
padding: 25px; /*---Контроль размера верхней части таблицы---*/
text-align: center; /*---Выравнивание текста по центру---*/
}
td {
background: url(Background/back.jpg)no-repeat center center fixed; /* Полупрозрачный фон */
color: rgba(255, 255, 255, 0.7);
padding: 9px 8px;
transition: .3s linear;
}
tr:hover td {color: rgb(0, 217, 255);
}
.table_class
{
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; /*---Указываем шрифт---*/
font-size: 20px; /*---Размер шрифта---*/
background: rgba(102, 102, 102, 0.521); /*---Создаём цвет фона с применением Alpha---*/
max-width: 100%; /*---Задаём максимальный размер таблицы---*/
width: 100%; /*---Задаём действующий размер таблицы---*/
max-height: 7%;
height: 7%;
border-collapse: separate; /*---Создаём для ячейки собственную рамку---*/
text-align: center; /*---Выравниваем текст по центру---*/
margin: auto; /*---Выравниваем таблицу по центру окна браузера---*/
}
.th_class
{
font-weight: normal; /*---Устанавливаем насыщенность шрифта---*/
background: rgba(104, 104, 104, 0.651); /*---Создаём цвет фона с применением Alpha---*/
color: rgba(255, 255, 255, 0.7); /*---Соответсвенно цвет этого текста---*/
border-bottom: 2px solid rgba(87, 121, 214, 0.664); /*---Создаём линнию снизу---*/
border-top: 2px solid rgba(87, 121, 214, 0.664); /*---Создаём линнию сверху---*/
padding: 25px; /*---Контроль размера верхней части таблицы---*/
text-align: center; /*---Выравнивание текста по центру---*/
}
</style>
<body>
<table class = "table_class">
<tr>
<th>Красивая табличка</th>
</tr>
</table>
<table class = "table_class">
<tr>
<th colspan="2">Ячейка 1</th>
</tr>
<tr>
<td class = "td_class2">Ячейка 2</td>
<td class = "td_class2">Ячейка 3</td>
</tr>
</table>
</body>
</html>
Средний
