熱情輕鬆地過生活: HTML 使表格欄位跨行(跨列)

2013年10月14日星期一

HTML 使表格欄位跨行(跨列)

在 HTML 中，我們常常會用表格來顯示資料，而有時候有些欄位可能需要跨行或是跨列，這時候就可以用以下程式碼來控制了這些欄位了:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>

<body>

<table style="width:800px;height:400px;" border="2">

<tr>

<th>item1</th>

<th>item2</th>

</tr>

<tr>

<td rowspan="2">test1</td> // 以rowspan控制跨幾列

<td>test2</td>

</tr>

<tr>

<td>test3</td>

</tr>

<tr>

<td>test4</td>

<td>test5</td>

</tr>

<tr>

<td colspan="2">test6</td> // 以colspan控制跨幾行

</tr>

</table>

</body>

</html>

執行結過則如下圖:

沒有留言:

張貼留言

訂閱：張貼留言 (Atom)