Table Template in XSLT

I am attempting to retrieve information in a tabular format, but I'm running into issues. The data is displaying vertically rather than in the horizontal table format I desire using standard HTML table tags. Is there a way to achieve this? Am I overlooking something in my code? Here is the code I have so far, along with the resulting output:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
  <xsl:output omit-xml-declaration="yes" indent="yes"/>
  <xsl:strip-space elements="*"/>
  <xsl:template match="/"> 
    <html>
        <body>
            <table>
                <xsl:apply-templates/>
            </table>
        </body>
    </html>
  </xsl:template>
  <xsl:template match="*">
    <tr>
      <span style="background-color: #aaa;">
        <xsl:value-of select="name()"/> : 
      </span>
      <span style="background-color: #ccc;">
        <xsl:value-of select="."/>
      </span>
    </tr>
  </xsl:template>
  <xsl:template match="*[*]">
    <tr>
      <th style="border:2px solid #c55; font-size:120%;">
        <xsl:value-of select="name()"/>
      </th>
    </tr>
    <tr>
        <td>
            <table>
                <xsl:apply-templates/>
            </table>
        </td>
    </tr>
  </xsl:template>
</xsl:stylesheet>

View the Screenshot

Answer №1

It seems like there is an oversight in your code where you are not creating a table row (tr) with multiple cells (td). As a result, the code will produce a table with only one column.

Identifying the issue is simpler than providing a solution since the desired output has not been clearly defined. It's important to specify what you are aiming to achieve in order to troubleshoot effectively.

Answer №2

Appreciate your response. It turns out that the code snippet provided below is exactly what I needed. I acknowledge your point that I was overlooking something important.

xsl:template match="/">
    <style>
      body {font-family: serif;}

      div {padding: 6px;}
    </style>
    <div style="position: relative; top: 50px;">
      <xsl:apply-templates/>
    </div>
  </xsl:template>

  <xsl:template match="*">
    <div>
      <div style="background-color: #333;">
        <p><xsl:value-of select="name()"/></p>
      </div>
      <div style="background-color: #999;">
        <p><xsl:value-of select="."/></p>
      </div>
    </div>
  </xsl:template>

  <xsl:template match="*[*]">
      <div style="border:2px solid #777; font-size:110%;">
        <xsl:value-of select="name()"/>
      </div>
          <xsl:apply-templates/>
  </xsl:template>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to adjust the positioning of an image within a <div> element?

I'm attempting to vertically align an image within a horizontal menu bar. My goal is to adjust the padding/margin of the image using inline CSS. However, I've noticed that when I add margin-top or padding-top, it affects the positioning of all m ...

What sets apart li.parent from ul?

I am facing some confusion with this parent keyword. Are li.parent and ul the same thing? If so, can someone please explain what this means? Thank you. (nav and sidebar are classes). .sidebar ul.nav .active > a:focus, .sidebar ul.nav li.parent a.active ...

"Create dynamic web pages with multilingual support using HTML, JQuery, and nested

For my multilingual website, I wrote this simple JQuery code: (function() { var language, translate; translate = function(jsdata) { $('[tkey]').each(function(index) { var strTr; strTr = jsdata[$(this).attr('tkey')] ...

I'm curious as to why my form fields disappear even when they have not been selected

Illustration of Form Fields Disappearing When Unselected Greetings, I'm encountering an issue where my form fields disappear when not selected. I'm utilizing Crispy Forms to render the form, following a tutorial on YouTube. This functionality w ...

Insert JavaScript into this HTML document

I am looking to integrate the "TimeCircles JavaScript library into my project, but I am facing some challenges in doing it correctly. I plan to include the necessary files at the following location: /js/count-down/timecircles.css and /js/count-down/timecir ...

Tips for aligning a div (or any other content) in the center of a

I recently added a small div to my webpage to display 3 options in a stylish way, but I'm encountering an issue - the box is appearing on the left side instead of the center. I have tried using various CSS properties like align-items, align-content, a ...

Transmitting chosen option using AJAX and JavaScript

I have a select dropdown that I want to use to send a selected option to AJAX and then display it. Here is my HTML: <label>Tag</label> <select id="day"></select> <label>Monat</label> <select id="month"&g ...

Experiencing a 500 internal server error while running my Python script, struggling to identify the root cause

Here is a python script designed to open a .ssv file (space-separated vector) and create a survey page based on the file's contents. The .ssv file includes the survey name and the questions to be asked in the survey. As part of our project, each team ...

What's the best way to add two distinct colors as background for a header with css?

h2 {background-color:#C61236; color:#FFFFFF; font-size:medium; line-height:1.5; text-indent:20px;} Although the current setup looks good, I am looking to incorporate a new color block at the start of the text. I'm not sure what steps to take nex ...

Having trouble getting an HTML form with PHP to successfully save data into a MySQL database server

https://i.sstatic.net/lLH0V.jpg I'm currently working on a code snippet that generates a <textarea> for user input. However, I seem to be encountering an issue where the code only outputs "please include some content", even when there is text i ...

What could be causing my custom cursor to malfunction?

I've been attempting to customize the cursor image, but despite following all provided instructions, it's still not working: CSS: body, html { margin: 0px; padding: 0px; border: 1px solid red; cursor: url(images/rsz_red_crosshair.gi ...

Web Dialogue Dimensions: Adjusting the MDC-Web Dialog Width

When designing a dialog following Material Design guidelines, one issue that often arises is how to handle the width of the dialog on larger viewports such as tablets and desktops. Some sources suggest using increments of 56px for dialog width, but it&apos ...

Verify if the link includes https:// while using angularjs

In my angular app, there is a lot of data stored in JSON format. [ {"link": "https://stackoverflow.com"}, {"link": "https://stackoverflow.com"}, {"link": "id-aW783D"}, //This data is incorrect {"link": "https://stackoverflow.com"} ] However, the ...

Finding the nearest span value upon clicking through a specific class

Whenever a user clicks on a hyperlink, my goal is to locate the nearest span element with a specific class and retrieve the text within that class. As of now, it is only returning blank text: Here is the provided HTML code snippet: <div class="plan re ...

All the optgroups in the select picker are being duplicated from the first optgroup

I am currently facing an issue with a select picker multiple dropdown. When I add optgroups, the values of the second and third optgroups are being copied by the first optgroup. The opt-groups are being populated via JavaScript. <select class="mod ...

Setting a fixed time for a preloader is a simple and effective way to

Is there a way to specify a specific duration for the preloader on my website? I find that after the images have preloaded, I am unable to see any animations in the home section. $(window).load(function() { $('#preloader').fadeOut( ...

Leveraging the power of javascript to include content before and after

I am looking to understand how I can insert an HTML element before and after certain elements. For example, let's say we have the following code in a real file: <ul class="abcd" id="abcd></ul> How can I display it like this using JavaScr ...

Ensuring that a header one remains on a single line

Within this div, I have set the width and height to be 250px. Specifically, the h1 element inside the div has a height of 50px. Users who are updating content on my website can input any text they desire within this box. However, when the text within the ...

Clicking on a Vuetify v-btn with the :href attribute set to download will open the XML file

I'm having trouble getting the v-btn to download an XML file instead of opening it in the browser. <v-btn :disabled="!exportUrl" block x-large height="100" color="primary" :href="exportUrl" download> ...

Steps to transfer text from one input field to another by clicking a button using JavaScript

Hello, I am new to Javascript so please forgive me if my question seems silly. I have been tasked with creating a form containing two input fields and a button. When the button is clicked, the text entered in the first field should move to the second field ...