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 thetables
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:
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 w3wiki 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: