How to create Tables in Pug View Engine ?

Pug is a template engine for NodeJS and browsers, enabling dynamic content rendering. It compiles templates to HTML, supports JavaScript expressions for formatting, and facilitates the reuse of static pages with dynamic data. Its indentation-based syntax simplifies tag specification, enhancing readability.

Tables in Pug:

A table is an arrangement of data in rows and columns in tabular format. Tables are useful for various tasks, such as presenting text information and numerical data. A table is a useful tool for quickly and easily finding connections between different types of data. Tables are also used to create databases.

• ‘table‘ tag defines the structure for organizing data in rows and columns within a web page.
• ‘tr‘ tag represents a row within a table, containing individual cells.
• ‘th‘ tag shows a table header cell that typically holds titles or headings.
• ‘td‘ tag represents a standard data cell, holding content or data.

Syntax to create Tables in Pug:

table
  tr
    th header 1
    th header 2
  tr
    td element
    td element
  tr
    td element
    td element

Approach to Create a Pug Tables:

• Express Setup: Initializes an Express.js server.
• Setting View Engine: Configures Pug as the view engine for rendering templates.
• Routing: Defines a single route for the root URL (/). When accessed, it renders the tables Pug template.
• Pug Template: The Pug template defines the structure and content of the HTML page. It includes a table with headers and rows containing data.
• Styling: Inline CSS is used within the Pug template (style.) to set margins and styles for headings and the table.

Steps to Install Pug in Node App:

Step 1: Create a NodeJS Application using the following command:

npm init -y

Step 2: Install required dependencies using the following command:

npm i pug express

Step 3: Create a views folder that contains the table.pug file.

Folder Structure:

Project Structure

The updated dependencies in package.json file will look like:

"dependencies": {
    "express": "^4.18.2",
    "pug": "^3.0.2"
}

Example: Below is an example of creating a Pug tables.

HTML

doctype html
html
  head
    style.
      body{
        margin:2rem;
       }
      h1,h3{
        color:green;
        text-align:center;
      }
      table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
      }
  body
    h1 Welcome To GeeksforGeeks
    h3 Tables in Pug.js
    table(style="width:100%")
      tr
        th Firstname
        th Lastname
        th Age
      tr
        td Anil
        td Kumble
        td 48
      tr
        td Sourav
        td Ganguly
        td 49
      tr
        td Harbhajan
        td Singh
        td 41

Javascript

//app.js

const express=require('express');
const app=express();
const port=3000;
app.set('view engine','pug');
app.get('/',(req,res)=>{
    res.render('tables');
});
app.listen(port,()=>{
    console.log(`server is running at http://localhost:${port}`);
});

Output:

Example 2: Illustration of column span and row span in Pug.

HTML

doctype html
html
  head
    style.
      table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
      }
      th, td {
        padding: 4px;
        text-align: left;
      }
  body
    h2 Cell that spans two columns:
    table(style="width:100%")
      tr
        th Name
        th(colspan="2") Telephone
      tr
        td Kedar Jadhav
        td 7777777777
        td 8888888888
    h2 Cell that spans two rows:
    table(style="width:100%")
      tr
        th Name:
        td Kedar Jadhav
      tr
        th(rowspan="2" ) Telephone
        td 7777777777
      tr
        td 8888888888

Javascript

//app.js

const express=require('express');
const app=express();
const port=3000;
app.set('view engine','pug');
app.get('/',(req,res)=>{
    res.render('tables');
});
app.listen(port,()=>{
    console.log(`server is running at http://localhost:${port}`);
});

Output:

Col span and row span in Pug