The Responsive HTML table

UEFA Champions League finals (2010-2022)
Year Team Nation Score Runner-up Head coach Captain Venue Attendance
2022 Real Madrid Spain 1-0 Liverpool Carlo Ancelotti Karim Benzema Stade de France, Paris 75,000
2021 Chelsea England 1-0 Manchester City Thomas Tuchel Cesar Azpilicueta Estádio do Dragão, Porto 14,110
2020 Bayern Munich Germany 1-0 Paris SG Hansi Flick Manuel Neuer Estádio da Luz, Lisbon 01*
2019 Liverpool England 2-0 Tottenham Jurgen Klopp Jordan Henderson Metropolitano Stadium, Madrid 63,272
2018 Real Madrid Spain 3-1 Liverpool Zinedine Zidane Sergio Ramos Olimpiyskiy Stadium, Kyiv 61,561
2017 Real Madrid Spain 4-1 Juventus Zinedine Zidane Sergio Ramos Millennium Stadium, Cardiff 65,842
2016 Real Madrid Spain 5-32* Atlético Madrid Zinedine Zidane Sergio Ramos San Siro, Milan 71,942
2015 Barcelona Spain 3-1 Juventus Thomas Tuchel Andres Iniesta Olympiastadion, Berlin 70,442
2014 Real Madrid Spain 4-1 Atlético Madrid Carlo Ancelotti Iker Casillas Estádio da Luz, Lisbon 60,976
2013 Bayern Munich Germany 2-1 Borussia Dortmund Jupp Heynckes Philipp Lahm Wembley Stadium, London 86,298
2012 Chelsea England 4-33* Bayern Munich Roberto Di Matteo John Terry Allianz Arena, Munich 62,500
2011 Barcelona Spain 3-1 Manchester United Pep Guardiola Carles Puyol Wembley Stadium, London 87,695
2010 Inter Milan Italy 2-0 Bayern Munich José Mourinho Javier Zanetti Santiago Bernabéu, Madrid 87,695

1* - The final was played behind closed doors; 2* - Score was 1-1 after 90 minutes; 3* - Score was 1-1 after 90 minutes;

This table was created using standard table tags. Each td tag contains a data-cell attribute with a corresponding value. For a screen width smaller than 1200px, the td tag is assigned with the property display: grid; and the th tag with property display: none;. With the help of the ::before selector, a pseudo-element is created for each td tag. With the help of the CSS function attr(), the content property of each pseudo-element is assigned the value of the data-cell attribute. The data from the table is displayed in two columns when the screen width is smaller than 1200px.

This effect was achieved by assigning the tbody tag with properties display: grid; and grid-template-columns: 12ch auto;. Two columns are converted to one column when the screen width is less than 768px. When we add the property display: grid; to the td tag, we remove all the accessibility and semantics of using tables. To solve this problem, we can add a role attribute to all table tags using the JavaScript function ( Andrian Roselli ). Resize the screen to see the look of the responsive table.