Tachyons Element Tables

Last Updated : 19 Sep, 2022

Tachyons Toolkit is free and open-source that is used to create a responsive website. In this article, we will Tachyons Element Tables.

There are no predefined classes that tachyons provide for this, we need to use the width to fix the width of the columns.

Syntax:

<table>
    ...
</table>

Example 1: The following example demonstrates the Tachyons Element Tables.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link rel="stylesheet" href= 
"https://unpkg.com/tachyons/css/tachyons.min.css"> 
  
    <style> 
        table { 
            text-align: center; 
        } 
    </style> 
</head> 
  
<body> 
    <h2 style="color:green;text-align:center;"> 
        GeeksforGeeks 
    </h2> 
    <h3 style="text-align:center;"> 
        Tachyons Element Tables 
    </h3> 
  
    <div> 
        <table> 
            <tr> 
                <th>Company</th> 
                <th>Contact</th> 
            </tr> 
            <tr> 
                <td>Alfreds Futterkiste</td> 
                <td>Maria Anders</td> 
            </tr> 
            <tr> 
                <td>Centro comercial Moctezuma</td> 
                <td>Francisco Chang</td> 
            </tr> 
        </table> 
    </div> 
</body> 
  
</html>

Output:

Example 2: The following example demonstrates the Tachyons Element Tables.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link rel="stylesheet" href= 
"https://unpkg.com/tachyons/css/tachyons.min.css"> 
  
    <style> 
        table { 
            text-align: center; 
        } 
    </style> 
</head> 
  
<body> 
    <h2 style="color:green;text-align:center;"> 
        GeeksforGeeks 
    </h2> 
    <h3 style="text-align:center;"> 
        Tachyons Element Tables 
    </h3> 
  
    <div> 
        <table> 
            <tr> 
                <th width="350px">Company</th> 
                <th width="2000px">Contact</th> 
                <th width="500px">Name</th> 
                <th width="300px">Role</th> 
            </tr> 
            <tr> 
                <td>Alfreds Futterkiste</td> 
                <td>9655******</td> 
                <td>Rahul</td> 
                <td>Analyst</td> 
            </tr> 
            <tr> 
                <td>Centro comercial Moctezuma</td> 
                <td>8556******</td> 
                <td>Aman</td> 
                <td>Software engineer</td> 
            </tr> 
            <tr> 
                <td>XYZ</td> 
                <td>8565******</td> 
                <td>Rohan</td> 
                <td>Tester</td> 
            </tr> 
        </table> 
    </div> 
</body> 
  
</html>