Pug Tutorial Series

Pug.js tutorial : HTML Lists in pug

Pug tutorial series pugjs tutorial introduction

Inside this article!

  1. Overview
  2. HTML tables in pug
  3. What we learned
  4. Repository
Pug Templating with HTML
HTML form in Pug
Pug Templating with node.js

Overview

In this part of the pug tutorial series we will learn about how we can use html Images in pug.

HTML Image tag in pug

HTML Images are defined in pug with the help of img tag. An example is given below : 

											
//Name of the file : images .pug
img(src='image.png')

You can run the above code using the following command : 
											
>pug tables.pug
  rendered tables.html

Now open the tables.html file transformed from pug as shown below : 
											
<!--Name of the file : ordered-lists.html-->
<table style="width:100%;" border="1">
    <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>001</td>
        <td>Adam</td>
        <td>25</td>
    </tr>
    <tr>
        <td>002</td>
        <td>rahul</td>
        <td>27</td>
    </tr>
    <tr>
        <td>003</td>
        <td>john</td>
        <td>80</td>
    </tr>
</table>

What we learned

In this article we learned about

  1. HTML Tables in pug.
  2. Table tag in pug .
  3. tr tag in pug .
  4. th tag in pug .
  5. td tag in pug .

Repository

Get it from :