ASP.NETのTableコントロールに 行・列 を追加するコードを紹介します。
概要
ASP.NETのTableコントロールに行、列の要素を追加する手順ですが、TableコントロールのRowsプロパティに行オブジェクトであるTableRowを追加し、追加したTableRowオブジェクトのCellsプロパティにセルを追加することで、テーブルに行、列を追加できます。
プログラム
UI
下図のUIを作成します。WebフォームにTableコントロールを配置します。
WebフォームのXMLは以下になります。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TableDemo.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Table ID="Table1" runat="server" BorderColor="#3333CC" BorderWidth="1px" GridLines="Both">
</asp:Table>
</div>
</form>
</body>
</html>
コード
下記のコードを記述します。WebフォームのPage_Loadイベントを実装します。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace TableDemo
{
public partial class Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
TableRow tableRow;
TableCell tableCell;
tableRow = new TableRow();
tableCell = new TableCell();
tableCell.Text = "セル1";
tableRow.Cells.Add(tableCell);
tableCell = new TableCell();
tableCell.Text = "セル2";
tableRow.Cells.Add(tableCell);
tableCell = new TableCell();
tableCell.Text = "セル3";
tableRow.Cells.Add(tableCell);
Table1.Rows.Add(tableRow);
//
tableRow = new TableRow();
tableCell = new TableCell();
tableCell.Text = "セルA";
tableRow.Cells.Add(tableCell);
tableCell = new TableCell();
tableCell.Text = "セルB";
tableRow.Cells.Add(tableCell);
tableCell = new TableCell();
tableCell.Text = "セルC";
tableRow.Cells.Add(tableCell);
Table1.Rows.Add(tableRow);
}
}
}
解説
下記コードでTableRowオブジェクトを作成します。
tableRow = new TableRow();
TableCellオブジェクトを作成し、Textプロパティにセルに表示するテキストを設定します。設定後、先ほど作成したTableRowオブジェクト"tableRow"のCellsプロパティに作成したTableCellオブジェクトを追加します。
tableCell = new TableCell();
tableCell.Text = "セル1";
tableRow.Cells.Add(tableCell);
1行に表示したいセル数上記のコードを繰り返します。今回のコードではセルを3つ追加しています。
作成したTableRowオブジェクトをTableのRowsプロパティに追加します。
Table1.Rows.Add(tableRow);
上記のコードでテーブルに1行分追加できます。複数行追加する場合はこの処理を繰り返します。今回のコードではテーブルに2行追加しています。
実行結果
プロジェクトを実行します。Webブラウザが起動し、下図のページが表示されます。罫線が無いため、確認しづらいですが、テーブルに2行3列でセルが追加できています。
セルの罫線を表示する
セルに罫線を表示する手順を紹介します。フォームデザイナでTableコントロールを選択します。プロパティウィンドウのBorderColorプロパティに県線の色を設定します。また、罫線の幅をBorderWidthプロパティに設定します。これらの設定をするとテーブルの外側の罫線が表示されます。
テーブルのセル内に罫線を表示する場合はさらに、GridLinesプロパティを"True"に設定します。
実行結果を確認します。下図のページが表示されます。テーブルの罫線も表示されています。
参考:GridLinesプロパティが"False"の場合
GridLinesプロパティが"False"の場合は、下図の結果となります。外側の枠だけが表示されます。
スタイルシートを利用してテーブルのデザインを設定する
プロパティ設定ではなく、スタイルシートを用いてテーブルのデザインを設定することもできます。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CssStyledTable.aspx.cs" Inherits="TableDemo.CssStyledTable" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="Style.css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Table ID="Table1" runat="server"></asp:Table>
</div>
</form>
</body>
</html>
style.css
#Table1 {
border-collapse:collapse;
border-spacing:0px;
border:1px solid #ff6a00;
}
#Table1 tr td{
border:1px solid #ff6a00;
}
解説
スタイルシートでデザインを設定する場合は、Webフォームのaspxファイルのhead部にスタイルシートへのリンクを記述します。
<link rel="stylesheet" href="Style.css" />
がスタイルシートへのリンクになります。今回の例では外部のCSSファイルへのリンクですが、埋め込みスタイルでも動作します。
スタイルシート部では、ID指定でテーブルのスタイルを変更しています。この部分はクラスを指定しても動作します。クラスを指定する場合は、テーブルのCssClassプロパティにクラス名を設定します。
スタイルシートでは、tableのスタイル設定と、テーブル内のセルのスタイルを設定しています。セルのスタイルは下位に存在する要素に対するセレクタで指定しています。セレクターの詳細は「
リンク」を参照してください。
表示結果
上記のHTMLファイルをWebブラウザで表示すると下図の画面が表示されます。
参考:クラスで指定する場合
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CssStyledTable.aspx.cs" Inherits="TableDemo.CssStyledTable" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="Style.css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Table ID="Table1" CssClass="MainTable" runat="server"></asp:Table>
</div>
</form>
</body>
</html>
style.css
.MainTable{
border-collapse:collapse;
border-spacing:0px;
border:1px solid #ff6a00;
}
.MainTable tr td{
border:1px solid #ff6a00;
}
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2024-01-06
作成日: 2015-04-02
