File: caption.html

package info (click to toggle)
wdg-html-reference 3.0-1
  • links: PTS
  • area: main
  • in suites: woody
  • size: 4,192 kB
  • ctags: 359
  • sloc: makefile: 44
file content (136 lines) | stat: -rw-r--r-- 7,513 bytes parent folder | download 
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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<html lang=en>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>CAPTION - Table Caption</title>
<link rev=Made href="mailto:liam@htmlhelp.com">
<link rel=Start href="../index.html">
<link rel=StyleSheet href="../style.css" type="text/css">
<link rel=StyleSheet href="../aural.css" type="text/css" media=aural>
<link rel="Alternate StyleSheet" href="../strictHTMLonly.css" type="text/css" title="Strict HTML only">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="author" content="Liam Quinn">
<meta name="description" content="A description of HTML 4.0's CAPTION element for table captions.">
<meta name="keywords" content="CAPTION, caption element, table caption, table captions, captioning, tables, HyperText Markup Language, HTML, HTML4, HTML 4.0, Web Design Group, WDG, &lt;caption&gt; tag, &lt;CAPTION&gt; tag">
<script type="text/javascript">
<!--
function toggle() {
  if (document.all.toggler.value == "Hide non-strict attributes") {
     document.styleSheets[0].addRule("div.transitional", "display:none");
     document.styleSheets[0].addRule("li.transitional", "display:none");
     document.styleSheets[0].addRule(".transitional", "speak:none");
     document.all.toggler.value = "Show non-strict attributes";
  } else {
     document.styleSheets[0].addRule("div.transitional", "display:block");
     document.styleSheets[0].addRule("li.transitional", "display:list-item");
     document.styleSheets[0].addRule(".transitional", "speak:inherit");
     document.all.toggler.value = "Hide non-strict attributes";
  }
}
// -->
</script>
</head>
<body>
<h2><img src="../wdglogo1.gif" width=250 height=83 alt="The Web Design Group"></h2>
<h1>CAPTION - Table Caption</h1>
<script type="text/javascript">
<!--
  if (document.styleSheets && document.all) {
    var gt;
    gt = unescape(new String("%3E"));

    document.write("<p" + gt + "<input type=button value=\"Hide non-strict attributes\" id=toggler accesskey=s onclick=\"toggle()\"" + gt + "<\/p" + gt);
  }
// -->
</script>
<table>
  <tr valign=top>
    <th>Syntax</th>
    <td><strong class=required>&lt;CAPTION&gt;</strong>...<strong class=required>&lt;/CAPTION&gt;</strong></td>
  </tr>
  <tr valign=top>
    <th>Attribute Specifications</th>
    <td>
      <ul>
        <li class=transitional>ALIGN=[ top | bottom | left | right] (caption alignment)</li>
        <li><a href="../attrs.html">common attributes</a></li>
      </ul>
    </td>
  </tr>
  <tr valign=top>
    <th>Contents</th>
    <td><a href="../inline.html">Inline elements</a></td>
  </tr>
  <tr valign=top>
    <th>Contained in</th>
    <td><a href="table.html">TABLE</a></td>
  </tr>
</table>
<p>The <strong class=html>CAPTION</strong> element defines a <em>table caption</em>. When used, <strong class=html>CAPTION</strong> must be the first element in the <strong class=html><a href="table.html">TABLE</a></strong>. Only <a href="../inline.html">inline elements</a> (<abbr title="for example"><i lang=la>e.g.</i></abbr>, <strong class=html><a href="../phrase/strong.html">STRONG</a></strong>) may be used within <strong class=html>CAPTION</strong>.</p>
<p>A good caption should provide a short heading for the table. For simple tables, the caption can also act as an adequate summary, but for more complex tables, authors should supplement the <strong class=html>CAPTION</strong> with a full summary, either through <strong class=html><a href="table.html">TABLE</a></strong>'s <strong class=html><a href="table.html#summary">SUMMARY</a></strong> attribute or within a paragraph outside of the <strong class=html>TABLE</strong>. The following example features a simple table where the <strong class=html>CAPTION</strong> provides a heading and an adequate table summary:</p>
<pre class=example><code class=html>&lt;TABLE&gt;
  <strong>&lt;CAPTION&gt;Common Usenet Abbreviations&lt;/CAPTION&gt;</strong>
  &lt;THEAD&gt;
    &lt;TR&gt;
      &lt;TH&gt;Abbreviation&lt;/TH&gt;
      &lt;TH&gt;Long Form&lt;/TH&gt;
    &lt;/TR&gt;
  &lt;/THEAD&gt;
  &lt;TBODY&gt;
    &lt;TR&gt;
      &lt;TD&gt;AFAIK&lt;/TD&gt;
      &lt;TD&gt;As Far As I Know&lt;/TD&gt;
    &lt;/TR&gt;
    &lt;TR&gt;
      &lt;TD&gt;IMHO&lt;/TD&gt;
      &lt;TD&gt;In My Humble Opinion&lt;/TD&gt;
    &lt;/TR&gt;
    &lt;TR&gt;
      &lt;TD&gt;OTOH&lt;/TD&gt;
      &lt;TD&gt;On The Other Hand&lt;/TD&gt;
    &lt;/TR&gt;
  &lt;/TBODY&gt;
&lt;/TABLE&gt;</code></pre>
<p>The next example uses <strong class=html>TABLE</strong>'s <strong class=html>SUMMARY</strong> attribute to complement the <strong class=html>CAPTION</strong>:</p>
<pre class=example><code class=html>&lt;TABLE SUMMARY="This table gives the character entity reference,
                decimal character reference, and hexadecimal character
                reference for symbols and Greek letters."&gt;
  <strong>&lt;CAPTION&gt;Symbols and Greek Letters in HTML4.0&lt;/CAPTION&gt;</strong>
  &lt;COLGROUP&gt;
  &lt;COLGROUP SPAN=3&gt;
  &lt;THEAD&gt;
    &lt;TR&gt;
      &lt;TH SCOPE=col&gt;Character&lt;/TH&gt;
      &lt;TH SCOPE=col&gt;Entity&lt;/TH&gt;
      &lt;TH SCOPE=col&gt;Decimal&lt;/TH&gt;
      &lt;TH SCOPE=col&gt;Hex&lt;/TH&gt;
    &lt;/TR&gt;
  &lt;/THEAD&gt;
  &lt;TBODY&gt;
    &lt;TR&gt;
      &lt;TD SCOPE=row&gt;Latin small f with hook&lt;/TD&gt;
      &lt;TD&gt;&amp;amp;fnof;&lt;/TD&gt;
      &lt;TD&gt;&amp;amp;#402;&lt;/TD&gt;
      &lt;TD&gt;&amp;amp;#x192;&lt;/TD&gt;
    &lt;/TR&gt;
    <var>...</var>
  &lt;/TBODY&gt;
&lt;/TABLE&gt;</code></pre>
<div class=transitional>
<p>The <a href="../deprecated.html">deprecated</a> <strong class=html>ALIGN</strong> attribute of <strong class=html>CAPTION</strong> specifies the alignment of the caption relative to the table. Possible values are <strong class=html>top</strong> (the default), <strong class=html>bottom</strong>, <strong class=html>left</strong>, and <strong class=html>right</strong>.</p>
</div>
<h2>More Information</h2>
<ul>
  <li><a href="http://www.w3.org/TR/REC-html40/struct/tables.html#edef-CAPTION">CAPTION in <abbr class=initialism title="World Wide Web Consortium">W3C</abbr> HTML4.0 Recommendation</a></li>
  <li><a href="http://www.w3.org/TR/REC-html32#table">CAPTION in <abbr class=initialism title="World Wide Web Consortium">W3C</abbr> HTML3.2 Recommendation</a></li>
  <li><a href="../../wilbur/table/caption.html">CAPTION in <abbr class=initialism title="Web Design Group">WDG</abbr> HTML3.2 Reference</a></li>
  <li><a href="http://www.hut.fi/u/jkorpela/HTML3.2/5.13.html">CAPTION in <cite>Learning HTML3.2 by Examples</cite></a></li>
</ul>
<div class=footer>
<address>Maintained by <a href="http://www.htmlhelp.com/%7Eliam/">Liam Quinn</a> &lt;<a href="mailto:liam@htmlhelp.com">liam@htmlhelp.com</a>&gt;</address>
<p class=toolbar><img src="../wdglogo-small.gif" width=105 height=40 alt="Web Design Group ~"> <a href="../index.html" rel=Start>HTML4.0Reference</a>~ <a href="../olist.html">ElementsbyFunction</a>~ <a href="../alist.html">ElementsAlphabetically</a></p>
<p class=copyright>Copyright &copy; 1998 by <a href="http://www.htmlhelp.com/%7Eliam/">Liam Quinn</a>. This material may be distributed only subject to the terms and conditions set forth in the Open Publication License, v1.0 or later (the latest version is presently available at <a href="http://www.opencontent.org/openpub/">http://www.opencontent.org/openpub/</a>).</p>
</div>
</body>
</html>