table layout : table « XML « HTML / CSS

1. HTML / CSS
2. XML
3. table

table layout

 
 
<?xml version="1.0" encoding="ISO-8859-1" standalone="yes"?>
<?xml-stylesheet type="text/css" href="xml-table-2.css"?>
<MyTable>
    <title>
        Table
    </title>
    <cols>
        <MyColumn1/>
        <MyColumn2/>
        <MyColumn3/>
    </cols>
    <headings>
        <record>
            <MyColumn1>a</MyColumn1>
            <MyColumn2>t</MyColumn2>
            <MyColumn3>r</MyColumn3>
        </record>
    </headings>
    <records>
        <record>
            <MyColumn1>M</MyColumn1>
            <MyColumn2>T</MyColumn2>
            <MyColumn3>1</MyColumn3>
        </record>
    </records>
    <footers>
        <record>
            <MyColumn1>a</MyColumn1>
            <MyColumn2>t</MyColumn2>
            <MyColumn3>r</MyColumn3>
        </record>
    </footers>
</MyTable>
* {
    font-family: monospace;
}
MyTable {
    display: table;
    width: 100%;
    border: thin solid black;
    border-spacing: 2px;
}
title {
    display: table-caption;
    font-size: 90%;
    text-align: right;
    padding: 5px;
}
cols {
    display: table-column-group;
}
cols MyColumn1, cols MyColumn2, cols MyColumn3 {
    display: table-column;
}
headings {
    display: table-header-group;
}
records {
    display: table-row-group;
}
record {
    display: table-row;   
}
record > * {
    display: table-cell;
    padding: 5px;
}
footers {
    display: table-footer-group;
}
footers > record > *, headings > record > * {
    border: thin solid black;
    text-align: center;
    font-weight: bold;
}
records > record > * {
    font-size: 120%;
}

 

Related examples in the same category