-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
160 lines (157 loc) · 5.96 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
<title>HTML Tables Reference</title>
</head>
<body>
<main class="container">
<!-- introduction -->
<section class="intro">
<h1 class="main-title">HTML Table Reference</h1>
<p class="main-title-text">
A reference for table tags and table attributes. Visit
<a
class="link link--external"
href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables"
target="_blank"
rel="noopener noreferrer"
>HTML table basics Overview
</a>
on MDN for more information.
</p>
</section>
<!-- table for table tags -->
<article>
<h2 id="HTML-table-tags" class="table-title">HTML table tags</h2>
<table aria-labelledby="HTML-table-tags" class="table">
<!-- table header -->
<thead class="table-head">
<tr>
<th class="table-head-title" scope="col">Tag</th>
<th class="table-head-title" scope="col">Name</th>
<th class="table-head-title" scope="col">Description</th>
</tr>
</thead>
<!-- table body -->
<tbody class="table-body">
<!-- first row -->
<tr>
<td><code class="code"><table></code></td>
<td>Table</td>
<td>The container element for all HTML tables.</td>
</tr>
<!-- second row -->
<tr>
<td><code class="code"><thead></code></td>
<td>Table Head</td>
<td>Groups the header content in a table.</td>
</tr>
<!-- third row -->
<tr>
<td><code class="code"><tbody></code></td>
<td>Table Body</td>
<td>
Groups the body content in a table, used after
<code><thead></code> and before
<code><tfoot></code> if used.
</td>
</tr>
<!-- fourth row -->
<tr>
<td><code class="code"><tfoot></code></td>
<td>Table Footer</td>
<td>
Groups the footer content in a table, used after
<code><tbody></code> or <code><thead></code> if
<code><tbody></code> is not used.
</td>
</tr>
<!-- fifth row -->
<tr>
<td><code class="code"><tr></code></td>
<td>Table Row</td>
<td>
Defines a row in a table, containing one or more
<code><td></code> or <code><th></code> elements.
</td>
</tr>
<!-- sixth row -->
<tr>
<td><code class="code"><td></code></td>
<td>Table Data</td>
<td>Defines a cell in a table that contains data.</td>
</tr>
<!-- seventh row -->
<tr>
<td><code class="code"><th></code></td>
<td>Table Header</td>
<td>
Represents a header cell in a table that can be used at the
start of a row or column. It comes with default styling (bold
and centred text). Typically used within the
<code><thead></code> element.
</td>
</tr>
</tbody>
<tfoot class="table-footer"></tfoot>
</table>
</article>
<!-- table for table attributes -->
<article>
<h2 id="HTML-table-attributes" class="table-title">HTML Table attributes</h2>
<table
aria-labelledby="HTML-table-attributes"
class="table"
>
<!-- table header -->
<thead class="table-head">
<tr>
<th class="table-head-title" scope="col">Attribute</th>
<th class="table-head-title" scope="col">Name</th>
<th class="table-head-title" scope="col">Description</th>
</tr>
</thead>
<!-- table body -->
<tbody class="table-body">
<!-- first row -->
<tr>
<td><code class="code">colspan</code></td>
<td>Column Span</td>
<td>How many columns the table cell spans.</td>
</tr>
<!-- second row -->
<tr>
<td><code class="code">rowspan</code></td>
<td>Row span</td>
<td>How many rows a table cell spans.</td>
</tr>
</tbody>
<tfoot class="table-footer"></tfoot>
</table>
</article>
<section class="table-accessibility">
<h2>Tables and Accessibility</h2>
<p>
If you use the semantic table elements above correctly, you are
already making good progress towards a well-structured table. However,
there are a few additional things you can add to your tables to
increase accessibility for <em>all</em> users.
</p>
<p>
For more information, visit the MDN guide for
<a
href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Advanced"
class="link link-external"
target="_blank"
rel="noopener noreferrer"
>HTML table advanced features and accessibility</a
>.
</p>
</section>
</main>
</body>
</html>