What is the best way to showcase XML tags in a list format with CSS styling?

<team>
  <teamleader info="Team Leader">
    <name>Suresh KC</name>
    <email><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e48f87ca97919681978ca49d858c8b8bca878b89">[email protected]</a></email>
  </teamleader>
  <member id="ME1A">
    <name>Harry Jones</name>
    <email><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="99d3f6f7fceaabacf1f8ebebe0d9fef4f8f0f5b7faf6f4">[email protected]</a></email>
    <salary>2500</salary>
  </member>
  <member id="ME3A">
    <name>John Deo</name>
    <phone>9866123456</phone>
    <salary>2500</salary>
  </member>
</team>

i want to display teamleader and members as:

  1. Suresh KC [email protected]
  2. Harry Jones [email protected] 2500
  3. John Deo 9866123456 2500

I attempted to use the list-style-type:decimal; property in CSS, but it was not effective.

htmlcssxml

Answer №1

To achieve this effect, you can utilize CSS exclusively, as illustrated in the example below. It is more common practice to extract information from XML using JavaScript and then present it as a list item. This approach offers greater flexibility.

teamleader,
member{
  display: list-item;
  margin-left: 1.3em;
  list-style-type: decimal;   
}
<team>
  <teamleader info="Team Leader">
    <name>Suresh KC</name>
    <email><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8fe4eca1fcfafdeafce7cff6eee7e0e0a1ece0e2">[email protected]</a></email>
  </teamleader>
  <member id="ME1A">
    <name>Harry Jones</name>
    <email><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="470d2829223475722f2635353e07202a262e2b6924282a">[email protected]</a></email>
    <salary>2500</salary>
  </member>
  <member id="ME3A">
    <name>John Deo</name>
    <phone>9866123456</phone>
    <salary>2500</salary>
  </member>
</team>

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

transferring data from a web page to a php script seamlessly without navigating away

I've already spent a significant amount of time searching on Stack Overflow and Google, but I haven't found a solution that works for me. My issue is that I have an HTML form and I need to send the data to PHP without redirecting or leaving the ...

javascriptphpjqueryhtmlajax

What are the best techniques for resizing a bar graph column to perfectly and proportionally match its container size?

Creating a basic bar chart library using vanilla JS and jQuery is what I'm working on. The code below is functional: var userData = { 'Black': 8, 'Latino': 6, 'Native': 4, 'Asian': 10, 'White': 12, & ...

javascripthtmlcssheightscale

Update the CSS for InputLabel

I have a drop-down list that I want to customize. The issue is illustrated below: https://i.sstatic.net/hzVtl.png I'm looking to center the text "choose format" within the field and adjust the font size. return ( <FormControl sx={{ m: 1 ...

javascriptcssreactjsmaterial-ui

How can I insert an image into a circular shape using HTML and CSS?

To achieve the desired effect, the image should be placed inside a circle with a white background. The image size should be smaller than the circle and centered within it. One possible way to accomplish this is: .icon i { color: #fff; width: 40px; ...

htmlcss

What is the best way to left-align numbers in a table?

https://jsfiddle.net/6a7d2snj/ I need help aligning numbers to the left within a table column: 50 5 -40 -4 How can I achieve this? Using style="align:right" aligns the numbers on the right, but my goal is to have them aligned to the left! ...

htmlcss

Monitor the visual clarity post transformational scaling

Let's consider an example: Imagine a 1000x1000 image We apply styling to it with width:10px Then, we add a transformation style that scales it by 100 times: transform: scale(100, 100) Now the image appears to be only 1000 pixels in size. The issue ...

javascriptcssrendering

Code Not Functioning on Website Despite Working in Console

I've developed a jQuery script that eliminates any delivery methods containing the phrase "Royal Mail" if certain products are present in the user's cart. The script functions flawlessly when executed in Google Chrome Console but fails to work wh ...

javascriptjqueryhtml

Unique CSS styling technique

Is there a way to design a unique form similar to the one shown below using CSS? ...

css

Tracking the Height of Hidden Elements During Page Resizing

I am currently attempting to determine the height of a hidden element after the page has been resized. More details can be found at this link: The script is able to successfully log the height upon page load, but when the page is resized, it goes back to ...

javascriptjquerycss

Creating a primary php file in Apache without the use of SQL or any database: is it possible?

Forgive me if this comes across as rude, but I'm struggling to grasp the concept of apache, PHP, and servers in general. To help myself understand better, I want to create a very basic website that assigns an ephemeral ID to each user (not a session). ...

javascriptphphtmlapache

"Use jQuery to toggle the slide effect for the first element of a

Below is the HTML code snippet: <div class="row header collapse"> Content 1 <i class="fas fa-chevron-circle-up" ></i> </div> <div class="instructions-container"> <div></di ...

javascripthtmljquerycss

How can I enable pagination in Datatables when the table HTML is generated using Angular after the drawCallBack function?

Below is the drawCallBack function I have implemented: "fnDrawCallback": function( oSettings ) { console.log("dt redrawn"); var selector = $("#example_table"); console.log(selector); function recompileForAn ...

jqueryhtmlangularjsdatatabledatatables

Unable to view numbers on iPhone or ios device

I am facing an issue with displaying a phone number in the contact section on my website. The number shows up on desktop but not on my iPhone, even when I resize the screen to be smaller than my phone's display size. This issue has been tested on both ...

htmlioscssphone-number

Styling for main banner image on large desktop screens and mobile devices

I need help with website design and CSS solutions. Currently, I have a WordPress website with a onepager theme. At the top of the page, there is an image that almost fills the screen along with a title. My concern is how this image behaves with different b ...

htmlcssresponsive-design

Struggling with jquery's addClass method when trying to apply a class to

Below is a sample tr: <tr> <td><input type="text" class="ingredient required" name="ingredient"></td> <td><input type="number" class="amount required" name="amount" ></td> <td><input type="number" c ...

javascriptjqueryhtmlcssdom

Content is positioned to the left in a horizontal layout without a set width

I am currently assisting a friend with the development of her website. While I consider myself somewhat of an amateur in web design, I usually manage to overcome challenges by dedicating hours to searching for solutions online. However, this time I have no ...

htmlcss

Interested in retrieving the dynamically changing value of LocalStorage

Hopefully I can articulate my issue clearly. I am implementing a feature where CSS themes change upon button clicks. When a specific theme button is clicked, the corresponding classname is saved to LocalStorage. However, since the key and value in LocalSt ...

javascriptjqueryhtmlcsslocal-storage

loading xml data into a table partially using jquery

Currently, I am utilizing AJAX to load and parse XML data. I have constructed a table where I am inserting the data from the XML using a loop. The issue lies in the fact that only around 3000 rows are being inserted into the table even though the XML conta ...

javascriptjqueryxmlajaxhtml

Modify Vuetify's border autocomplete styling

Currently, I have vuetify 1.5.x set up on my codepen. Upon reviewing my codepen, I noticed that the line displayed on the autocomplete feature appears to be quite thick. My goal is to have that line be only 1px. For the select field (outline border), I int ...

cssvuetify.js

Tips for avoiding a noticeable sliding drawer when changing the direction of an HTML element

I am encountering an issue with the Daisy UI drawer component on my page. When I attempt to change the page direction using a JavaScript function, the drawer animates visibly from left to right or right to left, which is not the desired behavior. I have tr ...

htmlcsstailwind-cssdaisyui