Standard xp:table Control
| Column 1 |
Column 2 |
Column 3 |
<xp:table>
<xp:tr>
<xp:td>
Column 1
</xp:td>
<xp:td>
Column 2
</xp:td>
<xp:td>
Column 3
</xp:td>
</xp:tr>
</xp:table>
xp:table Control using Pass-Thru HTML
| Header 1 | Header 2 | Header 3 |
|---|
| Column 1 |
Column 2 |
Column 3 |
| Footer 1 |
Footer 2 |
Footer 3 |
<xp:table> <thead> <xp:tr> <th> Header 1
</th> <th> Header 2
</th> <th> Header 3
</th> </xp:tr> </thead> <tbody> <xp:tr> <xp:td> Column 1
</xp:td> <xp:td> Column 2
</xp:td> <xp:td> Column 3
</xp:td> </xp:tr> </tbody> <tfoot> <xp:tr> <xp:td> Footer 1
</xp:td> <xp:td> Footer 2
</xp:td> <xp:td> Footer 3
</xp:td> </xp:tr> </tfoot> </xp:table> xp:table Control using Pass-Thru HTML with CSS
| Header 1 | Header 2 | Header 3 |
|---|
| Column 1 |
Column 2 |
Column 3 |
| Footer 1 |
Footer 2 |
Footer 3 |
<xp:table styleClass="styled"> <thead> <xp:tr> <th class="col0"> Header 1
</th> <th class="col1"> Header 2
</th> <th class="col2"> Header 3
</th> </xp:tr> </thead> <tbody> <xp:tr> <xp:td styleClass="col0"> Column 1
</xp:td> <xp:td styleClass="col1"> Column 2
</xp:td> <xp:td styleClass="col2"> Column 3
</xp:td> </xp:tr> </tbody> <tfoot> <xp:tr> <xp:td styleClass="col0"> Footer 1
</xp:td> <xp:td styleClass="col1"> Footer 2
</xp:td> <xp:td styleClass="col2"> Footer 3
</xp:td> </xp:tr> </tfoot> </xp:table> -- using the following CSS --
table[class="styled"] {
width: 100%;
border-collapse: collapse;
}
table[class="styled"] > thead > tr > th {
background-color: #eee;
color: #666;
}
table[class="styled"] > thead > tr > th,
table[class="styled"] > tbody > tr > td,
table[class="styled"] > tfoot > tr > td {
padding: 4px;
}
table[class="styled"] > thead > tr > th[class="col0"],
table[class="styled"] > tbody > tr > td[class="col0"],
table[class="styled"] > tfoot > tr > td[class="col0"] {
width: 20%;
}
table[class="styled"] > thead > tr > th[class="col1"],
table[class="styled"] > tbody > tr > td[class="col1"],
table[class="styled"] > tfoot > tr > td[class="col1"] {
width: 40%;
}