Tables

Using the most basic table markup, here's how tables look.

Basic Example

Using the most basic table markup, here's how tables look.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird Thornton 
<div class="relative overflow-x-auto">
                                    <table class="text-left w-full whitespace-nowrap">
                                    <thead class="bg-gray-200 text-gray-700 ">
                                    <tr class="border-gray-300 border-b ">
                                    <th scope="col" class="px-6 py-3">#</th>
                                    <th scope="col" class="px-6 py-3">First</th>
                                    <th scope="col" class="px-6 py-3">Last</th>
                                    <th scope="col" class="px-6 py-3">Handle</th>
                                    </tr>
                                    </thead>
                                    <tbody class="divide-y ">
                                    <tr class="border-gray-300 border-b ">
                                    <td class="py-3 px-6 text-left">1</td>
                                    <td class="py-3 px-6 text-left">Mark</td>
                                    <td class="py-3 px-6 text-left">Otto</td>
                                    <td class="py-3 px-6 text-left">@mdo</td>
                                    </tr>
                                    <tr class="border-gray-300 border-b ">
                                    <td class="py-3 px-6 text-left">2</td>
                                    <td class="py-3 px-6 text-left">Jacob</td>
                                    <td class="py-3 px-6 text-left">Thornton</td>
                                    <td class="py-3 px-6 text-left">@fat</td>
                                    </tr>
                                    <tr class="border-gray-300 border-b ">
                                    <td class="py-3 px-6 text-left">3</td>
                                    <td colspan="2" class="py-3 px-6 text-left">Larry the Bird</td>
                                    <td class="py-3 px-6 text-left">Thornton</td>
                                    </tr>
                                    </tbody>
                                    </table>
                                    </div>

Striped Table

Use this example to increase the readability of the data sets by alternating the background color of every second table row.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird Thornton
4 Jacob Thornton @fat 
<div class="relative overflow-x-auto">
                                    <table class="text-left w-full whitespace-nowrap">
                                    <thead class="">
                                    <tr class="border-gray-300 border-b ">
                                    <th scope="col" class="px-6 py-3">#</th>
                                    <th scope="col" class="px-6 py-3">First</th>
                                    <th scope="col" class="px-6 py-3">Last</th>
                                    <th scope="col" class="px-6 py-3">Handle</th>
                                    </tr>
                                    </thead>
                                    <tbody class="divide-y ">
                                    <tr class="border-gray-300 border-b ">
                                    <td class="py-3 px-6 text-left">1</td>
                                    <td class="py-3 px-6 text-left">Mark</td>
                                    <td class="py-3 px-6 text-left">Otto</td>
                                    <td class="py-3 px-6 text-left">@mdo</td>
                                    </tr>
                                    <tr class="border-gray-300 border-b bg-gray-100
                                          ">
                                    <td class="py-3 px-6 text-left">2</td>
                                    <td class="py-3 px-6 text-left">Jacob</td>
                                    <td class="py-3 px-6 text-left">Thornton</td>
                                    <td class="py-3 px-6 text-left">@fat</td>
                                    </tr>
                                    <tr class="border-gray-300 border-b ">
                                    <td class="py-3 px-6 text-left">3</td>
                                    <td colspan="2" class="py-3 px-6 text-left">Larry the Bird</td>
                                    <td class="py-3 px-6 text-left">Thornton</td>
                                    </tr>
                                    <tr class="border-gray-300 border-b bg-gray-100
                                          ">
                                    <td class="py-3 px-6 text-left">4</td>
                                    <td class="py-3 px-6 text-left">Jacob</td>
                                    <td class="py-3 px-6 text-left">Thornton</td>
                                    <td class="py-3 px-6 text-left">@fat</td>
                                    </tr>
                                    </tbody>
                                    </table>
                                    </div>

Hoverable rows

Add hover-state on table row.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird Thornton
4 Jacob Thornton @fat 
<div class="relative overflow-x-auto">
                                    <table class="text-left w-full whitespace-nowrap">
                                    <thead class="">
                                    <tr class="border-gray-300 border-b ">
                                    <th scope="col" class="px-6 py-3">#</th>
                                    <th scope="col" class="px-6 py-3">First</th>
                                    <th scope="col" class="px-6 py-3">Last</th>
                                    <th scope="col" class="px-6 py-3">Handle</th>
                                    </tr>
                                    </thead>
                                    <tbody class="divide-y ">
                                    <tr class="border-gray-300 border-b
                                          hover:bg-gray-100 ">
                                    <td class="py-3 px-6 text-left">1</td>
                                    <td class="py-3 px-6 text-left">Mark</td>
                                    <td class="py-3 px-6 text-left">Otto</td>
                                    <td class="py-3 px-6 text-left">@mdo</td>
                                    </tr>
                                    <tr class="border-gray-300 border-b
                                          hover:bg-gray-100 ">
                                    <td class="py-3 px-6 text-left">2</td>
                                    <td class="py-3 px-6 text-left">Jacob</td>
                                    <td class="py-3 px-6 text-left">Thornton</td>
                                    <td class="py-3 px-6 text-left">@fat</td>
                                    </tr>
                                    <tr class="border-gray-300 border-b
                                          hover:bg-gray-100 ">
                                    <td class="py-3 px-6 text-left">3</td>
                                    <td colspan="2" class="py-3 px-6 text-left">Larry the Bird</td>
                                    <td class="py-3 px-6 text-left">Thornton</td>
                                    </tr>
                                    <tr class="border-gray-300 border-b
                                          hover:bg-gray-100 ">
                                    <td class="py-3 px-6 text-left">4</td>
                                    <td class="py-3 px-6 text-left">Jacob</td>
                                    <td class="py-3 px-6 text-left">Thornton</td>
                                    <td class="py-3 px-6 text-left">@fat</td>
                                    </tr>
                                    </tbody>
                                    </table>
                                    </div>

Bordered tables

Add border on all sides of the table and cells.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird Thornton
4 Jacob Thornton @fat 
 <table class="text-left w-full whitespace-nowrap border
                                          border-gray-300">
                                    <thead class="">
                                    <tr class="border-gray-300 border-b ">
                                    <th scope="col" class="px-6 py-3 border-r border-gray-300 ">#</th>
                                    <th scope="col" class="px-6 py-3 border-r border-gray-300 ">First</th>
                                    <th scope="col" class="px-6 py-3 border-r border-gray-300 ">Last</th>
                                    <th scope="col" class="px-6 py-3 border-r border-gray-300 ">Handle</th>
                                    </tr>
                                    </thead>
                                    <tbody class="divide-y ">
                                    <tr class="border-gray-300 border-b ">
                                    <td class="py-3 px-6 text-left border-r
                                          border-gray-300 ">1</td>
                                    <td class="py-3 px-6 text-left border-r
                                          border-gray-300 ">Mark</td>
                                    <td class="py-3 px-6 text-left border-r
                                          border-gray-300 ">Otto</td>
                                    <td class="py-3 px-6 text-left border-r
                                          border-gray-300 ">@mdo</td>
                                    </tr>
                                    <tr class="border-gray-300 border-b ">
                                    <td class="py-3 px-6 text-left border-r
                                          border-gray-300 ">2</td>
                                    <td class="py-3 px-6 text-left border-r
                                          border-gray-300 ">Jacob</td>
                                    <td class="py-3 px-6 text-left border-r
                                          border-gray-300 ">Thornton</td>
                                    <td class="py-3 px-6 text-left border-r
                                          border-gray-300 ">@fat</td>
                                    </tr>
                                    <tr class="border-gray-300 border-b ">
                                    <td class="py-3 px-6 text-left border-r
                                          border-gray-300 ">3</td>
                                    <td colspan="2" class="py-3 px-6 text-left border-r
                                          border-gray-300 ">Larry the Bird</td>
                                    <td class="py-3 px-6 text-left border-r
                                          border-gray-300 ">Thornton</td>
                                    </tr>
                                    <tr class="border-gray-300 border-b ">
                                    <td class="py-3 px-6 text-left border-r
                                          border-gray-300 ">4</td>
                                    <td class="py-3 px-6 text-left border-r
                                          border-gray-300 ">Jacob</td>
                                    <td class="py-3 px-6 text-left border-r
                                          border-gray-300 ">Thornton</td>
                                    <td class="py-3 px-6 text-left border-r
                                          border-gray-300 ">@fat</td>
                                    </tr>
                                    </tbody>
                                    </table>
Buy Pro