How to make an HTML table that has rows that drop down under category rows? -

hello trying make html table looks 1 in picture.

the 2 columns user on left , score on right. simple. don't know how transition between left , right table. in table users fall under team category. team's score users average score. when table first loads want teams collapsed how on in right table, want user able click on team name , have expand , drop down table on left. can 1 please show example code on how this? have looked on , right solution have make table , have separate lists each team. solution not work since user's score not appear in table's score column. please can provide example code?

thanks much!

instead of thinking if 1 table perhaps think container multiple sub containers , sub containers can opened , closed. can styled 1 likes, table alternating background color rows. might need js reapply alternating background colors if sub containers have odd or amounts of entries.

there several plugins available creating accordions. one: http://jqueryui.com/accordion/