Creating HTML Tables

Bharath Thippireddy
A free video tutorial from Bharath Thippireddy
IT Architect and Best Selling Instructor- 400000+ students
4.5 instructor rating • 31 courses • 414,699 students

Learn more from the full course

XSLT XPATH and XQuery Fundamentals

Learn and use XSL and XPATH in easy steps

02:01:34 of on-demand video • Updated April 2021

  • Create Extensible Stylesheets to transform XML
  • Understand the XML Node Tree
  • Apply XSL Template Rules
  • Generate HTML from XML
  • Use XSL Conditional and Looping syntax
  • Sort the nodes in the output
  • Address the nodes using XPATH
  • Learn relative and absolute addressing
  • Learn and Use the various XPATH Functions
English So far you have applied the Order XSL transformations to display the customer name in the Order.xml file. In this lecture, you'll learn how to iterate through a bunch of items in the XML. In this case we have four items in this order. We don't want to repeat the same logic for each item. So we'll be looping through these items using the XSL syntax and creating a HTML table that will display four rows, one row for each item. Go back to the XSL. After the h2 element, the table heading element in the body, start a HTML table. We want to generate a HTML table to display the items in the order. The first row will be the table headings, <th> for table heading. Item Id, copy paste it three times. Item Name, Price and Quantity. Control+shift+f to format. That's the first row. Starting the second row, we don't want to repeat the logic four times. So we'll be using <xsl colon, for-each. <xsl:for-each select=, here we need to provide the XPath expression for the element we want to iterate. So it's order/item, that's the xpath, Order/Item. Close, Enter. Type in a less than symbol and a forward slash and Eclipse will automatically close the for-each for you. While we loop through for each item, we are going to create a new row. And this row will have 4 columns, td for table data. The first one we want to retrieve and show the value of the ItemID. So to pick the values we have to use xsl:value-of. Inside this td, less than symbol, xsl:value-of, Enter. And within select its ItemID. So this select is relative to this path. The current item that is being processed through the for-each loops, ItemId will be picked and displayed. You can close this value-of right here. If you type a forward slash Eclipse will delete the closing element. Since value-of does not have a body of its own, you can close the first one also. When you displayed the customer name, you can close the value-of right here. That's another syntax of XML. Delete any spaces. Copy this td, the table data, paste it four times or three times. The second is ItemName, third is Price and fourth is Quantity. Do a control+shift+f to format it. To run it, go to the play button, click, click on Order.xml. It will rerun the transformations and the generated HTML will look like this. Open it in a browser or go to the browser that's already open. Click on the link and hit the Enter button and there is our HTML table with all the item details, the ItemId, the Name, the Price and Quantity. Go back to XSL, add a border to the table so that will look better. <table border="1">. You can also add bg colors, etc. You can play around with the HTML if you want to. Reapply it by re-running it. Hit the refresh button or enter in the browser. Now it's much better. So in this lecture, you have successfully created a HTML table and displayed the various items in our order and it's data using xsl:for-each and xsl:value-of.