Pug Tutorial Series

Pug.js tutorial : HTML Lists in pug

Pug tutorial series pugjs tutorial introduction



Overview

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

HTML tables in pug

HTML Tables are defined in pug with the help of table tag. Table rows are defined with the help of tr tags, table headings are defined with the help of th and table data defined with the help of td tags.An example is given below :

											
//Name of the file : tables.pug
table(style='width:100%', border='1')
  tr
    th Id
    th Name
    th Age
  tr
    td 001
    td Adam
    td 25
  tr
    td 002
    td rahul
    td 27
  tr
    td 003
    td john
    td 80

	

											
										

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 :