Report

Доброго дня всем матерым верстальщикам.
Есть задача сделать табличку графика на сайт. Технологии - понятно, что html и css. Табличка не большая, но с особенностями.
А именно, в табличке есть группы объединенных ячеек, при чем не только внутри строк, но и между строками (объединяется несколько строк). Табличку прикрепил.
Каркас table tr td без объединения ячеек могу сделать, но нужно объединить.
Как правильнее всего сделать такое объединение? Было бы классно, чтобы ответ был сразу с примерами.

Здравствуйте уважаемые форумчане, подскажите пожалуйста, не получается сделать блок адаптивным(я в этом не очень разбираюсь =)) ). Уже голова кипит, все попереисправлял, переделал, удалял и добавлял, что просто запутался, очень прошу вас распутать и подсказать как правильно, чтобы я точно знал :). Спасибо заранее.
В чем собственно проблема: А в том, что этот блок не уменьшается пропорционально ширине экрана.
На 1 скриншоте он вообще выпадает из общего контента. А на 2 скриншоте появляется горизонтальная прокрутка.
Пересмотрел много роликов и статей, но чет так сильно запутался во всем этом :((.

CSS code блока и т.д: 
 
@media (max-width: 320px) {   .wat{     left: 260px;   } } .wat{   margin:0;   margin-left: 5.5em;   left: auto;   top: 260px;   border: 3px red solid;   border-radius: 3px;   width: 150px; height: 50px;   position: relative;   padding-left: 4px;   padding-top: 0px;   display: block; } #btn3{   position: absolute;   margin-left: 8px;   top: 13px;   border: 3px red solid;   border-radius: 3px;   width: 150px; height: 50px; } span{   font-size: 16pt;   margin-left: 50px;   position: absolute;   top: 14px;   left: -1px;   font-size: 16pt;   color: white; } .opa{   display: block;   border-radius: 3px;   border: 3px red solid;   width: 150px; height: 50px;   position: relative;   z-index: 100000;   margin-top: -12.8em;   margin-left: 18.5em; } @media (max-width: 320px){   .opa{     width: 25%;     height: auto;   } } Вот HTML Код:
<ul id="slides"> <li class="slide showing">Slide 1 <!--<div class='wat'><img id='btn3' src='app2.png'></img></div>--> </li> <li class="slide">Slide 2</li> <li class="slide">Slide 3</li> </ul> <div class='opa'> <img src='app.svg'></img> <span>App Store</span> </div>  
 
        

Здравствуйте. Создан слайдер из трёх слайдов. На слое над слайдером с помощью :before создан контент (один блок, содержащий текст, меню со ссылками и форму). Однако при адаптации под разные разрешения всё очень сильно съезжает и искажается. Есть ли какой-то более рациональный способ разместить слой с контентом над слайдером, чтобы слайды переключались под недвижимым контентом? Подскажите пожалуйста.
id="main" это блок, который находится в слое над id="slider"
 
index.html
style.css

Здравствуйте, создаю таблицу в HTML, не получается в конце таблицы равномерно распределить столбцы и ячейки. Подскажите пожалуйста в чем ошибка:
 
Пример нужной таблицы во вложениях
 
Ссылка на код: https://pastebin.com/ZL8GRHU5
 
Если не отображается ссылка текстовый документ кода во вложениях.
 
Спасибо за помощь.

Код.txt

Есть таблица. Колонки у нее выравниваются влево, а оставшаяся часть остается пустой
http://skrinshoter.ru/s/100818/0jkG6HkA
Пробовал решить это с помощью align=left и задать ширину колонкам, но это не сработало
Что можно сделать?
https://codepen.io/anon/pen/VBqBmw