用css把xml文件模拟显示成表格形态的测试

原创于 2022-06-09 01:27:47 发布 · 402 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#xml #css

学习笔记同时被 2 个专栏收录

10 篇文章

订阅专栏

#网页技术

2 篇文章

订阅专栏

本文展示了如何利用CSS将XML文件内容模拟显示成表格形式，通过定义不同的样式来呈现Student、Name、Gender和Birthday等元素，实现清晰的布局效果。在微软Edge浏览器中可以看到最终的显示结果。

xml文件如下：

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<?xml-stylesheet type="text/css" href="tabletest.css"?>

<Students>
<Student Id="101">
<Name>mark</Name>
<Gender>male</Gender>
<Birthday>20121201</Birthday>
</Student>
<Student Id="102">
<Name>rosy</Name>
<Gender>female</Gender>
<Birthday>20121201</Birthday>
</Student>
</Students>

css文件如下：

/* this file is a test for two-dimension table . */
Students
{
   background-color: #ffffff;
   width: 99%;
}
Student
{
   display: block;
   border-style: solid;
   border-color: black;
   border: 1;
   margin-top: 1pt;
   margin-bottom: 1pt;
   margin-left: 1pt;
   margin-right: 1pt;
}
Name
{
   display: inline-block;
   border-style: solid;
   border-color: black;
   border: 1;
   color: #FF0000;
   font-size: 20pt;
   width: 80pt;
}
Gender
{
   display: inline-block;
   border-style: solid;
   border-color: black;
   border: 1;
   color: #0000FF;
   font-size: 20pt;
   width: 80pt;
}
Birthday
{
   display: inline-block;
   border-style: solid;
   border-color: black;
   border: 1;
   color: #000000;
   font-size: 20pt;
   width: 100pt;
}