1 |
wakaba |
1.1 |
|
2 |
|
|
|
3 |
|
|
|
4 |
|
|
HTML Tables 7th July 1995 |
5 |
|
|
|
6 |
|
|
INTERNET DRAFT Dave Raggett, W3C |
7 |
|
|
Expires in six months email: <dsr@w3.org> |
8 |
|
|
|
9 |
|
|
HTML Tables |
10 |
|
|
|
11 |
|
|
<draft-ietf-html-tables-00.txt> |
12 |
|
|
|
13 |
|
|
Status of this Memo |
14 |
|
|
|
15 |
|
|
This document is an Internet draft. Internet drafts are working |
16 |
|
|
documents of the Internet Engineering Task Force (IETF), its areas |
17 |
|
|
and its working groups. Note that other groups may also distribute |
18 |
|
|
working information as Internet drafts. |
19 |
|
|
|
20 |
|
|
Internet Drafts are draft documents valid for a maximum of six |
21 |
|
|
months and can be updated, replaced or obsoleted by other documents |
22 |
|
|
at any time. It is inappropriate to use Internet drafts as reference |
23 |
|
|
material or to cite them as other than as "work in progress". |
24 |
|
|
|
25 |
|
|
To learn the current status of any Internet draft please check the |
26 |
|
|
"lid-abstracts.txt" listing contained in the Internet drafts shadow |
27 |
|
|
directories on ftp.is.co.za (Africa), nic.nordu.net (Europe), |
28 |
|
|
munnari.oz.au (Pacific Rim), ds.internic.net (US East coast) or |
29 |
|
|
ftp.isi.edu (US West coast). Further information about the IETF can |
30 |
|
|
be found at URL: http://www.cnri.reston.va.us/ |
31 |
|
|
|
32 |
|
|
Distribution of this document is unlimited. Please send comments to |
33 |
|
|
the HTML working group (HTML-WG) of the Internet Engineering Task |
34 |
|
|
Force (IETF) at <html-wg@wg.oclc.org>. Discussions of this group are |
35 |
|
|
archived at URL: http://www.acl.lanl.gov/HTML-WG/archives.html. |
36 |
|
|
|
37 |
|
|
Abstract |
38 |
|
|
|
39 |
|
|
The HyperText Markup Language (HTML) is a simple markup language |
40 |
|
|
used to create hypertext documents that are portable from one |
41 |
|
|
platform to another. HTML documents are SGML documents with generic |
42 |
|
|
semantics that are appropriate for representing information from a |
43 |
|
|
wide range of applications. This specification extends HTML to |
44 |
|
|
support a wide variety of tables. The model is designed to work well |
45 |
|
|
with associated style sheets, but does not require them. It also |
46 |
|
|
supports rendering to braille, or speech, and exchange of tabular |
47 |
|
|
data with databases and spreadsheets. The html table model embodies |
48 |
|
|
certain aspects of the CALS table model, e.g. the ability to group |
49 |
|
|
table rows into thead, tbody and tfoot sections, plus the ability to |
50 |
|
|
specify cell alignment compactly for groups of cells according to |
51 |
|
|
the context. |
52 |
|
|
|
53 |
|
|
Note that this is a preliminary draft, produced at short notice for |
54 |
|
|
discussion at the Stockholm IETF meeting of the HTML working group. |
55 |
|
|
A more detailed revision will be produced as soon as practical to |
56 |
|
|
fill in any gaps. |
57 |
|
|
|
58 |
|
|
|
59 |
|
|
|
60 |
|
|
Dave Raggett Page 1 |
61 |
|
|
|
62 |
|
|
|
63 |
|
|
|
64 |
|
|
HTML Tables 7th July 1995 |
65 |
|
|
|
66 |
|
|
Introduction |
67 |
|
|
|
68 |
|
|
This document sets out a revised proposal for the HTML table model, |
69 |
|
|
following discussions at the Danvers IETF meeting and discussions |
70 |
|
|
over email. The proposal is backwards compatible with the HTML+ |
71 |
|
|
specification and the implementation in the Netscape 1.1 browser. |
72 |
|
|
The HTML 3.0 specification is currently being rewritten to take into |
73 |
|
|
account recent discussions, and will incorporate the new table model |
74 |
|
|
in the next revision to the HTML 3.0 Internet Draft. The proposal |
75 |
|
|
goes beyond the earlier model and folds in some of the features of |
76 |
|
|
the CALS table model. The proposal has been designed with a view to |
77 |
|
|
the effective use of associated style sheets for richer control over |
78 |
|
|
appearence. |
79 |
|
|
|
80 |
|
|
Design Influences |
81 |
|
|
|
82 |
|
|
The html table model has evolved from studies of existing SGML |
83 |
|
|
tables models, the treatment of tables in common word processing |
84 |
|
|
packages, and looking at a wide range of tabular layout in |
85 |
|
|
magazines, books and other paper-based documents. The model was |
86 |
|
|
chosen to allow simple tables to be expressed simply with extra |
87 |
|
|
complexity only when needed. This makes it practical to create the |
88 |
|
|
markup for html tables with everyday text editors and reduces the |
89 |
|
|
learning curve for getting started. This feature has been very |
90 |
|
|
important to the success of html to date. |
91 |
|
|
|
92 |
|
|
Increasingly people are using filters from other document formats or |
93 |
|
|
direct wysiwyg editors for html. It is important that the html table |
94 |
|
|
model fits well with these routes for authoring html. This effects |
95 |
|
|
how the representation handles cells which span multiple rows or |
96 |
|
|
columns, and how alignment and other presentation properties are |
97 |
|
|
associated with groups of cells. |
98 |
|
|
|
99 |
|
|
A major consideration for the html table model is that the fonts and |
100 |
|
|
window sizes etc. in use with browsers are not under the author's |
101 |
|
|
control. This makes it impractical to rely on column widths |
102 |
|
|
specified in terms of absolute units such as picas or pixels. |
103 |
|
|
Instead, tables are dynamically sized to match the current window |
104 |
|
|
size and fonts. Authors can provide guidance as to the relative |
105 |
|
|
widths of columns, but user agents are expected to ensure that |
106 |
|
|
columns are wide enouh to avoid clipping cell contents. |
107 |
|
|
|
108 |
|
|
This proposal extends the html table model to support dynamic |
109 |
|
|
display of table contents as the table data arrives from the net. |
110 |
|
|
This feature requires the author to specify the number of columns, |
111 |
|
|
and includes provision for control of table width and the relative |
112 |
|
|
widths of different columns. |
113 |
|
|
|
114 |
|
|
The Department of Defense's work on CALS has established a de facto |
115 |
|
|
standard for SGML table models. The html table model builds upon |
116 |
|
|
experience gained with CALS, whilst avoiding some of the complexity |
117 |
|
|
associated with a simple minded adoption of the CALS model. Both |
118 |
|
|
models share the row-major treatment of tables, i.e. treating tables |
119 |
|
|
|
120 |
|
|
Dave Raggett Page 2 |
121 |
|
|
|
122 |
|
|
|
123 |
|
|
|
124 |
|
|
HTML Tables 7th July 1995 |
125 |
|
|
|
126 |
|
|
as a sequence of rows, which in turn, consist of a sequence of |
127 |
|
|
cells. This has worked well in practice. An alternative would be to |
128 |
|
|
represent the table as a sequence of columns, which in turn, consist |
129 |
|
|
of a sequence of cells. Both this and hybrid techniques were |
130 |
|
|
considered early on as candidates for html. |
131 |
|
|
|
132 |
|
|
In CALS you can group table rows into head, body and foot sections. |
133 |
|
|
This is frequently used to repeat table head and foot rows when |
134 |
|
|
breaking tables across page boundaries. CALS further allows you to |
135 |
|
|
use repeated groups of head/body/foot sections. This is generally |
136 |
|
|
thought to be unnecessary, and can be avoided by using a separate |
137 |
|
|
table for each such group. This proposal allows authors to use the |
138 |
|
|
head, body and foot sections for html tables only when needed. |
139 |
|
|
|
140 |
|
|
There are many potential properties relating to the presentation |
141 |
|
|
style of table cells, for instance, the border width, margins, |
142 |
|
|
vertical and horizontal alignment within cells, foreground and |
143 |
|
|
background colors and textures. The html proposal uses the same |
144 |
|
|
alignment properties as CALS, but separates off the representation |
145 |
|
|
of vertical and horizontal alignment using a more flexible treatment |
146 |
|
|
than CALS. The html table model also simplifies the treatment of |
147 |
|
|
borders, as this can be better handled along with other rendering |
148 |
|
|
properties through associated style sheets. |
149 |
|
|
|
150 |
|
|
The html table model permits arbitrary nesting of tables, unlike |
151 |
|
|
CALS. The processing time and memory requirements for laying out |
152 |
|
|
tables are linear with the depth of nesting and the size of table |
153 |
|
|
contents. The widespread deployment of Netscape 1.1 has provided an |
154 |
|
|
effective test of the core model, robustly handling a very wide |
155 |
|
|
range of tables. |
156 |
|
|
|
157 |
|
|
For the visually impaired, html offers the possibility of setting to |
158 |
|
|
rights the damage caused by the adoption of windows based graphical |
159 |
|
|
user interfaces. The html table model includes attributes for |
160 |
|
|
labelling each cell, to support high quality text to speech |
161 |
|
|
conversion. The same attributes can also be used to support |
162 |
|
|
automated import and export of table data to databases or |
163 |
|
|
spreadsheets. |
164 |
|
|
|
165 |
|
|
|
166 |
|
|
|
167 |
|
|
|
168 |
|
|
|
169 |
|
|
|
170 |
|
|
|
171 |
|
|
|
172 |
|
|
|
173 |
|
|
|
174 |
|
|
|
175 |
|
|
|
176 |
|
|
|
177 |
|
|
|
178 |
|
|
|
179 |
|
|
|
180 |
|
|
Dave Raggett Page 3 |
181 |
|
|
|
182 |
|
|
|
183 |
|
|
|
184 |
|
|
HTML Tables 7th July 1995 |
185 |
|
|
|
186 |
|
|
An Introduction to HTML Tables |
187 |
|
|
|
188 |
|
|
Table start with an optional caption followed one or more rows. Each |
189 |
|
|
row is formed by one or more cells, which are differentiated into |
190 |
|
|
header and data cells. Cells can be merged across rows and columns, |
191 |
|
|
and include attributes assisting rendering to speech and braille, or |
192 |
|
|
for exporting table data into databases. The model provides little |
193 |
|
|
direct support for control over appearence, for example border |
194 |
|
|
styles and margins, as these can be handled via subclassing and |
195 |
|
|
associated style sheets. |
196 |
|
|
|
197 |
|
|
Tables can contain a wide range of content, such as headers, lists, |
198 |
|
|
paragraphs, forms, figures, preformatted text and even nested |
199 |
|
|
tables. When the table is flush left or right, subsequent elements |
200 |
|
|
will be flowed around the table if there is sufficient room. This |
201 |
|
|
behaviour is disabled when the noflow attribute is given or the |
202 |
|
|
table align attribute is center (the default), or justify. |
203 |
|
|
|
204 |
|
|
Example |
205 |
|
|
|
206 |
|
|
<TABLE BORDER=ALL> |
207 |
|
|
<CAPTION>A test table with merged cells</CAPTION> |
208 |
|
|
<TR><TH ROWSPAN=2><TH COLSPAN=2>Average |
209 |
|
|
<TH ROWSPAN=2>other<BR>category<TH>Misc |
210 |
|
|
<TR><TH>height<TH>weight |
211 |
|
|
<TR><TH ALIGN=LEFT>males<TD>1.9<TD>0.003 |
212 |
|
|
<TR><TH ALIGN=LEFT ROWSPAN=2>females<TD>1.7<TD>0.002 |
213 |
|
|
</TABLE> |
214 |
|
|
|
215 |
|
|
This would be rendered something like: |
216 |
|
|
|
217 |
|
|
A test table with merged cells |
218 |
|
|
/--------------------------------------------------\ |
219 |
|
|
| | Average | other | Misc | |
220 |
|
|
| |-------------------| category |--------| |
221 |
|
|
| | height | weight | | | |
222 |
|
|
|-----------------------------------------|--------| |
223 |
|
|
| males | 1.9 | 0.003 | | | |
224 |
|
|
|-----------------------------------------|--------| |
225 |
|
|
| females | 1.7 | 0.002 | | | |
226 |
|
|
\--------------------------------------------------/ |
227 |
|
|
|
228 |
|
|
|
229 |
|
|
There are several points to note: |
230 |
|
|
|
231 |
|
|
* By default, header cells are centered while data cells are flush |
232 |
|
|
left. This can be overriden by the ALIGN attribute for the cell |
233 |
|
|
or a matching HSPEC element. |
234 |
|
|
|
235 |
|
|
* Cells may be empty. |
236 |
|
|
|
237 |
|
|
* Cells spanning rows contribute to the column count on each of |
238 |
|
|
the spanned rows, but only appear in the markup once (in the |
239 |
|
|
|
240 |
|
|
Dave Raggett Page 4 |
241 |
|
|
|
242 |
|
|
|
243 |
|
|
|
244 |
|
|
HTML Tables 7th July 1995 |
245 |
|
|
|
246 |
|
|
first row spanned). |
247 |
|
|
|
248 |
|
|
* If the column count for the table is greater than the number of |
249 |
|
|
cells for a given row (after including cells for spanned rows), |
250 |
|
|
the missing cells are treated as occurring on the right handside |
251 |
|
|
of the table, and rendered as empty cells. |
252 |
|
|
|
253 |
|
|
* The row count is determined by the TR elements - any rows |
254 |
|
|
implied by cells spanning rows beyond this should be ignored. |
255 |
|
|
|
256 |
|
|
* The user agent should be able to recover from a missing <TR> tag |
257 |
|
|
prior to the first row as the TH and TD elements can only occur |
258 |
|
|
within the TR element. |
259 |
|
|
|
260 |
|
|
* It is invalid to have cells overlap, see below for an example. |
261 |
|
|
In such cases, the rendering is implementation dependent. |
262 |
|
|
|
263 |
|
|
An example of an invalid table: |
264 |
|
|
|
265 |
|
|
<table border=all> |
266 |
|
|
<tr><tdrowspan=2>1<td>2<td>3<td>4<td>5 |
267 |
|
|
<tr><td rowspan=2>6 |
268 |
|
|
<tr><td colspan=2>7<td>8 |
269 |
|
|
</table> |
270 |
|
|
|
271 |
|
|
which looks something like: |
272 |
|
|
|
273 |
|
|
/-------------------\ |
274 |
|
|
| 1 | 2 | 3 | 4 | 5 | |
275 |
|
|
| |---------------| |
276 |
|
|
| | 6 | | | | The cells labelled 6 and 7 overlap! |
277 |
|
|
|---|...|-----------| |
278 |
|
|
| 7 : | 8 | | | |
279 |
|
|
\-------------------/ |
280 |
|
|
|
281 |
|
|
|
282 |
|
|
|
283 |
|
|
|
284 |
|
|
|
285 |
|
|
|
286 |
|
|
|
287 |
|
|
|
288 |
|
|
|
289 |
|
|
|
290 |
|
|
|
291 |
|
|
|
292 |
|
|
|
293 |
|
|
|
294 |
|
|
|
295 |
|
|
|
296 |
|
|
|
297 |
|
|
|
298 |
|
|
|
299 |
|
|
|
300 |
|
|
Dave Raggett Page 5 |
301 |
|
|
|
302 |
|
|
|
303 |
|
|
|
304 |
|
|
HTML Tables 7th July 1995 |
305 |
|
|
|
306 |
|
|
Some more features |
307 |
|
|
|
308 |
|
|
The next few sections introduce some more features of the html table |
309 |
|
|
model, leaving the advanced features to later on. |
310 |
|
|
|
311 |
|
|
Table Captions |
312 |
|
|
|
313 |
|
|
The CAPTION element can be used to define a table caption, and if |
314 |
|
|
present, must occur immediately following the TABLE start tag. You |
315 |
|
|
can specify the position of the caption relative to the table with |
316 |
|
|
the ALIGN attribute, e.g. |
317 |
|
|
|
318 |
|
|
<CAPTION ALIGN=BOTTOM>the table caption</CAPTION> |
319 |
|
|
|
320 |
|
|
The ALIGN attribute can take the values: TOP, BOTTOM, LEFT or RIGHT. |
321 |
|
|
The attribute value is case insensitive. Note that the end tag is |
322 |
|
|
optional. |
323 |
|
|
|
324 |
|
|
Head, Body and Foot table sections |
325 |
|
|
|
326 |
|
|
The THEAD, TBODY and TFOOT elements can be used to group table rows |
327 |
|
|
into corresponding head, body and foot sections. This gives user |
328 |
|
|
agents a better handle on rendering long tables, e.g. if the table |
329 |
|
|
has a large number of rows in the body section, the user agent could |
330 |
|
|
use a scrolling region to render the table compactly. When rendering |
331 |
|
|
to a paged output device tables will often have to be broken across |
332 |
|
|
page boundaries. The thead, tbody and tfoot elements allow the user |
333 |
|
|
agent to repeat the table foot at the bottom of the current page and |
334 |
|
|
the table head at the top of the new page before continuing on, |
335 |
|
|
where left off, with the body section. |
336 |
|
|
|
337 |
|
|
Another motivation for using thead, tbody and tfoot elements is the |
338 |
|
|
ability they give authors to more easily control the border style |
339 |
|
|
and the horizontal and vertical alignment of cell contents. |
340 |
|
|
|
341 |
|
|
|
342 |
|
|
<TABLE BORDER=FEW> |
343 |
|
|
<CAPTION>A test table with merged cells</CAPTION> |
344 |
|
|
<THEAD> |
345 |
|
|
<TR><TH ROWSPAN=2><TH COLSPAN=2>Average |
346 |
|
|
<TH ROWSPAN=2>other<BR>category<TH>Misc |
347 |
|
|
<TBODY> |
348 |
|
|
<TR><TH>height<TH>weight |
349 |
|
|
<TR><TH ALIGN=LEFT>males<TD>1.9<TD>0.003 |
350 |
|
|
<TR><TH ALIGN=LEFT ROWSPAN=2>females<TD>1.7<TD>0.002 |
351 |
|
|
</TABLE> |
352 |
|
|
|
353 |
|
|
|
354 |
|
|
Note: the end tags for THEAD, TBODY and TFOOT can always be omitted, |
355 |
|
|
but if you have a THEAD, then you will need to include a TBODY start |
356 |
|
|
tag too. Otherwise, the parser won't be able to distinguish body |
357 |
|
|
rows from head rows. |
358 |
|
|
|
359 |
|
|
|
360 |
|
|
Dave Raggett Page 6 |
361 |
|
|
|
362 |
|
|
|
363 |
|
|
|
364 |
|
|
HTML Tables 7th July 1995 |
365 |
|
|
|
366 |
|
|
Border Styles |
367 |
|
|
|
368 |
|
|
The BORDER attribute on the TABLE element can be used to select |
369 |
|
|
which borders are drawn from several common categories. More |
370 |
|
|
detailed control may be obtained by using an associated style sheet. |
371 |
|
|
The default behaviour is to render the table without borders. |
372 |
|
|
|
373 |
|
|
border=none |
374 |
|
|
suppress borders - useful with graphics etc. |
375 |
|
|
|
376 |
|
|
border=frame |
377 |
|
|
outer border around table only |
378 |
|
|
|
379 |
|
|
border=basic |
380 |
|
|
horizontal border between THEAD and TBODY, and between TBODY and |
381 |
|
|
TFOOT |
382 |
|
|
|
383 |
|
|
border=rows |
384 |
|
|
like border=basic with an outer border, plus horizontal borders |
385 |
|
|
between rows |
386 |
|
|
|
387 |
|
|
border=cols |
388 |
|
|
like border=basic with an outer border, plus vertical borders |
389 |
|
|
between columns |
390 |
|
|
|
391 |
|
|
border=all |
392 |
|
|
borders around all cells, including an outer border |
393 |
|
|
|
394 |
|
|
Borderless tables are useful for layout purposes as well as their |
395 |
|
|
traditional role for tabular data, for instance with fill-out forms: |
396 |
|
|
|
397 |
|
|
name: [John Smith ] |
398 |
|
|
card number: [4619 693523 20851 ] |
399 |
|
|
expires: [03] / [97] |
400 |
|
|
telephone: [212 873 2739 ] |
401 |
|
|
|
402 |
|
|
This can be represented as a table with one row and two columns. The |
403 |
|
|
first column is right aligned, while the second is left aligned. |
404 |
|
|
This example could be marked up as: |
405 |
|
|
|
406 |
|
|
<table border=none> |
407 |
|
|
<tr> |
408 |
|
|
<td align=right> |
409 |
|
|
name:<br> |
410 |
|
|
card number:<br> |
411 |
|
|
expires:<br> |
412 |
|
|
telephone: |
413 |
|
|
<td align=left> |
414 |
|
|
<input name="name" size=18><br> |
415 |
|
|
<input name="cardnum" size=18><br> |
416 |
|
|
<input name="expires-month" size=2> / |
417 |
|
|
<input name="expires-year" size=2><br> |
418 |
|
|
<input name="phone" size=18><br> |
419 |
|
|
|
420 |
|
|
Dave Raggett Page 7 |
421 |
|
|
|
422 |
|
|
|
423 |
|
|
|
424 |
|
|
HTML Tables 7th July 1995 |
425 |
|
|
|
426 |
|
|
</table> |
427 |
|
|
|
428 |
|
|
|
429 |
|
|
The use of such techniques is one of the motivations for using |
430 |
|
|
nested tables, where borderless tables are used to layout cell |
431 |
|
|
contents for an enclosing table |
432 |
|
|
|
433 |
|
|
Table Layout Options |
434 |
|
|
|
435 |
|
|
Normally, tables are rendered in a two stage process. The first |
436 |
|
|
stage determines suitable column widths based on cell content, while |
437 |
|
|
the second stage actually renders the table using these widths. For |
438 |
|
|
large tables or slow network connections, you can give the user |
439 |
|
|
agent a chance to start displaying the table incrementally as the |
440 |
|
|
data arrives from the network. To do this use the COLS attribute on |
441 |
|
|
the TABLE element to specify the number of columns, e.g. <table |
442 |
|
|
border=all cols=5>. |
443 |
|
|
|
444 |
|
|
For the incremental display mode, the default table width is the |
445 |
|
|
current window size (the space between the left and right margins). |
446 |
|
|
You can set the table width relative to this default using the WIDTH |
447 |
|
|
attribute e.g. width="50%". By default, With the incremental display |
448 |
|
|
mode all columns have the same width. Note that the WIDTH attribute |
449 |
|
|
takes the form of a positive integer followed by a percent sign. |
450 |
|
|
|
451 |
|
|
You can specify the relative widths of some or all of the columns |
452 |
|
|
using the COLW element, e.g. <colw col=3 width=2.5>. This example |
453 |
|
|
specifies a relative width of two and a half for column 3. The |
454 |
|
|
default relative width is 1.0. Note that the incremental mode may |
455 |
|
|
result in columns that are too small in some cases. The user agent |
456 |
|
|
can then choose to redraw the table with more appropriate column |
457 |
|
|
widths once all of the table data has been received. |
458 |
|
|
|
459 |
|
|
Both the COL and the WIDTH attributes are required for the COLW |
460 |
|
|
element. The WIDTH attribute takes the form of a positive number and |
461 |
|
|
may include a decimal point for floating point values. The COL |
462 |
|
|
attribute is a positive integer value. COL=1 denotes the first |
463 |
|
|
column, with COL=2 for the second column and so on, where columns |
464 |
|
|
are numbered from left to right. Simple column ranges are also |
465 |
|
|
permitted, e.g. COL=3-7 which matches columns 3, 4, 5, 6 and 7. The |
466 |
|
|
range is limited to the form lower-upper, when both values are |
467 |
|
|
positive integer values separated by a hyphen, and upper should be |
468 |
|
|
greater than lower. |
469 |
|
|
|
470 |
|
|
An example for an incremental mode table with 4 columns: |
471 |
|
|
|
472 |
|
|
<table borders=all cols=4 width="80%"> |
473 |
|
|
<colw col=1 width=4> |
474 |
|
|
<colw col=2 width=1.5> |
475 |
|
|
<colw col=3 width=1.5> |
476 |
|
|
<colw col=4 width=3> |
477 |
|
|
<tr> -- table data follows -- |
478 |
|
|
</table> |
479 |
|
|
|
480 |
|
|
Dave Raggett Page 8 |
481 |
|
|
|
482 |
|
|
|
483 |
|
|
|
484 |
|
|
HTML Tables 7th July 1995 |
485 |
|
|
|
486 |
|
|
|
487 |
|
|
You can also specify relative widths for the auto layout mode. The |
488 |
|
|
same goes for the table width attribute. The sizing algorithm does |
489 |
|
|
its best to meet your suggestions, but ensures that all the columns |
490 |
|
|
are large enough for the cell contents. Further details on the |
491 |
|
|
algorithm are given in a later section. |
492 |
|
|
|
493 |
|
|
|
494 |
|
|
|
495 |
|
|
|
496 |
|
|
|
497 |
|
|
|
498 |
|
|
|
499 |
|
|
|
500 |
|
|
|
501 |
|
|
|
502 |
|
|
|
503 |
|
|
|
504 |
|
|
|
505 |
|
|
|
506 |
|
|
|
507 |
|
|
|
508 |
|
|
|
509 |
|
|
|
510 |
|
|
|
511 |
|
|
|
512 |
|
|
|
513 |
|
|
|
514 |
|
|
|
515 |
|
|
|
516 |
|
|
|
517 |
|
|
|
518 |
|
|
|
519 |
|
|
|
520 |
|
|
|
521 |
|
|
|
522 |
|
|
|
523 |
|
|
|
524 |
|
|
|
525 |
|
|
|
526 |
|
|
|
527 |
|
|
|
528 |
|
|
|
529 |
|
|
|
530 |
|
|
|
531 |
|
|
|
532 |
|
|
|
533 |
|
|
|
534 |
|
|
|
535 |
|
|
|
536 |
|
|
|
537 |
|
|
|
538 |
|
|
|
539 |
|
|
|
540 |
|
|
Dave Raggett Page 9 |
541 |
|
|
|
542 |
|
|
|
543 |
|
|
|
544 |
|
|
HTML Tables 7th July 1995 |
545 |
|
|
|
546 |
|
|
Horizontal Alignment of Cell Contents |
547 |
|
|
|
548 |
|
|
By default, data cells (TD) are left aligned while header cells (TH) |
549 |
|
|
are centered. You can override the default alignment with the ALIGN |
550 |
|
|
attribute on the table cell, e.g. <td align=right>. There are |
551 |
|
|
several attributes assoociated with horizontal alignment: |
552 |
|
|
|
553 |
|
|
ALIGN |
554 |
|
|
This can be one of: LEFT, CENTER, RIGHT, JUSTIFY and CHAR. User |
555 |
|
|
agents may treat Justify as left alignment if they lack support |
556 |
|
|
for text justification. ALIGN=CHAR is used for aligning cell |
557 |
|
|
contents on a particular character. The attribute value for |
558 |
|
|
ALIGN is case insensitive. |
559 |
|
|
|
560 |
|
|
CHAR |
561 |
|
|
This is used to specify an alignment character for use with |
562 |
|
|
align=char, e.g. char=":". The default character is "." |
563 |
|
|
|
564 |
|
|
CHAROFF |
565 |
|
|
This is used with align=char to specify the relative offset of |
566 |
|
|
the alignment character with respect to the width of the cell. |
567 |
|
|
The attribute value takes the form of a positive integer in the |
568 |
|
|
range 1 to 100 followed by a percent sign, e.g. charoff="50%". |
569 |
|
|
|
570 |
|
|
The earlier example of aligning form fields can be more simply |
571 |
|
|
achieved using align on char and using the CHAR attribute to set the |
572 |
|
|
alignment character to a convenient character, for example: |
573 |
|
|
|
574 |
|
|
<table> |
575 |
|
|
<tr> |
576 |
|
|
<td align=char char=":"> |
577 |
|
|
name: <input name="name" size=18><br> |
578 |
|
|
card number: <input name="cardnum" size=18><br> |
579 |
|
|
expires: <input name="expires-month" size=2> / |
580 |
|
|
<input name="expires-year" size=2><br> |
581 |
|
|
telephone:<input name="phone" size=18><br> |
582 |
|
|
</table> |
583 |
|
|
|
584 |
|
|
|
585 |
|
|
Each line in the table is then indented so that all the colons are |
586 |
|
|
positioned under one another. |
587 |
|
|
|
588 |
|
|
Vertical Alignment of Cell Contents |
589 |
|
|
|
590 |
|
|
By default, cell contents are vertically aligned at the middle of |
591 |
|
|
each cell. The VALIGN attribute can be used with TH or TD to |
592 |
|
|
override this default. It can take one of the following values: TOP, |
593 |
|
|
MIDDLE or BOTTOM, e.g. <TD VALIGN=TOP>. Note that the attribute |
594 |
|
|
value is case insensitive. |
595 |
|
|
|
596 |
|
|
Note: the ability to ensure several cells on the same row share the |
597 |
|
|
same baseline has been left out of this specification owing to |
598 |
|
|
difficulties in providing a adequate definition of this feature. |
599 |
|
|
|
600 |
|
|
Dave Raggett Page 10 |
601 |
|
|
|
602 |
|
|
|
603 |
|
|
|
604 |
|
|
HTML Tables 7th July 1995 |
605 |
|
|
|
606 |
|
|
|
607 |
|
|
More advanced ways of specifying alignment |
608 |
|
|
|
609 |
|
|
If there are lots of cells, it rapidly becomes tedious and |
610 |
|
|
inefficient to explicitly specify the horizontal and vertical |
611 |
|
|
alignment attributes on each cell. A more compact alternative is to |
612 |
|
|
use the HSPEC and VSPEC elements to specify alignment properties for |
613 |
|
|
groups of matching cells. |
614 |
|
|
|
615 |
|
|
HSPEC and VSPEC elements specify alignment properties for table |
616 |
|
|
cells and act like IF-THEN rules. The IF part is a conjunction of |
617 |
|
|
the following optional parts: |
618 |
|
|
|
619 |
|
|
1. whether the cell is in thead, tbody or tfoot (rowgroup) |
620 |
|
|
|
621 |
|
|
2. the class attribute of the current row (rowclass) |
622 |
|
|
|
623 |
|
|
3. whether the cell is a header or data cell (celltype) |
624 |
|
|
|
625 |
|
|
4. the class attribute of the cell itself (cellclass) |
626 |
|
|
|
627 |
|
|
5. the cell's row and/or column number (row or col) |
628 |
|
|
|
629 |
|
|
If the cell straddles two or more rows or columns, the number of the |
630 |
|
|
first row/column is used for evaluating the match. |
631 |
|
|
|
632 |
|
|
The THEN part sets the horizontal or vertical alignment for the |
633 |
|
|
cell's contents. The class attribute of the hspec or tspec element |
634 |
|
|
matching a cell can also be used by style sheets to attach |
635 |
|
|
additional rending properties to groups of cells. |
636 |
|
|
|
637 |
|
|
Conflict resolution is real simple: |
638 |
|
|
|
639 |
|
|
1. properties defined as attributes on cells always override hspec |
640 |
|
|
or vspec |
641 |
|
|
|
642 |
|
|
2. hspec and vspec are lexically ordered from general to specific, |
643 |
|
|
i.e. the last matching hspec or vspec elements sets the cell's |
644 |
|
|
alignment properties |
645 |
|
|
|
646 |
|
|
Some simple examples: |
647 |
|
|
|
648 |
|
|
|
649 |
|
|
<hspec celltype=th col=1 align=center> |
650 |
|
|
<hspec celltype=td col=1 align=left> |
651 |
|
|
|
652 |
|
|
|
653 |
|
|
This example sets different alignments for cells in column 1 |
654 |
|
|
depending on whether they are header or data cells. When several |
655 |
|
|
HSPEC elements match a given cell, the last one wins. Note that an |
656 |
|
|
explicit ALIGN attribute set on the cell itself always wins over any |
657 |
|
|
HSPEC elements. |
658 |
|
|
|
659 |
|
|
|
660 |
|
|
Dave Raggett Page 11 |
661 |
|
|
|
662 |
|
|
|
663 |
|
|
|
664 |
|
|
HTML Tables 7th July 1995 |
665 |
|
|
|
666 |
|
|
|
667 |
|
|
<vspec rowgroup=thead row=1-3 valign=bottom> |
668 |
|
|
<vspec rowgroup=tbody row=1-3 align=top> |
669 |
|
|
|
670 |
|
|
|
671 |
|
|
This example sets different alignments for cells in rows 1 to 3 |
672 |
|
|
depending on whether they are in the THEAD or in the TBODY. When |
673 |
|
|
several VSPEC elements match a given cell, the last one wins. Note |
674 |
|
|
that an explicit VALIGN attribute set on the cell itself always wins |
675 |
|
|
over any VSPEC elements. |
676 |
|
|
|
677 |
|
|
|
678 |
|
|
|
679 |
|
|
|
680 |
|
|
|
681 |
|
|
|
682 |
|
|
|
683 |
|
|
|
684 |
|
|
|
685 |
|
|
|
686 |
|
|
|
687 |
|
|
|
688 |
|
|
|
689 |
|
|
|
690 |
|
|
|
691 |
|
|
|
692 |
|
|
|
693 |
|
|
|
694 |
|
|
|
695 |
|
|
|
696 |
|
|
|
697 |
|
|
|
698 |
|
|
|
699 |
|
|
|
700 |
|
|
|
701 |
|
|
|
702 |
|
|
|
703 |
|
|
|
704 |
|
|
|
705 |
|
|
|
706 |
|
|
|
707 |
|
|
|
708 |
|
|
|
709 |
|
|
|
710 |
|
|
|
711 |
|
|
|
712 |
|
|
|
713 |
|
|
|
714 |
|
|
|
715 |
|
|
|
716 |
|
|
|
717 |
|
|
|
718 |
|
|
|
719 |
|
|
|
720 |
|
|
Dave Raggett Page 12 |
721 |
|
|
|
722 |
|
|
|
723 |
|
|
|
724 |
|
|
HTML Tables 7th July 1995 |
725 |
|
|
|
726 |
|
|
Autolayout Table Sizing Algorithm |
727 |
|
|
|
728 |
|
|
The layout algorithm for the incremental display mode has already |
729 |
|
|
been presented in a previous section. If the COLS attribute is |
730 |
|
|
missing from the table start tag, then the user agent should use the |
731 |
|
|
autolayout sizing algorithm, which uses two passes through the table |
732 |
|
|
data. |
733 |
|
|
|
734 |
|
|
In the first pass, word wrapping is disabled, and the user agent |
735 |
|
|
keeps track of the minimum and maximum width of each cell. The |
736 |
|
|
maximum width is given by the widest line. As word wrap has been |
737 |
|
|
disabled, paragraphs are treated as long lines unless broken by <BR> |
738 |
|
|
elements. The minimum width is given by the widest word or image |
739 |
|
|
etc. taking into account leading indents and list bullets etc. In |
740 |
|
|
other words, if you were to format the cell's content in a window of |
741 |
|
|
its own, determine the minimum width you could make the window |
742 |
|
|
before things begin to be clipped. |
743 |
|
|
|
744 |
|
|
The minimum and maximum cell widths are then used to determine the |
745 |
|
|
corresponding minimum and maximum widths for the columns. These in |
746 |
|
|
turn, are used to find the minimum and maximum width for the table. |
747 |
|
|
Note that cells can contain nested tables, but this doesn't |
748 |
|
|
complicate the code significantly. The next step is to assign column |
749 |
|
|
widths according to the current window size (more accurately - the |
750 |
|
|
width between the left and right margins). |
751 |
|
|
|
752 |
|
|
The table borders and intercell margins need to be included in the |
753 |
|
|
assignment step. There are three cases: |
754 |
|
|
|
755 |
|
|
1. The minimum table width is equal to or wider than the available |
756 |
|
|
space. In this case, assign the minimum widths and allow the |
757 |
|
|
user to scroll horizontally. For conversion to braille, it will |
758 |
|
|
be necessary to replace the cells by references to notes |
759 |
|
|
containing their full content. By convention these appear before |
760 |
|
|
the table. |
761 |
|
|
|
762 |
|
|
2. The maximum table width fits within the available space. In this |
763 |
|
|
case, set the columns to their maximum widths. |
764 |
|
|
|
765 |
|
|
3. The maximum width of the table is greater than the available |
766 |
|
|
space, but the minimum table width is smaller. In this case, |
767 |
|
|
find the difference between the available space and the minimum |
768 |
|
|
table width, lets call it W. Lets also call D the difference |
769 |
|
|
between maximum and minimum width of the table. |
770 |
|
|
|
771 |
|
|
For each column, let d be the the difference between maximum and |
772 |
|
|
minimum width of that column. Now set the column's width to the |
773 |
|
|
minimum width plus d times W over D. This makes columns with |
774 |
|
|
lots of text wider than columns with smaller amounts. |
775 |
|
|
|
776 |
|
|
This assignment step is then repeated for nested tables. In this |
777 |
|
|
case, the width of the enclosing table's cell plays the role of the |
778 |
|
|
current window size in the above description. This process is |
779 |
|
|
|
780 |
|
|
Dave Raggett Page 13 |
781 |
|
|
|
782 |
|
|
|
783 |
|
|
|
784 |
|
|
HTML Tables 7th July 1995 |
785 |
|
|
|
786 |
|
|
repeated recursively for all nested tables. |
787 |
|
|
|
788 |
|
|
If the table width is specified with the WIDTH attribute, the user |
789 |
|
|
agent attempts to set column widths to match. The WIDTH attribute |
790 |
|
|
should be disregarded if this results in columns having less than |
791 |
|
|
their minimum widths. |
792 |
|
|
|
793 |
|
|
If relative widths are specified with the COLW element, the |
794 |
|
|
algorithm is modified to increase column widths over the minimum |
795 |
|
|
width to meet the relative width constraints. |
796 |
|
|
|
797 |
|
|
|
798 |
|
|
|
799 |
|
|
|
800 |
|
|
|
801 |
|
|
|
802 |
|
|
|
803 |
|
|
|
804 |
|
|
|
805 |
|
|
|
806 |
|
|
|
807 |
|
|
|
808 |
|
|
|
809 |
|
|
|
810 |
|
|
|
811 |
|
|
|
812 |
|
|
|
813 |
|
|
|
814 |
|
|
|
815 |
|
|
|
816 |
|
|
|
817 |
|
|
|
818 |
|
|
|
819 |
|
|
|
820 |
|
|
|
821 |
|
|
|
822 |
|
|
|
823 |
|
|
|
824 |
|
|
|
825 |
|
|
|
826 |
|
|
|
827 |
|
|
|
828 |
|
|
|
829 |
|
|
|
830 |
|
|
|
831 |
|
|
|
832 |
|
|
|
833 |
|
|
|
834 |
|
|
|
835 |
|
|
|
836 |
|
|
|
837 |
|
|
|
838 |
|
|
|
839 |
|
|
|
840 |
|
|
Dave Raggett Page 14 |
841 |
|
|
|
842 |
|
|
|
843 |
|
|
|
844 |
|
|
HTML Tables 7th July 1995 |
845 |
|
|
|
846 |
|
|
HTML Table DTD |
847 |
|
|
|
848 |
|
|
The DTD or document type definition provides a formal definition of |
849 |
|
|
the allowed syntax for html tables. |
850 |
|
|
|
851 |
|
|
|
852 |
|
|
<!-- The HTML Table DTD --> |
853 |
|
|
|
854 |
|
|
<!-- border styles (overridden by style sheets) |
855 |
|
|
|
856 |
|
|
none suppress borders - useful with graphics etc. |
857 |
|
|
frame outer border around table only |
858 |
|
|
basic border between thead/tbody and tbody/tfoot |
859 |
|
|
rows as per basic plus frame plus row separators |
860 |
|
|
cols as per basic plus frame plus column separators |
861 |
|
|
all draw borders around all cells |
862 |
|
|
--> |
863 |
|
|
|
864 |
|
|
<!ENTITY % border.styles |
865 |
|
|
"none | frame | basic | rows | cols | all"> |
866 |
|
|
|
867 |
|
|
<!-- horizontal alignment attributes for cell contents --> |
868 |
|
|
|
869 |
|
|
<!ENTITY % cell.halign |
870 |
|
|
"align (left|center|right|justify|char) #IMPLIED |
871 |
|
|
char CDATA #IMPLIED -- alignment char, e.g. align=':' -- |
872 |
|
|
charoff CDATA #IMPLIED -- offset of alignment char, eg charoff='50%' --" |
873 |
|
|
> |
874 |
|
|
|
875 |
|
|
<!-- vertical alignment attributes for cell contents --> |
876 |
|
|
|
877 |
|
|
<!ENTITY % cell.valign |
878 |
|
|
"valign (top|middle|bottom) #IMPLIED" |
879 |
|
|
> |
880 |
|
|
|
881 |
|
|
<!-- |
882 |
|
|
%body.content allows table cells to contain headers, paras, |
883 |
|
|
lists, form elements and even arbitrarily nested tables. |
884 |
|
|
|
885 |
|
|
%text is text characters, including character entities and |
886 |
|
|
character emphasis elements, IMG and anchors |
887 |
|
|
--> |
888 |
|
|
|
889 |
|
|
<!ELEMENT table - - (caption?, (colw|hspec|vspec)*, thead?, tbody, tfoot?)> |
890 |
|
|
<!ELEMENT caption - O (%text)+> |
891 |
|
|
<!ELEMENT colw - O EMPTY> |
892 |
|
|
<!ELEMENT hspec - O EMPTY> |
893 |
|
|
<!ELEMENT vspec - O EMPTY> |
894 |
|
|
<!ELEMENT thead - O tr+> |
895 |
|
|
<!ELEMENT tbody O O tr+> |
896 |
|
|
<!ELEMENT tfoot - O tr+> |
897 |
|
|
<!ELEMENT tr - O (th|td)+> |
898 |
|
|
<!ELEMENT (th|td) - O %body.content> |
899 |
|
|
|
900 |
|
|
Dave Raggett Page 15 |
901 |
|
|
|
902 |
|
|
|
903 |
|
|
|
904 |
|
|
HTML Tables 7th July 1995 |
905 |
|
|
|
906 |
|
|
|
907 |
|
|
<!ATTLIST table |
908 |
|
|
width CDATA #IMPLIED -- table width relative to window -- |
909 |
|
|
cols NUMBER #IMPLIED -- used for immediate display mode -- |
910 |
|
|
border (%border.styles) #IMPLIED -- see above definition -- |
911 |
|
|
nowrap (nowrap) #IMPLIED -- disable word wrap inside table -- |
912 |
|
|
> |
913 |
|
|
|
914 |
|
|
<!ATTLIST caption |
915 |
|
|
align (top|bottom) #IMPLIED -- relative to table -- |
916 |
|
|
> |
917 |
|
|
|
918 |
|
|
<!ATTLIST colw -- specifies relative column widths -- |
919 |
|
|
col CDATA #REQUIRED -- column number or range -- |
920 |
|
|
width CDATA #REQUIRED -- positive number, e.g. 2.5 -- |
921 |
|
|
> |
922 |
|
|
|
923 |
|
|
<!-- hspec and vspec elements specify alignment properties |
924 |
|
|
for table cells and act like IF-THEN rules. The IF part is |
925 |
|
|
a conjunction of the following optional parts: |
926 |
|
|
|
927 |
|
|
a) whether the cell is in thead, tbody or tfoot (rowgroup) |
928 |
|
|
b) the class attribute of the current row (rowclass) |
929 |
|
|
c) whether the cell is a header or data cell (celltype) |
930 |
|
|
d) the class attribute of the cell itself (cellclass) |
931 |
|
|
e) the cell's row and/or column number (row or col) |
932 |
|
|
|
933 |
|
|
If the cell straddles two or more rows or columns, the number |
934 |
|
|
of the first row/column is used for evaluating the match. |
935 |
|
|
|
936 |
|
|
The THEN part sets the horizontal or vertical alignment for |
937 |
|
|
the cell's contents. The class attribute of the hspec or tspec |
938 |
|
|
element matching a cell can also be used by style sheets to |
939 |
|
|
attach additional rending properties to groups of cells. |
940 |
|
|
|
941 |
|
|
Conflict resolution is real simple: |
942 |
|
|
|
943 |
|
|
a) properties defined as attributes on cells always |
944 |
|
|
override hspec or vspec |
945 |
|
|
|
946 |
|
|
b) hspec and vspec are lexically ordered from general |
947 |
|
|
to specific, i.e. the last matching hspec or vspec |
948 |
|
|
elements sets the cell's alignment properties |
949 |
|
|
--> |
950 |
|
|
|
951 |
|
|
<!ATTLIST hspec |
952 |
|
|
rowgroup (thead|tbody|tfoot) #IMPLIED -- enclosing row group -- |
953 |
|
|
rowclass CDATA #IMPLIED -- class of enclosing row -- |
954 |
|
|
celltype (th|td) #IMPLIED -- header, data or either -- |
955 |
|
|
cellclass CDATA #IMPLIED -- class of cell itself -- |
956 |
|
|
%cell.halign; -- implied horizontal alignment -- |
957 |
|
|
> |
958 |
|
|
|
959 |
|
|
|
960 |
|
|
Dave Raggett Page 16 |
961 |
|
|
|
962 |
|
|
|
963 |
|
|
|
964 |
|
|
HTML Tables 7th July 1995 |
965 |
|
|
|
966 |
|
|
<!ATTLIST vspec |
967 |
|
|
rowgroup (thead|tbody|tfoot) #IMPLIED -- enclosing row group -- |
968 |
|
|
rowclass CDATA #IMPLIED -- class of enclosing row -- |
969 |
|
|
celltype (th|td) #IMPLIED -- header, data or either -- |
970 |
|
|
cellclass CDATA #IMPLIED -- class of cell itself -- |
971 |
|
|
%cell.valign; |
972 |
|
|
> |
973 |
|
|
|
974 |
|
|
<!ATTLIST tr -- table row -- |
975 |
|
|
class CDATA #IMPLIED> |
976 |
|
|
|
977 |
|
|
<!ATTLIST (th|td) -- header or data cell -- |
978 |
|
|
class CDATA #IMPLIED> |
979 |
|
|
%cell.halign; -- horizontal alignment -- |
980 |
|
|
%cell.valign; -- vertical alignment -- |
981 |
|
|
axis CDATA #IMPLIED -- defaults to cell content -- |
982 |
|
|
axes CDATA #IMPLIED -- list of axis names -- |
983 |
|
|
> |
984 |
|
|
|
985 |
|
|
|
986 |
|
|
|
987 |
|
|
|
988 |
|
|
|
989 |
|
|
|
990 |
|
|
|
991 |
|
|
|
992 |
|
|
|
993 |
|
|
|
994 |
|
|
|
995 |
|
|
|
996 |
|
|
|
997 |
|
|
|
998 |
|
|
|
999 |
|
|
|
1000 |
|
|
|
1001 |
|
|
|
1002 |
|
|
|
1003 |
|
|
|
1004 |
|
|
|
1005 |
|
|
|
1006 |
|
|
|
1007 |
|
|
|
1008 |
|
|
|
1009 |
|
|
|
1010 |
|
|
|
1011 |
|
|
|
1012 |
|
|
|
1013 |
|
|
|
1014 |
|
|
|
1015 |
|
|
|
1016 |
|
|
|
1017 |
|
|
|
1018 |
|
|
|
1019 |
|
|
|
1020 |
|
|
Dave Raggett Page 17 |
1021 |
|
|
|