Pavel-ww

Я пробовал реализовать это посредством стандартных средств html - table, thead. tbody, tr, th, td. И все вроде бы не плохо, пока я не начал пытаться прикрутить к этому функционал спойлера.

Надо таблицу засовывать в спойлер, а не спойлер в таблицу. То есть сначала верстаете спойлер, потом в кнопки спойлера помещаете строки таблицы (по сути отдельные таблицы в каждой кнопке)

Если вы сделали верстку по "феншую" то у вас должно быть 5 секций и внутри каждой контейнер. Обращайтесь к контейнерам нужных секций отдельно через модификатор класса. Если один общий контейнер и вы не хотите это переделывать, тогда придется костылить. И для этого "верстку в студию" как говориться. Но лучше переделать, чем костылить - будет быстрее, правильнее и меньше css кода на выходе

У вас весьма странная конструкция меню. Ее надо переделать. На li висит событие клика, ссылка перекрывает клик по li. Причем еще и отдельные li используются только для иконок. И внутри этих li с иконками нет ничего, что бы раскрывалось. clearfix вообще там не нужен. Для внутреннего уровня используется div. В общем нажестили вы с меню )). По коду видны остатки нормальной конструкции, над которой вы поиздевались и навешали костылей, вместо того что бы адаптировать под ваши нужды. (копипастнули откуда-то что ли?)
Конструкция должна быть примерно такой

<ul class="menu">
    <li class="menu-parent">
        <a href="#">Главная
            <span class="menu-toggler"><!-- Здесь событие клик -->
                <i class="fa fa-plus"></i>
            </span> 
        </a>
        <ul class="menu-child"> <!-- Второй уровень -->
            <li>
                <a href="#">О нас</a>
            </li>
        </ul>
    </li>
</ul>

VS Code - отличный, бесплатный, куча бесплатных плагинов на маркетплейсе на все случаи жизни в том числе и bootstrap сниппеты. Подключается по FTP через плагин. То есть не встроенный в CMS редактор

Примерно так

.ticket__flex .ticket__item {
	overflow-x: visible; /*или просто удалить этот стиль ( у вас значение scroll зачем-то)*/
}
.ticket__flex .ticket__item .inner__ticket {
	margin: 0 -10px;
	padding: 0 10px 25px;
}

Вроде по БЭМ делаете. Зачем составные селекторы?

Цели яндекс метрики. Нет?

Такое обычно бывает если нет коннекта с базой данных. Проверьте правильность - пользователь, пароль, имя базы данных в configuration.php

Ищите в документации отдельный код для навигации и формы. Разделите Header на два ряда col-md-12 + col-md-12 и вставляйте найденные части в отдельные колонки.

Вот форма поиска отдельно. Можете вырезать ее из навигации и вставить в другую колонку.

Такие элементарные вещи узнаются из консоли разработчика. Выделите блок в консоли, исследуете состояние :hover, пощелкайте его туда обратно что бы понять что происходит в html и css коде.

html, body {
 font-size: 24px;
}

Всё вместе - аккордеон
1 элемент - таблица внутри триггера аккордеона
2 элемент - таблица внутри тела аккордеона

Эти сайты активно используют javascript. Если обратите внимание в меню нет ссылок. Вместо этого на li элементы навешаны события click. Всё это очень не хорошо для SEO. А скорость работы - это не заслуга технологий на которых эти сайты сделаны, а заслуга минимализма структуры DOM.

Судя по вопросу, вы не разработчик и если хотите им стать, вам предстоит долгий путь.

А значит используйте CMS системы для создания своего сайта, такие как Joomla, Wordpress и пр. Они позволяют делать то что вам требуется, может быть с некоторыми дополнительными расширениями. начните изучать CMS и это вам пригодится так же и на пути к тому, чтобы стать разработчиком

Удалите модуль mod flexi customcode и используйте что-то другое, например Sourcerer от Regular lab. Этот модуль устарел имеет уязвимости и ошибки, и даже из JED удалён.
Когда ставите расширение следите за его актуальностью, не скачивайте где попало. Только с оф сайтов разработчиков. Иначе ваш сайт взломают.

Зависит от шаблона, дизайн макета и того что нужно сверстать. Например если вам нужно сверстать лендинг (без шапки и подвала), то весь код html можно разместить прямо в редакторе материала Joomla. А css там где следует из документации шаблона. Шапка подвал - подцепиться к существующей в шаблоне разметке или создать переопределение шаблона со своей разметкой. Если нужно сверстать магазин - это интегрировать верстку в php файлы магазина. Если лайоут стандартного блога, то в большинстве случаев это просто переопределение CSS стилей. Сборка gulp с препроцессорами я так понимаю прямо в Joomla вряд ли возможна. Но опять же, зависит от шаблона. По сути можно верстать на локалке отправляя скомпилированный css файл на сервер.

В общем в большинстве случаев верстка в Joomla - это не просто html / css / js пилите широким потоком, а интеграция в отдельные части системы в php файлы.

Я например не использую сборки gulp. Просто подключаю VS Code по FTP, вытаскиваю и редактирую нужные php, css, js файлы, если требуется создаю переопределения шаблонов средствами Joomla из админки, перед их редактированием в VS Code. Расставляю нужные классы в нужных местах через средства админки опять же

Может лучше на пальцах объясните что вам требуется? Нарисуйте картинку например. Потому что ответ на ваш вопрос - НИКАК не правильно ))