Table layout : table « CSS Style « XML

1. XML
2. CSS Style
3. table

Table layout

File: Data.xml

<?xml version="1.0" encoding="UTF-8" ?>
<?xml-stylesheet type="text/css" href="Style.css" ?> <page>
  <table>
    <tableRow>
      <tableCell1>One</tableCell1>
      <tableCell2>Two</tableCell2>
      <tableCell3>Three</tableCell3>
    </tableRow>
    <tableRow>
      <tableCell1>Four</tableCell1>
      <tableCell2>Five</tableCell2>
      <tableCell3>Six</tableCell3>
    </tableRow>
  </table>
</page>

File: Style.css

page {
  display:block;
  color:#000000; 
  background-color:#EFEFEF;
  border-style:solid; 
  border-width:2px; 
  border-color:#000000; 
}

table {
  display:table;
  padding:20px;
  color:#000000; 
  background-color:#CCCCCC;
  border-style:solid; 
  border-width:2px; 
  border-color:#000000; 
}

tableRow {
  display:table-row;
}

tableCell1, tableCell2, tableCell3 {
  display:table-cell;
  padding:10px;
  color:#000000; 
  background-color:#EFEFEF; 
  border-style:solid; 
  border-width:2px; 
  border-color:#000000; 
}

 

Related examples in the same category