HTML/CSS/XML/table

Материал из Web эксперт
Перейти к: навигация, поиск

Style for xml table

 

<?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%;
}



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%;
}



XML style for table

 
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/css" href="exercise17-1.css"?>
<body>
    <table>
        <caption>
            Table
        </caption>
        <colgroup>
            <col id="movie" />
            <col id="cast" />
            <col id="genre" />
            <col id="year" />
        </colgroup>
        <thead>
            <tr>
                <th>movie</th>
                <th>stars</th>
                <th>genre</th>
                <th>year</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td> T</td>
                <td> K</td>
                <td> A</td>
                <td> 2</td>
            </tr>
        </tbody>
    </table>
</body>
body {
    display: block;
    margin: 13px;
}
table {
    display: table;
    width: 300px;
    caption-side: bottom;
    border: thin solid black;
    table-layout: fixed;
    border-spacing: 0;
}
colgroup {
    display: table-column-group;    
}
col {
    display: table-column;
}
thead {
    display: table-header-group; 
}
tbody {
    display: table-row-group;
}
tr {
    display: table-row;
}
th, td {
    display: table-cell;
    border: thin solid black;
    text-align: center;
    font-weight: bold;
    overflow: hidden;
}
th {
    background: lightgrey;
}
td {
    vertical-align: top;
}
caption {
    display: table-caption;
    font-size: 90%;
    text-align: right;
}
td, th, caption {
    padding: 5px;
}