¿Ves algo que mejorar? Propón un cambio.
En XForms · página 124 de 137
This is an example of using CSS to format a table without actually using the HTML table element. This is critical since some browsers do not support dynamic tabular layout. The Firefox 0.6 extension also does not support the repeat-nodeset attribute, so you can not yet display repeating data inside HTML tables.
The biggest drawback to this solution is that the width of the tables must be predefined in a stylesheet and can not adjust the width of the columns based on the width of the data in each row.
Program Example
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:ev="http://www.w3.org/2001/xml-events">;
<head>
<title>Table with CSS and Divs</title>
<style type="text/css">
- {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
}
/* Example of doing layout of a table without using the HTML table tags */
.table {
display: table;
}
.tableHeader, .tableRow, .tableFooter {
display: table-row;
}
.leftHeaderCell, .leftCell, .leftFooterCell,
.rightHeaderCell, .rightCell, .rightFooterCell
{
display: table-cell;
}
.leftHeaderCell, .rightHeaderCell, .leftFooterCell {
background-color: green;
color: white;
font-weight: bold;
padding: 0 5px 0 10px;
}
.leftHeaderCell, .rightHeaderCell {
text-align: center;
}
.leftCell {
padding: 0 5px 0 10px;
}
.rightCell {
text-align: right;
}
.rightFooterCell {
text-align: right;
border-top: solid black 2px;
font-weight: bold;
}
/* Draw even rows with a light green */
.even {
color: black;
background-color: #CCFFCC;
}
</style>
</head>
<body>
<p>Table with CSS and divs</p>
<div class="table">
<div class="tableHeader">
<div class="leftHeaderCell">Description</div>
<div class="rightHeaderCell">Value</div>
</div>
<div class="tableRow">
<div class="leftCell">Item one</div>
<div class="rightCell">$1,000.00</div>
</div>
<div class="tableRow even">
<div class="leftCell">Item two</div>
<div class="rightCell">$2,000.00</div>
</div>
<div class="tableRow">
<div class="leftCell">Item three</div>
<div class="rightCell">$3,000.00</div>
</div>
<div class="tableRow even">
<div class="leftCell">Item four</div>
<div class="rightCell">$4,000.00</div>
</div>
<div class="tableRow">
<div class="leftCell">Item five has a long description</div>
<div class="rightCell">$1,000.00</div>
</div>
<div class="tableFooter">
<div class="leftFooterCell">Total: </div>
<div class="rightFooterCell">$11,000.00</div>
</div>
</div>
</body>
</html>
Where this page came from
This page was imported from Wikibooks. From “XForms” on Wikibooks, by its contributors, under CC BY-SA 4.0. Changed here: set as a page; navigation and edit links left out; each image under its own licence, credited in its caption.
Nobody has written it yet — it is the source material at a new address, which is why search engines are asked to skip it and why no one earns from it. It is up for grabs: take it on, and it is yours to rewrite and to earn from.
En estas publicacionesXForms
Licencia: CC BY-SA 4.0 · Adaptado de en.wikibooks.org
1
0
0
0
Comentarios
