HtmlTable 伺服器控制項宣告式語法
建立伺服器端控制項,使其對應至 <table> HTML 項目,並允許您建立表格。
<table
EnableViewState="False|True"
Id="string"
Visible="False|True"
OnDataBinding="OnDataBinding event handler"
OnDisposed="OnDisposed event handler"
OnInit="OnInit event handler"
OnLoad="OnLoad event handler"
OnPreRender="OnPreRender event handler"
OnUnload="OnUnload event handler"
runat="server"
>
<tr>
<td></td>
</tr>
</table>
備註
使用 HtmlTable 控制項,對 HTML <table> 項目進行設計程式。 HtmlTable 控制項是由許多列所組成 (以 HtmlTableRow
物件表示),這些列都儲存在表格的 Rows 集合中。 每列則都由儲存在列之 Cells 集合的儲存格 (以 HtmlTableCell 物件表示) 所組成。
若要建立表格,請先在網頁上的表單中宣告 HtmlTable 控制項。 然後,在 HtmlTable 控制項的開頭和結尾標記之間放置 HtmlTableRow 物件,在表格中所需要的每一列各放置一個。 一旦定義表格的列之後,請在每一個 HtmlTableRow 物件的開頭和結尾標記之間宣告 HtmlTableCell 物件以建立列的儲存格。
注意事項 |
---|
請確認每一列和每一欄的儲存格數目都正確,否則表格可能無法如預期般顯示。一般而言,每一列應該都會有相同數目的儲存格。同樣地,每一欄也應該分配相同的儲存格數目。如果您要合併儲存格,每一列的寬度就應該相同,而且每一欄的高度也應該一樣。 |
HtmlTable 控制項可以讓您自訂表格的外觀。 藉由設定 BgColor、Border、BorderColor、Height 和 Width 屬性,即可各別指定表格的背景色彩、框線寬度、框線色彩、表格高度和表格寬度。 您也可以設定 CellSpacing 和 CellPadding 屬性,以控制儲存格之間的間距,以及儲存格內容和儲存格框線之間的間距。
範例
下列範例會根據使用者從兩個 HtmlSelect 控制項的選擇,產生表格列和表格儲存格。 每次載入此網頁時,程式碼便會查看使用者在 HtmlSelect 控制項中選取何值。 在 HtmlTable 控制項中的列數和欄數會根據這些值動態地產生。 若要建構表格,請建立表格的列 (以 HtmlTableRow 物件表示),並且將它們加入至 HtmlTable 控制項的 Rows 集合中。 若要建構列,請建立列的儲存格 (以 HtmlTableCell 物件表示),並且將它們加入至 HtmlTableRow 的 Cells 集合。
<%@ Page Language="VB" AutoEventWireup="True" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
Sub Page_Load(sender As Object, e As EventArgs)
Dim row As Integer = 0
' Generate rows and cells.
Dim numrows As Integer = Convert.ToInt32(Select1.Value)
Dim numcells As Integer = Convert.ToInt32(Select2.Value)
Dim j As Integer
For j = 0 To numrows - 1
Dim r As New HtmlTableRow()
' Set bgcolor on alternating rows.
If row Mod 2 = 1 Then
r.BgColor = "Gainsboro"
End If
row += 1
Dim i As Integer
For i = 0 To numcells - 1
Dim c As New HtmlTableCell()
c.Controls.Add(New _
LiteralControl("row " & j.ToString() & _
", cell " & i.ToString()))
r.Cells.Add(c)
Next i
Table1.Rows.Add(r)
Next j
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>HtmlTable Control</title>
</head>
<body>
<form id="Form1" runat="server">
<div>
<h3>HtmlTable Example</h3>
<br />
<table id="Table1" cellspacing="0" runat="server"
style="border-width:1; border-color: Black; padding: 5"
/>
<br />
Table rows:
<select id="Select1" runat="server">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<br />
Table cells:
<select id="Select2" runat="server">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input id="Submit1" type="submit"
value="Generate Table" runat="server" />
</div>
</form>
</body>
</html>
<%@ Page Language="C#" AutoEventWireup="True" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
void Page_Load(Object sender, EventArgs e)
{
int row = 0;
// Generate rows and cells.
int numrows = Convert.ToInt32(Select1.Value);
int numcells = Convert.ToInt32(Select2.Value);
for (int j = 0; j < numrows; j++)
{
HtmlTableRow r = new HtmlTableRow();
// Set bgcolor on alternating rows.
if (row%2 == 1)
r.BgColor="Gainsboro";
row++;
for (int i = 0; i < numcells; i++)
{
HtmlTableCell c = new HtmlTableCell();
c.Controls.Add(new LiteralControl("row " + j.ToString() +
", cell " + i.ToString()));
r.Cells.Add(c);
}
Table1.Rows.Add(r);
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HtmlTable Control</title>
</head>
<body>
<form id="Form1" runat="server">
<div>
<h3>HtmlTable Example</h3>
<table id="Table1"
style="border-width:1; border-color:Black; padding:5"
cellspacing="0" runat="server" />
<br />
Table rows:
<select id="Select1" runat="server">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<br />
Table cells:
<select id="Select2" runat="server">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input id="Submit1" type="submit"
value="Generate Table" runat="server" />
</div>
</form>
</body>
</html>