HTML CSS examples for CSS Widget:Div Table
Using Aria to make a div table accessible
<html> <head> <style type="text/css"> .Table<!--from w w w . j a v a2 s.c om--> { display:table; } .Title { display:table-caption; text-align:center; font-weight:bold; font-size:larger; } .Heading { display:table-header-group; font-weight:bold; text-align:center; } .Row { display:table-row; } .Cell { display:table-cell; border:solid; border-width:thin; padding-left:6px; padding-right:6px; } </style> <title>Lorem ipsum dolor</title> </head> <body> <div class="Table" role="grid" aria-readonly="true"> <div class="Title"> <p>Lorem i</p> </div> <div class="Heading" role="row"> <div class="Cell" role="columnheader" id="a1"> <p>Lore</p> </div> <div class="Cell" role="columnheader" id="a2"> <p>Lorem </p> </div> <div class="Cell" role="columnheader" id="a3"> <p>Lorem ip</p> </div> </div> <div class="Row" role="row"> <div class="Cell" role="gridcell" aria-labelledby="a1"> <p>Lorem ipsum dolor si</p> </div> <div class="Cell" role="gridcell" aria-labelledby="a2"> <p>Lor</p> </div> <div class="Cell" role="gridcell" aria-labelledby="a3"> <p>Lorem </p> </div> </div> <div class="Row" role="row"> <div class="Cell" role="gridcell" aria-labelledby="a1"> <p>Lorem ip</p> </div> <div class="Cell" role="gridcell" aria-labelledby="a2"> <p>Lore</p> </div> <div class="Cell" role="gridcell" aria-labelledby="a3"> <p>Lorem</p> </div> </div> </div> </body> </html>