2.d) Tabellen
basic
| Row 1, cell 1 |
Row 1, cell 2 |
Row 1, cell 3 |
| Row 2, cell 1 |
Row 2, cell 2 |
Row 2, cell 3 |
| Row 3, cell 1 |
Row 3, cell 2 |
Row 3, cell 3 |
| Row 4, cell 1 |
Row 4, cell 2 |
Row 4, cell 3 |
advanced
make tbody element scroll in Mozilla, by applying the style overflow: auto; max-height: [whatever] to it, bud prob on IE?.
advanced table
| Header 1 | Header 2 | Header 3 |
|---|
| Footer 1 | Footer 2 | Footer 3 |
| Cell 1.1 | Cell 1.2 | Cell 1.3 |
| Cell 2.1 | Cell 2.2 | Cell 2.3 |
| Cell 3.1 | Cell 3.2 | Cell 3.3 |
| Cell 4.1 | Cell 4.2 | Cell 4.3 |
alternate coloring
- very simple: tr.d0 td { background-color: #CC9999; color: black; }
- CSS3 pseudo-selector: tr:nth-child(even) { background-color: #000000; }
- jquery: $(document).ready(function() { $("tr:even").css("background-color", "#000000"); });
sample 1: simple
| Cell 1.1 | Cell 1.2 | Cell 1.3 |
| Cell 2.1 | Cell 2.2 | Cell 2.3 |
| Cell 3.1 | Cell 3.2 | Cell 3.3 |
| Cell 4.1 | Cell 4.2 | Cell 4.3 |
sample 2: css
| Cell 1.1 | Cell 1.2 | Cell 1.3 |
| Cell 2.1 | Cell 2.2 | Cell 2.3 |
| Cell 3.1 | Cell 3.2 | Cell 3.3 |
| Cell 4.1 | Cell 4.2 | Cell 4.3 |
jQuery DataTables