Menu
Tailwind CSS

Tables

Tables can be constructed using its utility-first approach, which relies on applying classes directly to HTML elements to define their appearance and behavior.

 

A typical table structure involves container divs with appropriate styling classes to control layout and scrolling behavior, a <table> element to define the table structure, <thead> and <tbody> for table headers and body, and individual <th> and <td> elements for table cells.

 

Layout:

 

1. table-auto: When the table layout is set to auto, the table's column widths are automatically adjusted based on the content of the cells.

 

2. table-fixed: Conversely, when the table layout is set to fixed, the column widths are determined by the table's initial layout and any explicit width settings applied to the <col> elements or individual <td> or <th> cells.

 

Simple Table:

<div class="p-8">
 <table class="table-auto">
   <thead>
     <tr>
       <th>Name</th>
       <th>Skill</th>
       <th>Department</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>Rohit Kumar</td>
       <td>Java Developer</td>
       <td>IT</td>
     </tr>
     <tr>
       <td>Altaf Hussain</td>
       <td>Python</td>
       <td>IT</td>
     </tr>
     <tr>
       <td>Wasif Kalim</td>
       <td>Management</td>
       <td>HR</td>
     </tr>
   </tbody>
 </table>
</div>

 

Another Table:

<table class="table-fixed w-full border border-gray-200">
 <thead>
   <tr class="text-left bg-gray-300">
     <th class="p-2">Name</th>
     <th class="p-2">Email</th>
     <th class="p-2">Phone</th>
   </tr>
 </thead>
 <tbody>
   <tr class="border-b border-gray-200">
     <td class="p-2">Altaf Hussain</td>
     <td class="p-2">altaf.hussain@codersmile.com</td>
     <td class="p-2">123-456-7890</td>
   </tr>
   <tr class="border-b border-gray-200">
     <td class="p-2">Rohit Kumar</td>
     <td class="p-2">rohit.kumar@codersmile.com</td>
     <td class="p-2">098-765-4321</td>
   </tr>
   </tr>
   <tr class="border-b border-gray-200">
     <td class="p-2">Wasif Kalim</td>
     <td class="p-2">wasif.kalim@codersmile.com</td>
     <td class="p-2">098-765-4321</td>
   </tr>
 </tbody>
</table>

 

Another Example:

<table class="table w-full border border-collapse">
 <thead>
   <tr>
     <th class="border p-3">Column 1</th>
     <th class="border p-3">Column 2</th>
     <th class="border p-3">Column 3</th>
   </tr>
 </thead>
 <tbody>
   <tr>
     <td class="border p-3">Data 1</td>
     <td class="border p-3">Data 2</td>
     <td class="border p-3">Data 3</td>
   </tr>
   <tr>
     <td class="border p-3">Data 4</td>
     <td class="border p-3">Data 5</td>
     <td class="border p-3">Data 6</td>
   </tr>
 </tbody>
</table>

 

Developers can apply hover effects, striped backgrounds, and responsive layouts effortlessly, ensuring optimal readability and user experience across various devices and screen sizes.
 

Tailwind CSS