Microsoft-expression-web-data-table
提供：Dev Guides
Microsoft Expression Web-データテーブル
この章では、Webページにデータテーブルを追加する方法を学びます。 新しいHTMLページを作成しますが、ここでは動的WebテンプレートをHTMLページにも適用します。
- ステップ1 *-[ファイル]メニューに移動し、[新規作成]→[動的Webテンプレートから作成…]を選択します。
次のスクリーンショットに示すように、次のダイアログボックスが開きます。
ステップ2 *- *master.dwt ファイルを選択し、[開く]ボタンをクリックします。
ステップ3 *-Webページを保存し、 *datatablel と呼びます。
- ステップ4 *-デザインビューで、メインコンテンツセクションに移動し、テキストを削除します。
- ステップ5 *-次に、*テーブル→テーブルの挿入…*メニューオプションに移動し、テーブルの挿入ダイアログボックスを開きます。
行と列の数を選択します。 配置、パディング、境界線のサイズと色、背景色など、さまざまなレイアウトオプションを設定することもできます。 完了したら、[OK]をクリックします。
- 手順6 *-datatablelのデザインビューが次のように表示されます-
ページのコードビューを見ると、Expression Webによって次のコードが追加されていることがわかります。
<table class = "auto-style2" style = "width: 100%">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>ステップ7 *-[スタイルの管理]タスクパネルで、[ *.. auto-style2] を右クリックします。 名前変更クラスの選択「auto-style2」をクリックします。
ステップ8 *-[クラス名の変更]ダイアログで、[新しい名前]フィールドに *mytable と入力します。 このページの[クラス参照の名前を変更する]にチェックが入っていることを確認して、[OK]をクリックします。
次に、デザインビューでWebページを確認します。 次のように表示されます-
- ステップ9 *-このテーブルをフォーマットしてスタイルを適用するには、[スタイルの管理]タスクパネルに移動して[*新しいスタイル…]をクリックします。
- ステップ10 *-[新しいスタイル]ダイアログボックスで、境界線の設定を行い、[OK]をクリックします。 データテーブルをフォーマットする別のオプションがあります。 デザインビューで、テーブルを右クリックし、[変更]→[テーブルオートフォーマット…]を選択します。
このダイアログボックスには、さまざまな形式やその他の設定が表示されます。 Professional形式を選択して、[OK]をクリックします。
- ステップ11 *-Webページのデザインビューは次のようになります-
デザインビューにデータを追加しましょう。
- ステップ12 *-Webページを保存し、ブラウザでプレビューします。 次のスクリーンショットのようになります。
