Creating an HTML Table with XML and CSS

Table of Contents

1. Fundamental Concepts
   • HTML Tables
   • XML Data
   • CSS Styling
2. Usage Methods
   • Retrieving XML Data
   • Displaying XML in an HTML Table
   • Styling the Table with CSS
3. Common Practices
   • Data Validation in XML
   • Responsive Table Design
4. Best Practices
   • Semantic Markup
   • Accessibility
5. Conclusion
6. References

Fundamental Concepts

HTML Tables

HTML tables are created using the <table> element. Inside the table, we have <tr> (table row) elements, each containing one or more <td> (table data) elements for standard cells or <th> (table header) elements for header cells. For example:

<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>John</td>
        <td>25</td>
    </tr>
</table>

XML Data

XML is a self - descriptive markup language. It uses tags to define elements and can store hierarchical data. Here is a simple XML example for a table - like data:

<people>
    <person>
        <name>John</name>
        <age>25</age>
    </person>
    <person>
        <name>Jane</name>
        <age>30</age>
    </person>
</people>

CSS Styling

CSS can be used to style HTML tables. We can set properties such as border, background - color, font - size, etc. For example, to add a border to a table:

table {
    border: 1px solid black;
}
td, th {
    border: 1px solid black;
}

Usage Methods

Retrieving XML Data

In JavaScript, we can use the XMLHttpRequest object to retrieve XML data from a file. Here is an example:

const xhr = new XMLHttpRequest();
xhr.open('GET', 'data.xml', true);
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        const xmlDoc = xhr.responseXML;
        // Process the XML data
    }
};
xhr.send();

Displaying XML in an HTML Table

Once we have the XML data, we can loop through the XML elements and create an HTML table.

const xmlDoc = xhr.responseXML;
const table = document.createElement('table');
const headerRow = document.createElement('tr');
const headers = ['Name', 'Age'];
headers.forEach(headerText => {
    const th = document.createElement('th');
    th.textContent = headerText;
    headerRow.appendChild(th);
});
table.appendChild(headerRow);

const people = xmlDoc.getElementsByTagName('person');
for (let i = 0; i < people.length; i++) {
    const row = document.createElement('tr');
    const name = people[i].getElementsByTagName('name')[0].textContent;
    const age = people[i].getElementsByTagName('age')[0].textContent;

    const nameCell = document.createElement('td');
    nameCell.textContent = name;
    row.appendChild(nameCell);

    const ageCell = document.createElement('td');
    ageCell.textContent = age;
    row.appendChild(ageCell);

    table.appendChild(row);
}
document.body.appendChild(table);

Styling the Table with CSS

We can add an external CSS file or use an internal <style> tag. For example, here is an internal style to make the table more visually appealing:

<style>
    table {
        border-collapse: collapse;
        width: 100%;
    }
    th, td {
        padding: 8px;
        text-align: left;
        border-bottom: 1px solid #ddd;
    }
    th {
        background - color: #f2f2f2;
    }
</style>

Common Practices

Data Validation in XML

Before using the XML data in the table, it’s important to validate it. We can use XML Schema Definition (XSD) to define the structure and data types of the XML elements. For example, we can define that the age element in our XML should be an integer.

Responsive Table Design

To make the table responsive on different screen sizes, we can use media queries in CSS. For example:

@media screen and (max - width: 600px) {
    table {
        width: 100%;
    }
    th, td {
        display: block;
    }
}

Best Practices

Semantic Markup

Use semantic HTML elements like <table>, <tr>, <th>, and <td> correctly. This helps search engines understand the content of the table and also improves the accessibility of the page.

Accessibility

Add scope attributes to <th> elements to indicate whether they are column or row headers. Also, use ARIA (Accessible Rich Internet Applications) roles and attributes to make the table more accessible to screen readers. For example:

<table role="table">
    <tr>
        <th scope="col">Name</th>
        <th scope="col">Age</th>
    </tr>
    <tr>
        <td>John</td>
        <td>25</td>
    </tr>
</table>

Conclusion

Combining XML, HTML, and CSS to create tables offers a powerful way to manage and present data on the web. XML provides a structured way to store data, HTML is used to display the data in a tabular format, and CSS enhances the visual appearance. By following common and best practices, we can create tables that are not only functional but also accessible and responsive.

References

• MDN Web Docs: https://developer.mozilla.org/
• W3Schools: https://www.w3schools.com/
• XML Schema Tutorial: https://www.w3schools.com/xml/xml_schema.asp

• ←Previous
• Next→