W obu przypadkach jest proste rozwiązanie: build tools ;) Tym samym nikt się w tym nie grzebie, kod sam się generuje i klient nie jest tym obciążany. Win – win

Tak, uważam, że jeśli coś się da przepuścić przez jakiegoś typu preprocesor, to należy to zrobić ;)

Co do JS – selektor skonstruowałem na podstawie elementu ale na potrzeby przykładu. W rzeczywistości pewnie wygodniejsza była by klasa. Chociaż z drugiej strony nie da się wykluczyć, że można chcieć owijac tak wszystkie tabelki.

Dlaczego jQuery i dlaczego owijanie divem przez js – otóż o ile nie mamy do czynienia z małą stroną to robienie tego ręcznie jest raczej problematyczne. W przypadku dużych portali nie wyobrażam sobie jak by to mogło działać bo 1. redaktorzy nie muszą znać html 2 ilość tabelek może być znaczna i teraz co – ktoś będzie siedział jak ten świstak i zawijał tabelki w divy? :D
Nie jestem aż takim purystą, więc chociaż uznaję, że js nie powinno być od dodawania html to jednak jestem w stanie iść na ustępstwa.
A jquery to przy założeniu, że pewnie i tak już masz gdzieś w projekcie bo to raczej standard – wiem że to uproszczenie.

Co do JS – a od kiedy JS jest od generowania niezbędnego HTML-a? Skoro to jest podstawowa funkcjonalność strony to a) powinna działać bez JS b) nie wszystkie tabelki z tym chcę c) mam większą kontrolę robiąc to ręcznie d) nie zaciągam całego jQ i nie lecę po całym DOM, co dla mobilnych ma znaczenie szczególne