Skip to content
Related Articles

Related Articles

Tachyons Element Tables

Improve Article
Save Article
  • Last Updated : 19 Sep, 2022
Improve Article
Save Article

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=
  
    <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=
  
    <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>


Output:

 

Reference: https://tachyons.io/docs/elements/tables/


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!