HTML表格相關屬性
1
2
3
4
5
6
7
8
9
10
11
12
13
| <table>
bgcolor背景顏色、border邊框
bordercolor邊框顏色
cellspacing單元格之間的間隔
cellpadding單元格與內容之間的間隔
width寬、height高
<td>
align, valign, bgcolor, width, height,
colspan, rowspan
<th>
當標題用，自動粗體，自動居中
|
align = left, center, rightvalign = top, middle, bottom
練習1：列表
分別使用<ol> <ul>顯示歌曲列表，<ol>使用a, b, c格式顯示，<ul>使用實心圓顯示
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <html>
<head>
<title>Table練習</title>
</head>
<body>
<ol type="a"><!-- order: a, b, c格式顯示-->
<li>Song 1</li>
<li>Song 2</li>
<li>Song 3</li>
</ol>
<hr/>
<ul type="disk"><!-- unorder: 實心圓顯示-->
<li>Song 1</li>
<li>Song 2</li>
<li>Song 3</li>
</ul>
</body>
</html>
|
練習2：表格
使用<table>做一個員工表格，顯示員工姓名、性別、工資，表頭加粗、居中顯示，顯示4個員工。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <table border="1px" cellspacing="1px" cellpadding="0px">
<tr>
<th>姓名</th><!--th做為標題加粗-->
<th>性別</th>
<th>工資</th>
</tr>
<tr>
<td>張三</td>
<td>男</td>
<td>10000</td>
<tr>
<td>李四</td>
<td>女</td>
<td>20000</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>30000</td>
</tr>
</table>
|
練習2：跨行跨列
<th>拿來做標題<th>標籤會自動居中colspan左右合併rowspan上下合併align = left, center, rightvalign = top, middle, bottom- align=”center”本文居中
- valign=”bottom”本文靠下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <!--跨行跨列-->
<table border="1px" cellspacing="1px" cellpadding="0px" width="300px" height="180px">
<tr>
<th colspan="3">學生基本情況</th><!-- th會自動居中-->
</tr>
<tr>
<th>姓名</th>
<th>性別</th>
<th>專業</th>
</tr>
<tr>
<td align="center">Ken</td><!--align="center"本文居中-->
<td valign="bottom">男</td><!--valign="bottom"本文靠下-->
<td rowspan="3">C#</td>
</tr>
<tr>
<td>Qii</td>
<td>女</td>
</tr>
<tr>
<td>Ben</td>
<td>男</td>
</tr>
</table>
|
完整 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
| <html>
<head>
<title>Table練習</title>
</head>
<body>
<ol type="a"><!--order-->
<li>Song 1</li>
<li>Song 2</li>
<li>Song 3</li>
</ol>
<hr/>
<ul type="disk"><!--unorder-->
<li>Song 1</li>
<li>Song 2</li>
<li>Song 3</li>
</ul>
<hr/>
<table border="1px" cellspacing="1px" cellpadding="0px">
<tr>
<th>姓名</th><!--th做為標題加粗-->
<th>性別</th>
<th>工資</th>
</tr>
<tr>
<td>張三</td>
<td>男</td>
<td>10000</td>
<tr>
<td>李四</td>
<td>女</td>
<td>20000</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>30000</td>
</tr>
</tr>
</table>
<!--跨行跨列-->
<table border="1px" cellspacing="1px" cellpadding="0px" width="300px" height="180px">
<tr>
<th colspan="3">學生基本情況</th><!-- th會自動居中-->
</tr>
<tr>
<th>姓名</th>
<th>性別</th>
<th>專業</th>
</tr>
<tr>
<td align="center">Ken</td><!--align="center"本文居中-->
<td valign="bottom">男</td><!--valign="bottom"本文靠下-->
<td rowspan="3">C#</td>
</tr>
<tr>
<td>Qii</td>
<td>女</td>
</tr>
<tr>
<td>Ben</td>
<td>男</td>
</tr>
</table>
</body>
</html>
|