Lesson: lesson-tables

This lessons renders some more complex tables with running headers (table header and footer to be repeated on each page. The CSS specs do not define whether header and footer should/must be repeated or not and there is not CSS property for controlling the behavior. So support or non-support for repeating headers and footers is both a valid interpretation of the incomplete CSS specs.

PDF files

Converter PDF Preview
PDFreactor
OK
Download
Uses repeating header and footer
PrinceXML
OK
Download
Uses repeating header and footer
Antennahouse
OK
Download
Uses repeating header and footer
Vivliostyle
OK
Download

Stylesheet

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
@import url("../styles/a4.css");

table {
    page-break-after: always;
}


/* CSS Document */ 

table.complex { 
  border-left: 1px solid #808080; 
  border-right: 1px solid #808080; 
  border-bottom: 1px solid #808080; 
  max-width: 100%;
} 

table.complex caption { 
  padding: .25em; 
  border-top: 1px solid #808080; 
  border-left: 1px solid #808080; 
  border-right: 1px solid #808080; 
  background-color: #FFFFFF; 
} 


table.complex td, table.complex th { 
  padding: .125em; 
  margin: 0; 
  width: 10%; 
  background-color: #FFFFFF; 
  border-right: 1px solid #C0C0C0; 
  border-top: 1px solid #C0C0C0; 
  border-bottom: 1px solid #C0C0C0; 
} 

table.complex th.label { 
  text-align: right; 
  padding-right: .25em; 
} 

table.complex th.title { 
  text-align: center; 
} 

table.complex td.qty { 
  text-align: center; 
} 

table.complex td.cost, table.complex th.approval { 
  text-align: right; 
  padding-right: .25em; 
} 

table.complex td.total { 
  font-weight: bold; 
  text-align: right; 
  padding-right: .25em; 
} 


table.complex th.sub { 
  text-align: right; 
  padding-right: .25em; 
} 

table.complex th.sect { 
  text-align: Left; 
  background-color: #C0C0C0; 
  border-top: 1px solid #808080; 
} 

/* Long table */
table#long-table {
    border: 1px solid grey;
    border-collapse: collapse;
}

table#long-table th {
    text-align: center;
    font-weight: bold;
    font-size: 1.4em;
    background: #ddd;
}

table#long-table th,
table#long-table td {
    border: 1px solid grey;
    padding: 0.5em;
}

HTML input

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
    <body>
        <table class="complex" cellpadding="2" cellspacing="0" summary="Purchase Receipt Information"> 
          <tbody> 
            <tr> 
              <th class="sect" colspan="10" id="ri">Requester Information</th> 
            </tr> 

            <tr> 
              <th colspan="1" id="name" class="label">Name</th> 
              <td colspan="7" headers="name">Jon Smith</td> 
              <th colspan="1" id="date" class="label">Date</th> 
              <td colspan="1" headers="date">9/9/2005</td> 
            </tr> 

            <tr> 
              <th colspan="1" id="dept" class="label">Department</th> 
              <td colspan="9" headers="ri dept">Customer Service</td> 
            </tr> 

            <tr> 
              <th colspan="1" id="remail" class="label">E-mail</th> 
              <td colspan="4" headers="ri remail">jon.smith@stateu.edu</td> 
              <th colspan="1" id="rphone" class="label">Phone</th> 
              <td colspan="4" headers="ri rphone">(123) 456-7890</td> 
            </tr> 

            <tr> 
              <th class="sect" colspan="10" id="si">Supplier Information</th> 
            </tr> 

            <tr> 
              <th colspan="1" id="cn" class="label">Name</th> 
              <td colspan="9" headers="si cn">Acme Computer Supplies</td> 
            </tr> 

            <tr> 
              <th colspan="1" id="ad1" class="label">Address 1</th> 
              <td colspan="9" headers="si ad1">1234 Business Way</td> 
            </tr> 

            <tr> 
              <th colspan="1" id="ad2" class="label">Address 2</th> 
              <td colspan="9" headers="si ad2"> </td> 
            </tr> 

            <tr> 
              <th colspan="1" id="city" class="label">City</th> 
              <td colspan="3" headers="si city">Somewhere</td> 
              <th colspan="1" id="state" class="label">State</th> 
              <td colspan="1" headers="si state"><abbr title="Illinois">IL</abbr></td> 
              <th colspan="3" id="zip" class="label">Zip Code</th> 
              <td colspan="1" headers="si zip">61820</td> 
            </tr> 

            <tr> 
              <th colspan="1" class="label" id="semail">E-mail</th> 
              <td colspan="4" headers="si semail">order@acmesupply.edu</td> 
              <th colspan="1" id="sweb" class="label">Web</th> 
              <td colspan="4" headers="si sweb"><a href="http://www.acmesupply.edu/">www.acmesupply.edu</a></td> 
            </tr> 

            <tr> 
              <th colspan="1" id="sphone" class="label">Phone</th> 
              <td colspan="4" headers="si sphone">(123) 222-3344</td> 
              <th colspan="1" id="sfax" class="label">Fax</th> 
              <td colspan="4" headers="si sfax">(123) 222-3355</td> 
            </tr> 

            <tr> 
              <th class="sect" colspan="10" id="items">Items</th> 
            </tr> 

            <tr> 
              <th class="title" colspan="1" id="itemnum">Item #</th> 
              <th colspan="1" class="title" id="part">Part Number</th> 
              <th colspan="5" class="title" id="desc">Description</th> 
              <th colspan="1" id="qty" class="title">Quantity</th> 
              <th colspan="1" id="unit" class="title">Unit Cost</th> 
              <th colspan="1" id="totalcost" class="title">Total Cost</th> 
            </tr> 

            <tr> 
              <th class="title" colspan="1" id="num1">1</th> 
              <td class="part" colspan="1" headers="part  num1">197-540501</td> 
              <td class="part" colspan="5" headers="desc  num1">Toner Cartridge for LaserJet 4100 Series 6000 Page Duty Cycle </td> 
              <td class="qty" colspan="1" headers="qty   num1">2</td> 
              <td class="cost" colspan="1" headers="unit  num1">$29.95</td> 
              <td class="cost" colspan="1" headers="totalcost num1">$59.90</td> 
            </tr> 

            <tr> 
              <th class="title" colspan="1" id="num2">2</th> 
              <td class="part" colspan="1" headers="part  num2">555-013097</td> 
              <td class="part" colspan="5" headers="desc  num2">Ink Cartridge color for Epson Stylus C62 </td> 
              <td class="qty" colspan="1" headers="qty   num2">3</td> 
              <td class="cost" colspan="1" headers="unit  num2">$27.00</td> 
              <td class="cost" colspan="1" headers="totalcost num2">$81.00</td> 
            </tr> 

            <tr> 
              <th class="title" colspan="1" id="num3">3</th> 
              <td class="part" colspan="1" headers="part  num3">555-0167213</td> 
              <td class="part" colspan="5" headers="desc  num3">Parallel Printer Cable 10ft </td> 
              <td class="qty" colspan="1" headers="qty   num3">1</td> 
              <td class="cost" colspan="1" headers="unit  num3">$6.00</td> 
              <td class="cost" colspan="1" headers="totalcost num3">$6.00</td> 
            </tr> 

            <tr> 
              <th class="sub" colspan="9" id="subtotal">Sub-Total</th> 
              <td class="cost" colspan="1" headers="subtotal">$146.90</td> 
            </tr> 

            <tr> 
              <th class="sub" colspan="9" id="tax">Tax</th> 
              <td class="cost" colspan="1" headers="tax">$10.28</td> 
            </tr> 

            <tr> 
              <th class="sub" colspan="9" id="ship">Shipping</th> 
              <td class="cost" colspan="1" headers="ship">$15.80</td> 
            </tr> 

            <tr> 
              <th colspan="9" id="totalall" class="total">Total</th> 
              <td class="total" colspan="1" headers="totalall">$172.98</td> 
            </tr> 

            <tr> 
              <th colspan="10" id="approval" class="sect">Approval</th> 
            </tr> 

            <tr> 
              <th class="approval" colspan="1" id="appperson">Person</th> 
              <td class="approval" colspan="7" headers="approval appperson">Sara Johnson</td> 
              <th class="approval" colspan="1" id="appdate">Date</th> 
              <td class="approval" colspan="1" headers="approval appdate">9/7/2005</td> 
            </tr> 

          </tbody> 
        </table>


        <table id="long-table">

            <caption>Extra long table</caption>
            <thead>
                <tr>
                    <th>Column 1</th>
                    <th>Column 2</th>
                    <th>Column 3</th>
                    <th>Column 4</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th colspan="2">two-column footer</th>
                    <th colspan="2">two-column footer</th>
                </tr>
            </tfoot>
            <tbody>
                <tr>
                    <td>Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus.</td> 
                    <td>Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus.</td> 
                    <td>Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus.</td> 
                    <td>Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus.</td> 
                </tr>
                <tr>
                    <td>Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus.</td> 
                    <td>Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus.</td> 
                    <td>Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus.</td> 
                    <td>Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus.</td> 
                </tr>
                <tr>
                    <td>Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus.</td> 
                    <td>Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus.</td> 
                    <td>Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus.</td> 
                    <td>Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus.</td> 
                </tr>
                <tr>
                    <td>Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus.</td> 
                    <td>Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus.</td> 
                    <td>Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus.</td> 
                    <td>Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus.</td> 
                </tr>
                <tr>
                    <td>Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus.</td> 
                    <td>Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus.</td> 
                    <td>Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus.</td> 
                    <td>Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus.</td> 
                </tr>
                <tr>
                    <td>Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus.</td> 
                    <td>Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus.</td> 
                    <td>Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus.</td> 
                    <td>Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus.</td> 
                </tr>
                <tr>
                    <td>Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus.</td> 
                    <td>Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus.</td> 
                    <td>Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus.</td> 
                    <td>Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus.</td> 
                </tr>
                <tr>
                    <td>Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus.</td> 
                    <td>Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus.</td> 
                    <td>Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus.</td> 
                    <td>Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus.</td> 
                </tr>
                <tr>
                    <td>Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus.</td> 
                    <td>Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus.</td> 
                    <td>Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus.</td> 
                    <td>Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus.</td> 
                </tr>
                <tr>
                    <td>Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus.</td> 
                    <td>Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus.</td> 
                    <td>Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus.</td> 
                    <td>Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus.</td> 
                </tr>
                <tr>
                    <td>Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus.</td> 
                    <td>Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus.</td> 
                    <td>Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus.</td> 
                    <td>Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus.</td> 
                </tr>
                <tr>
                    <td>Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus.</td> 
                    <td>Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus.</td> 
                    <td>Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus.</td> 
                    <td>Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus.</td> 
                </tr>
                <tr>
                    <td>Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus.</td> 
                    <td>Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus.</td> 
                    <td>Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus.</td> 
                    <td>Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus.</td> 
                </tr>
                <tr>
                    <td>Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus.</td> 
                    <td>Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus.</td> 
                    <td>Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus.</td> 
                    <td>Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus.</td> 
                </tr>
            </tbody>
        </table>

    </body>
</html>