HTML/CSS/XML/table

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

Style for xml table

   <source lang="html4strict">

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

}

</source>
   
  


table layout

   <source lang="html4strict">


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

}

</source>
   
  


XML style for table

   <source lang="html4strict">

<?xml version="1.0" encoding="ISO-8859-1"?> <?xml-stylesheet type="text/css" href="exercise17-1.css"?> <body>

<colgroup> <col id="movie" /> <col id="cast" /> <col id="genre" /> <col id="year" /> </colgroup> <thead> </thead> <tbody> </tbody>
Table
movie stars genre year
T K A 2

</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;

}

</source>