HTML+CSS+JavaScript

Какая разница между thead, tbody, tfoot и caption? Ведь все они служат для объединения строк в группы...

<THEAD>, <TBODY> и <TFOOT> служат для логического выделения групп строк в таблице.
Роль у них такая же, как и у <DIV> и <SPAN> - те тоже логически выделяют блоки и строки текста.

Разные названия табличных тегов связаны с нормальной структурой обычной таблицы -
у таблицы обычно есть шапка (head), всегда есть тело (body)
и иногда встречается нижний колонтитул (footer).

Что до <CAPTION> - то это совершенно иной тег.
И он служит не для логического выделения групп строк, а создаёт название таблицы.
Никаких строк тег <CAPTION> в группы не объединяет - теги <TR> не должны вкладываться в тег <CAPTION></CAPTION>.

А принципиальная разница между ними какая? Как это отражается на оформлении, функциональности и т.д.? Что будет если назвать, скажем вместо thead - tbody и наоборот и т.д.?

Повторяю - предназначение "групповых" табличных тегов аналогично предназначению тега <SPAN>.

Если вы какую-то часть строки заключите в тег <SPAN></SPAN>, то что случится с этой частью строки?
Правильный ответ - НИЧЕГО не случится.
СОВСЕМ ничего.
Однако, вы получите возможность этому <SPAN>'у назначить какие-то свойства стиля
или какую-то скриптовую реакцию на какое-то событие.
-----

Что до "специально перепутать местами" <THEAD> и <TBODY>, то я лично никогда не пробовал.
Как и не пробовал левый ботинок одевать на правую ногу, а правый - на левую.
Есть желание проверить - проверяйте.

Одно могу сказать точно: когда внутри <TABLE></TABLE> нет никаких групповых тегов,
то ВСЕ браузеры САМОСТОЯТЕЛЬНО вводят в DOM тег <TBODY> - перед первым <TR>
и </TBODY> после последнего </TR>.
Убедитесь:

<div id="tst"><table><tr><td>табличка</td></tr></table></div> <input type="button" value="TEST" onclick="alert (document.getElementById ('tst').innerHTML)">

И ещё раз: что там будет, если внутри таблицы специально что-нибудь напутать - не знаю.
И знать не хочу.
Проверяйте сами.