Open In App

How create table without using <table> tag ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

HyperText Markup Language (HTML) is the standard markup language used to create web pages. HTML allows table creation using the <table> tag. However, tables can also be created in HTML without using <table> tag with the help of Cascading Style Sheet (CSS). CSS is a mechanism for adding style (e.g. fonts, colors, padding, and other decorative features) to otherwise plain HTML web pages. There are various CSS frameworks available like BootStrap, Foundation, Pure, Bulma, UI kit, Materialize CSS, Semantic UI, Spectre and many more. Bootstrap is the most widely used CSS framework. Bootstrap is a free and open-source CSS framework that provides large libraries for front-end developers which makes it popular among the developers. The current version of BootStrap is Bootstrap 4. Bootstrap’s grid system uses a series of containers, rows, and columns to layout and aligns content that can be used to built tables to serve the user requirement. Bootstrap also comes bundled with in-built utility classes that can be used to quickly style elements without using any CSS code. Bootstrap’s grid system has an in-built flexbox and is fully responsive. Flexbox is a one-dimensional layout model that offers space distribution between items in an interface and powerful alignment capabilities. The code below demonstrates the creation of table using the BootStrap Framework of CSS.

Explanation:

  • Bootstrap CDN is a public content delivery network that enables users to load CSS, JavaScript and images remotely from its servers. The BootStrap CDN is linked to the code to access the in-built CSS library classes.
  • Containers are used to center and horizontally pad the actual content.
  • Rows encapsulate the columns.
  • Columns are the immediate children of rows. Content must be placed within columns. Columns without a specified width automatically appear as equal-width columns. We can specify column width explicitly and also assign different width for different screen sizes. We can specify background colors for different rows or columns using the predefined utility classes (like bg-success, bg-info, bg-danger, bg-warning ), a style sheet or inline styling.
  • Border is a predefined class in BootStrap that creates border around the cells. Also, there are several border utility classes(like border-dark, border-light, border-danger, border-success, border-warning) available to further enhance the look and feel by imparting colors or border width.

Example:




<!DOCTYPE html>
<html>
  
<head>
    <title>Table Creation</title>
  
    <!--Linking the BootStrap CDN-->
    <link rel="stylesheet" href=
        integrity=
"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
        crossorigin="anonymous">
  
    <style type="text/css">
        div {
            text-align: center;
        }
  
        #heading {
            font-weight: 700;
        }
    </style>
</head>
  
<body>
    <div class="container">
        <h1 class="text-center display-4">Employee Table</h1>
  
        <div class="row border border-dark bg-success" id="heading">
            <div class="col-3 border border-dark">EmpId</div>
            <div class="col-3 border border-dark">EmpName</div>
            <div class="col-3 border border-dark">EmpDept</div>
            <div class="col-3 border border-dark">EmpSalary</div>
        </div>
  
        <div class="row border border-dark">
            <div class="col border border-dark">101</div>
            <div class="col border border-dark">Joe</div>
            <div class="col border border-dark">Development</div>
            <div class="col border border-dark">50000</div>
        </div>
  
        <div class="row border border-dark bg-info">
            <div class="col border border-dark">102</div>
            <div class="col border border-dark">Mary</div>
            <div class="col border border-dark">Testing</div>
            <div class="col border border-dark">30000</div>
        </div>
  
        <div class="row border border-dark">
            <div class="col border border-dark">103</div>
            <div class="col border border-dark">Beck</div>
            <div class="col border border-dark">Analyst</div>
            <div class="col border border-dark">40000</div>
        </div>
  
        <div class="row border border-dark bg-info">
            <div class="col border border-dark">104</div>
            <div class="col border border-dark">Candace</div>
            <div class="col border border-dark">Development</div>
            <div class="col border border-dark">45000</div>
        </div>
    </div>
</body>
  
</html>


Output:



Last Updated : 24 Apr, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads