Basics

No bells or whistles here, just a straight up table for all of your basic table needs.

Watch this part in video

edit on codepen button 
<table>
  <thead>
    <tr>
      <th width="200">Table Header</th>
      <th>Table Header</th>
      <th width="150">Table Header</th>
      <th width="150">Table Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content Goes Here</td>
      <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
      <td>Content Goes Here</td>
      <td>Content Goes Here</td>
    </tr>
    <tr>
      <td>Content Goes Here</td>
      <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
      <td>Content Goes Here</td>
      <td>Content Goes Here</td>
    </tr>
    <tr>
      <td>Content Goes Here</td>
      <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
      <td>Content Goes Here</td>
      <td>Content Goes Here</td>
    </tr>
  </tbody>
</table>

Hover State

Need to spiff up the table just a tad? Just add the class .hover to lightly darken the table rows on hover.

Watch this part in video

edit on codepen button 
<table class="hover">
</table>
Table Header Table Header Table Header Table Header
Content Goes Here This is longer content Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here

Stripes

By default, table rows are striped. There’s an .unstriped class to remove the stripes. If you change $table-is-striped to false to remove stripes from all tables, use the .striped class to add stripes.

Watch this part in video

edit on codepen button 
<table class="unstriped">
</table>
Table Header Table Header Table Header Table Header
Content Goes Here This is longer content Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here

Stacked Table

To stack a table on small screens, add the class .stack.

Watch this part in video

edit on codepen button 
<table class="stack">
</table>
Cookies Taste Calories Overall
Chocolate Chip Tastey 120cal 7.5/10
Snickerdoodle Delicious 95cal 8/10
Oatmeal Raisin Superb 10cal 11/10

Scrolling Table

Got a lot of tubular tabular data? Add a wrapper element with the class .table-scroll around your table to enable horizontal scrolling.

Watch this part in video

The wrapping element was added in Foundation 6.2—prior to that, you just added the class .scroll to the table itself. However, this method doesn't work great with Internet Explorer 9. If you don't need IE9 support, you can just add .scroll to your table, and the wrapping element isn't necessary. </div>

edit on codepen button
```html
```
This is the description! One Two Three Four Five Six Seven Eight Nine Ten Eleven Twelve
These are all the words that people use to describe Foundation 6! Cool Swag Chill Killer Rad Baller OMG Sweet Awesome Beast Dope Tubular
These are some words that people use to describe other web frameworks. Whatevs Ugh. LOL K Aight Eh. Grrr... Meh. TTYL Bleh. Really? Why?
Here are some great super heros. Batman Superman Spiderman Wonder Woman Hulk Nicolas Cage Antman Aquaman Captain America Wolverine Thor Iron Man
Here's a footer, just in case