Babel includes JSX processing.
Any URL's added here will be added as
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<h1>Simple Accessible Data Table</h1> <table> <caption>Star Wars Trilogy Data</caption> <thead> <tr> <th scope="col">Title</th> <th scope="col">Director</th> <th scope="col">Release Date</th> </tr> </thead> <tbody> <tr> <th scope="row">Star Wars: Episode IV - A New Hope</th> <td>George Lucas</td> <td>May 25th, 1977</td> </tr> <tr> <th scope="row">Star Wars: Episode V - The Empire Strikes Back</th> <td>Irvin Kershner</td> <td>May 21st, 1980</td> </tr> <tr> <th scope="row">Star Wars: Episode VI - Return of the Jedi</th> <td>Richard Marquand</td> <td>May 25th, 1983</td> </tr> </tbody> </table> <p>Alternatively, review the ARIA based demo: <a href="https://codepen.io/svinkle/pen/WYvxGQ">Simple ARIA Data Table</a>.</p>
Also see: Tab Triggers