-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathf6.html
386 lines (336 loc) · 14 KB
/
f6.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
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
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>HTML - Tables</title>
<link rel="shortcut icon" sizes="200*200" type="image/x-icon" href="logo1.jpg"></head>
<body style="background-color: aliceblue;color:rgb(90, 46, 194)">
<h2>HTML - Tables</h2>
<div class="clearer"></div>
<p>The HTML tables allow web authors to arrange data like text, images, links, other tables, etc. into rows and columns of cells.</p>
<p>The HTML tables are created using the <b><table></b> tag in which the <b><tr></b> tag is used to create table rows and <b><td></b> tag is used to create data cells. The elements under <td> are regular and left aligned by default</p>
<h2>Example</h2>
<pre style="background-color:azure; class="prettyprint notranslate">
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border = "1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>
</pre>
</div>
<a target="_blank" href="f6-1.html" class="w3-btn w3-margin-bottom"><button style="background-color:rgb(115, 126, 226);">Try it Yourself</button> »</a>
</div>
<p>Here, the <b>border</b> is an attribute of <table> tag and it is used to put a border across all the cells. If you do not need a border, then you can use border = "0".</p>
<h2>Table Heading</h2>
<p>Table heading can be defined using <b><th></b> tag. This tag will be put to replace <td> tag, which is used to represent actual data cell. Normally you will put your top row as table heading as shown below, otherwise you can use <th> element in any row. Headings, which are defined in <th> tag are centered and bold by default.</p>
<h3>Example</h3>
<pre style="background-color:azure; class="prettyprint notranslate">
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<table border = "1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
</pre>
</div>
<a target="_blank" href="f6-2.html" class="w3-btn w3-margin-bottom"><button style="background-color:rgb(115, 126, 226);">Try it Yourself</button> »</a>
</div>
<h2>Cellpadding and Cellspacing Attributes</h2>
<p>There are two attributes called <i>cellpadding</i> and <i>cellspacing</i> which you will use to adjust the white space in your table cells. The cellspacing attribute defines space between table cells, while cellpadding represents the distance between cell borders and the content within a cell.</p>
<h3>Example</h3>
<pre style="background-color:azure; class="prettyprint notranslate">
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Cellpadding</title>
</head>
<body>
<table border = "1" cellpadding = "5" cellspacing = "5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
</pre>
</div>
<a target="_blank" href="f6-3.html" class="w3-btn w3-margin-bottom"><button style="background-color:rgb(115, 126, 226);">Try it Yourself</button> »</a>
</div>
<h2>Colspan and Rowspan Attributes</h2>
<p>You will use <b>colspan</b> attribute if you want to merge two or more columns into a single column. Similar way you will use <b>rowspan</b> if you want to merge two or more rows.</p>
<h3>Example</h3>
<pre style="background-color:azure; class="prettyprint notranslate">
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<table border = "1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>
</pre>
</div>
<a target="_blank" href="f6-4.html" class="w3-btn w3-margin-bottom"><button style="background-color:rgb(115, 126, 226);">Try it Yourself</button> »</a>
</div>
<h2>Tables Backgrounds</h2>
<p>You can set table background using one of the following two ways −</p>
<ul class="list">
<li><p><b>bgcolor</b> attribute − You can set background color for whole table or just for one cell.</p></li>
<li><p><b>background</b> attribute − You can set background image for whole table or just for one cell.</p></li>
</ul>
<p>You can also set border color also using <b>bordercolor</b> attribute.</p>
<blockquote><p><b>Note</b> − The <i>bgcolor</i>, <i>background</i>, and <i>bordercolor</i> attributes deprecated in HTML5. Do not use these attributes.</p></blockquote>
<h3>Example</h3>
<pre style="background-color:azure; class="prettyprint notranslate">
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border = "1" bordercolor = "green" bgcolor = "yellow">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>
</pre>
</div>
<a target="_blank" href="f6-5.html" class="w3-btn w3-margin-bottom"><button style="background-color:rgb(115, 126, 226);">Try it Yourself</button> »</a>
</div>
<p>Here is an example of using <b>background</b> attribute. Here we will use an image available in /images directory.</p>
<pre style="background-color:azure; class="prettyprint notranslate">
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border = "1" bordercolor = "green" background = "/images/test.png">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td><td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>
</pre>
</div>
<a target="_blank" href="f6-6.html" class="w3-btn w3-margin-bottom"><button style="background-color:rgb(115, 126, 226);">Try it Yourself</button> »</a>
</div>
<h2>Table Height and Width</h2>
<p>You can set a table width and height using <b>width</b> and <b>height</b> attributes. You can specify table width or height in terms of pixels or in terms of percentage of available screen area.</p>
<h3>Example</h3>
<pre style="background-color:azure; class="prettyprint notranslate">
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Width/Height</title>
</head>
<body>
<table border = "1" width = "400" height = "150">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>
</pre>
</div>
<a target="_blank" href="f6-7.html" class="w3-btn w3-margin-bottom"><button style="background-color:rgb(115, 126, 226);">Try it Yourself</button> »</a>
</div>
<h2>Table Caption</h2>
<p>The <b>caption</b> tag will serve as a title or explanation for the table and it shows up at the top of the table. This tag is deprecated in newer version of HTML/XHTML.</p>
<h3>Example</h3>
<pre style="background-color:azure; class="prettyprint notranslate">
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Caption</title>
</head>
<body>
<table border = "1" width = "100%">
<caption>This is the caption</caption>
<tr>
<td>row 1, column 1</td><td>row 1, columnn 2</td>
</tr>
<tr>
<td>row 2, column 1</td><td>row 2, columnn 2</td>
</tr>
</table>
</body>
</html>
</pre>
</div>
<a target="_blank" href="f6-8.html" class="w3-btn w3-margin-bottom"><button style="background-color:rgb(115, 126, 226);">Try it Yourself</button> »</a>
</div>
<h2>Table Header, Body, and Footer</h2>
<p>Tables can be divided into three portions − a header, a body, and a foot. The head and foot are rather similar to headers and footers in a word-processed document that remain the same for every page, while the body is the main content holder of the table.</p>
<p>The three elements for separating the head, body, and foot of a table are −</p>
<ul class="list">
<li><p><b><thead></b> − to create a separate table header.</p></li>
<li><p><b><tbody></b> − to indicate the main body of the table.</p></li>
<li><p><b><tfoot></b> − to create a separate table footer.</p></li>
</ul>
<p>A table may contain several <tbody> elements to indicate <i>different pages</i> or groups of data. But it is notable that <thead> and <tfoot> tags should appear before <tbody></p>
<h3>Example</h3>
<pre style="background-color:azure; class="prettyprint notranslate">
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border = "1" width = "100%">
<thead>
<tr>
<td colspan = "4">This is the head of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan = "4">This is the foot of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
</body>
</html>
</pre>
</div>
<a target="_blank" href="f6-9.html" class="w3-btn w3-margin-bottom"><button style="background-color:rgb(115, 126, 226);">Try it Yourself</button> »</a>
</div>
<h2>Nested Tables</h2>
<p>You can use one table inside another table. Not only tables you can use almost all the tags inside table data tag <td>.</p>
<h3>Example</h3>
<p>Following is the example of using another table and other tags inside a table cell.</p>
<pre style="background-color:azure; class="prettyprint notranslate">
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border = "1" width = "100%">
<tr>
<td>
<table border = "1" width = "100%">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
</pre>
</div>
<a target="_blank" href="f6-10.html" class="w3-btn w3-margin-bottom"><button style="background-color:rgb(115, 126, 226);">Try it Yourself</button> »</a>
</div>
</body>
</html>