見た目をテーブルにする

テーブル（表）を作成して、セル内に入力項目を設置したり、文を記述できます。
<table>を使うことで、テーブル（表）を作成できます。

テーブル(表)の作成方法
装飾する
- 属性
- 使用例
  - style
  - colspan
  - rowspan
テーブル(表)の具体的な使用例

<doc title="レシピ集用サンプルカルテ" id="shugaku_recipe_sample" order="0">
    <doc_template>
        <cards>
            <static_card id="card1" title="1年次" edit-protect-setting="false">
                <style>
                    .HeaderTable tr:nth-child(1) {
                        background-color: #DEE9FF;
                    }
                    .HeaderTable td:last-child {
                        text-align: left;
                    }
                    .HeaderTable td:nth-child(-n+3) {
                        text-align: center;
                    }
                </style>
                <table class="HeaderTable">
                    <tr>
                        <td>
                            <p>日付</p>
                        </td>
                        <td>
                            <p>活動名</p>
                        </td>
                        <td>
                            <p>活動場所</p>
                        </td>
                        <td style="text-align:center;">
                            <p>反省・課題</p>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <field id="active_date" ref="active_date" />
                        </td>
                        <td>
                            <field id="active_name" ref="active_name" />
                        </td>
                        <td>
                            <field id="active_place" ref="active_place" />
                        </td>
                        <td>
                            <field id="reflection_issue" ref="reflection_issue" />
                        </td>
                    </tr>
                </table>
            </static_card>
        </cards>
    </doc_template>
    <field_templates>
        <field_template id="active_date" type="date" title="日付" edit-auth="self"/>
        <field_template id="active_name" type="text" form_type="text" title="活動名" edit-auth="self"/>
        <field_template id="active_place" type="text" form_type="text" title="活動場所" edit-auth="self"/>
        <field_template id="reflection_issue" type="text" form_type="textbox" title="反省・課題" edit-auth="self"/>
    </field_templates>
</doc>

テーブル（表）の作成方法

<table> <tr> <td> タグを使って作成します。
各タグについてはこちらをご参照ください。

装飾する

属性

属性を指定して、表を装飾できます。

Table 1. 属性について
名称	指定可能なタグ	詳細
style	`<table>` `<tr>` `<td>`	説明: HTMLのstyle属性で[指定可能な値]を設定可能です。
`class`	`<table>` `<tr>` `<td>`	説明: このタグにclass名を指定できます。ここで指定したclass名を <style> タグのCSSから参照できます。使用例はこちらのxmlをご覧ください。
`colspan`	`<td>`	説明: 指定した数だけセルが列方向（横）に繋がります。
`rowspan`	`<td>`	説明: 指定した数だけセルが行方向（縦）に繋がります。

使用例

style

style 属性に指定可能な値をご紹介します。
指定可能な値は多く存在するため、よく使いそうなものをご紹介します。

Table 2. styleについて
値	指定可能な値	詳細
`color`	色のコードまたはネーム	説明：文字の背景色を変更できます。使用例: `color: red;` `color: #DEE9FF;`
`background-color`	色のコードまたはネーム	説明：テーブルの背景色を変更できます。使用例: `background-color: red;` `background-color: #DEE9FF;`
`text-align`	`left` `right` `center` `justify`	説明：水平方向の表示位置を変更できます。使用例: `text-align: center;`
`border`	`left` `right` `top` `bottom`	説明：境界線に対して変更を加えます。。使用例: `border-color: red;` `border-top-color: red;` `border-width: 3px;`
`width`	数値	説明：テーブルの横幅を変更できます。使用例: `width: 10em;`
`min-width`	数値	説明：テーブルの最小の横幅を変更できます。使用例: `min-width: 5em;`

Figure 1. style設定の有無

<doc title="レシピ集用サンプルカルテ" id="shugaku_recipe_sample" order="0">
    <doc_template>
        <cards>
            <static_card id="card1" title="1年次" edit-protect-setting="false">
                <markdown>#### style設定無し</markdown>
                <table>
                    <tr>
                        <td>
                            <p>日付</p>
                        </td>
                        <td>
                            <p>活動名</p>
                        </td>
                        <td>
                            <p>活動場所</p>
                        </td>
                        <td>
                            <p>反省・課題</p>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <field id="active_date_1" ref="active_date" />
                        </td>
                        <td>
                            <field id="active_name_1" ref="active_name" />
                        </td>
                        <td>
                            <field id="active_place_1" ref="active_place" />
                        </td>
                        <td>
                            <field id="reflection_issue_1" ref="reflection_issue" />
                        </td>
                    </tr>
                </table>
                <markdown>#### style設定有り</markdown>
                <table style="text-align:center; border-width:3px; width: 59em;">
                    <tr style="color:red; background-color:#DEE9FF;">
                        <td style="min-width: 8em;">
                            <p>日付</p>
                        </td>
                        <td style="min-width: 13em;">
                            <p>活動名</p>
                        </td>
                        <td style="min-width: 13em;">
                            <p>活動場所</p>
                        </td>
                        <td style="min-width: 25em">
                            <p>反省・課題</p>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <field id="active_date_2" ref="active_date" />
                        </td>
                        <td>
                            <field id="active_name_2" ref="active_name" />
                        </td>
                        <td>
                            <field id="active_place_2" ref="active_place" />
                        </td>
                        <td style="text-align: left;">
                            <field id="reflection_issue_2" ref="reflection_issue" />
                        </td>
                    </tr>
                </table>
            </static_card>
        </cards>
    </doc_template>
    <field_templates>
        <field_template id="active_date" type="date" title="日付" edit-auth="self"/>
        <field_template id="active_name" type="text" form_type="text" title="活動名" edit-auth="self"/>
        <field_template id="active_place" type="text" form_type="text" title="活動場所" edit-auth="self"/>
        <field_template id="reflection_issue" type="text" form_type="textbox" title="反省・課題" edit-auth="self"/>
    </field_templates>
</doc>

colspan

指定した数だけセルが列方向（横）に繋がります。

<table style="text-align:center;">
    <tr style="background-color:#DEE9FF;">
        <td colspan="3">
            <p>期間</p>
        </td>
        <td>
            <p>活動名</p>
        </td>
        <td>
            <p>活動場所</p>
        </td>
        <td>
            <p>反省・課題</p>
        </td>
    </tr>
    <tr>
        <td>
            <field id="active_start_date" ref="active_start_date" />
        </td>
        <td>
            <p>~</p>
        </td>
        <td>
            <field id="active_end_date" ref="active_end_date" />
        </td>
        <td>
            <field id="active_name" ref="active_name" />
        </td>
        <td>
            <field id="active_place" ref="active_place" />
        </td>
        <td>
            <field id="reflection_issue" ref="reflection_issue" />
        </td>
    </tr>
</table>

rowspan

指定した数だけセルが行方向（縦）に繋がります。

<table style="text-align:center; width:29em;">
    <tr style="background-color:#DEE9FF;">
        <td>
            <p>科目名</p>
        </td>
        <td >
            <p>単位</p>
        </td>
        <td>
            <p>成績</p>
        </td>
        <td>
            <p>合計[[br]]単位</p>
        </td>
    </tr>
    <tr>
        <td style="min-width:20em;">
            <field id="kamokumei_1" ref="kamokumei" />
        </td>
        <td style="min-width:3em;">
            <field id="tani_1" ref="tani" />
        </td>
        <td style="min-width:3em;">
            <field id="seiseki_1" ref="seiseki" />
        </td>
        <td rowspan="3" style="min-width:3em;">
            <field id="tani_goukei_1" ref="tani_goukei" />
        </td>
    </tr>
    <tr>
        <td>
            <field id="kamokumei_2" ref="kamokumei" />
        </td>
        <td>
            <field id="tani_2" ref="tani" />
        </td>
        <td>
            <field id="seiseki_2" ref="seiseki" />
        </td>
    </tr>
    <tr>
        <td>
            <field id="kamokumei_3" ref="kamokumei" />
        </td>
        <td>
            <field id="tani_3" ref="tani" />
        </td>
        <td>
            <field id="seiseki_3" ref="seiseki" />
        </td>
    </tr>
</table>

テーブル（表）の具体的な使用例

履修科目一覧

<table class="courseTable">
	<tr class="courseTable-head">
		<td><p>授業科目名</p></td>
		<td style="width:4em;"><p>単位数</p></td>
		<td style="width:5em;"><p>履修年度</p></td>
		<td><p>担当教員名</p></td>
		<td style="width:5em;"><p>評価</p></td>
		<td><p>自己評価（授業のねらいを達成できた点と，自分の課題を記入）</p></td>
	</tr>
	<tr>
		<td><p>現代教職論</p></td>
		<td><p>2</p></td>
		<td><field id="academic_year-1" title="" ref="academic_year"/></td>
		<td><field id="author_name-1" title="" ref="author_name"/></td>
		<td><field id="assessment-1" title="" ref="assessment"/></td>
		<td><field id="self-assessment-text-1" title="" ref="self-assessment-text"/></td>
	</tr>
	<tr>
		<td><p>教育原論</p></td>
		<td><p>2</p></td>
		<td><field id="academic_year-2" title="" ref="academic_year"/></td>
		<td><field id="author_name-2" title="" ref="author_name"/></td>
		<td><field id="assessment-2" title="" ref="assessment"/></td>
		<td><field id="self-assessment-text-2" title="" ref="self-assessment-text"/></td>
	</tr>
	<tr>
		<td><p>教育思想論</p></td>
		<td><p>2</p></td>
		<td><field id="academic_year-3" title="" ref="academic_year"/></td>
		<td><field id="author_name-3" title="" ref="author_name"/></td>
		<td><field id="assessment-3" title="" ref="assessment"/></td>
		<td><field id="self-assessment-text-3" title="" ref="self-assessment-text"/></td>
	</tr>
	<tr>
		<td><p>発達と学習</p></td>
		<td><p>2</p></td>
		<td><field id="academic_year-4" title="" ref="academic_year"/></td>
		<td><field id="author_name-4" title="" ref="author_name"/></td>
		<td><field id="assessment-4" title="" ref="assessment"/></td>
		<td><field id="self-assessment-text-4" title="" ref="self-assessment-text"/></td>
	</tr>
	<tr>
		<td><p>教育制度論</p></td>
		<td><p>2</p></td>
		<td><field id="academic_year-5" title="" ref="academic_year"/></td>
		<td><field id="author_name-5" title="" ref="author_name"/></td>
		<td><field id="assessment-5" title="" ref="assessment"/></td>
		<td><field id="self-assessment-text-5" title="" ref="self-assessment-text"/></td>
	</tr>
	<tr>
		<td><p>教育の社会学</p></td>
		<td><p>2</p></td>
		<td><field id="academic_year-6" title="" ref="academic_year"/></td>
		<td><field id="author_name-6" title="" ref="author_name"/></td>
		<td><field id="assessment-6" title="" ref="assessment"/></td>
		<td><field id="self-assessment-text-6" title="" ref="self-assessment-text"/></td>
	</tr>
	<tr>
		<td><p>特別活動論</p></td>
		<td><p>2</p></td>
		<td><field id="academic_year-7" title="" ref="academic_year"/></td>
		<td><field id="author_name-7" title="" ref="author_name"/></td>
		<td><field id="assessment-7" title="" ref="assessment"/></td>
		<td><field id="self-assessment-text-7" title="" ref="self-assessment-text"/></td>
	</tr>
	<tr>
		<td><p>教育の方法及び技術論</p></td>
		<td><p>2</p></td>
		<td><field id="academic_year-8" title="" ref="academic_year"/></td>
		<td><field id="author_name-8" title="" ref="author_name"/></td>
		<td><field id="assessment-8" title="" ref="assessment"/></td>
		<td><field id="self-assessment-text-8" title="" ref="self-assessment-text"/></td>
	</tr>
	<tr>
		<td><p>生徒指導論・進路指導論</p></td>
		<td><p>2</p></td>
		<td><field id="academic_year-9" title="" ref="academic_year"/></td>
		<td><field id="author_name-9" title="" ref="author_name"/></td>
		<td><field id="assessment-9" title="" ref="assessment"/></td>
		<td><field id="self-assessment-text-9" title="" ref="self-assessment-text"/></td>
	</tr>
	<tr>
		<td><p>教育相談</p></td>
		<td><p>2</p></td>
		<td><field id="academic_year-10" title="" ref="academic_year"/></td>
		<td><field id="author_name-10" title="" ref="author_name"/></td>
		<td><field id="assessment-10" title="" ref="assessment"/></td>
		<td><field id="self-assessment-text-10" title="" ref="self-assessment-text"/></td>
	</tr>
	<tr>
		<td><p>道徳教育の理論と方法</p></td>
		<td><p>2</p></td>
		<td><field id="academic_year-11" title="" ref="academic_year"/></td>
		<td><field id="author_name-11" title="" ref="author_name"/></td>
		<td><field id="assessment-11" title="" ref="assessment"/></td>
		<td><field id="self-assessment-text-11" title="" ref="self-assessment-text"/></td>
	</tr>
	<tr>
		<td><p>教育実習事前・事後指導</p></td>
		<td><p>1</p></td>
		<td><field id="academic_year-12" title="" ref="academic_year"/></td>
		<td><field id="author_name-12" title="" ref="author_name"/></td>
		<td><field id="assessment-12" title="" ref="assessment"/></td>
		<td><field id="self-assessment-text-12" title="" ref="self-assessment-text"/></td>
	</tr>
	<tr>
		<td><p>教育実習Ⅰ</p></td>
		<td><p>4</p></td>
		<td><field id="academic_year-13" title="" ref="academic_year"/></td>
		<td><field id="author_name-13" title="" ref="author_name"/></td>
		<td><field id="assessment-13" title="" ref="assessment"/></td>
		<td><field id="self-assessment-text-13" title="" ref="self-assessment-text"/></td>
	</tr>
	<tr>
		<td><p>教育実習Ⅱ</p></td>
		<td><p>2</p></td>
		<td><field id="academic_year-14" title="" ref="academic_year"/></td>
		<td><field id="author_name-14" title="" ref="author_name"/></td>
		<td><field id="assessment-14" title="" ref="assessment"/></td>
		<td><field id="self-assessment-text-14" title="" ref="self-assessment-text"/></td>
	</tr>
	<tr>
		<td><p>教職実践演習</p></td>
		<td><p>2</p></td>
		<td><field id="academic_year-15" title="" ref="academic_year"/></td>
		<td><field id="author_name-15" title="" ref="author_name"/></td>
		<td><field id="assessment-15" title="" ref="assessment"/></td>
		<td><field id="self-assessment-text-15" title="" ref="self-assessment-text"/></td>
	</tr>
	<tr>
		<td><p>社会科・地理歴史科教育法Ⅰ</p></td>
		<td><p>2</p></td>
		<td><field id="academic_year-16" title="" ref="academic_year"/></td>
		<td><field id="author_name-16" title="" ref="author_name"/></td>
		<td><field id="assessment-16" title="" ref="assessment"/></td>
		<td><field id="self-assessment-text-16" title="" ref="self-assessment-text"/></td>
	</tr>
	<tr>
		<td><p>社会科・地理歴史科教育法Ⅱ</p></td>
		<td><p>2</p></td>
		<td><field id="academic_year-17" title="" ref="academic_year"/></td>
		<td><field id="author_name-17" title="" ref="author_name"/></td>
		<td><field id="assessment-17" title="" ref="assessment"/></td>
		<td><field id="self-assessment-text-17" title="" ref="self-assessment-text"/></td>
	</tr>
	<tr>
		<td><p>社会科・公民科教育法Ⅰ</p></td>
		<td><p>2</p></td>
		<td><field id="academic_year-18" title="" ref="academic_year"/></td>
		<td><field id="author_name-18" title="" ref="author_name"/></td>
		<td><field id="assessment-18" title="" ref="assessment"/></td>
		<td><field id="self-assessment-text-18" title="" ref="self-assessment-text"/></td>
	</tr>
	<tr>
		<td><p>社会科・公民科教育法Ⅱ</p></td>
		<td><p>2</p></td>
		<td><field id="academic_year-19" title="" ref="academic_year"/></td>
		<td><field id="author_name-19" title="" ref="author_name"/></td>
		<td><field id="assessment-19" title="" ref="assessment"/></td>
		<td><field id="self-assessment-text-19" title="" ref="self-assessment-text"/></td>
	</tr>
	<tr>
		<td><p>社会科・商業科教育法Ⅰ</p></td>
		<td><p>2</p></td>
		<td><field id="academic_year-20" title="" ref="academic_year"/></td>
		<td><field id="author_name-20" title="" ref="author_name"/></td>
		<td><field id="assessment-20" title="" ref="assessment"/></td>
		<td><field id="self-assessment-text-20" title="" ref="self-assessment-text"/></td>
	</tr>
	<tr>
		<td><p>商業科教育法Ⅱ</p></td>
		<td><p>2</p></td>
		<td><field id="academic_year-21" title="" ref="academic_year"/></td>
		<td><field id="author_name-21" title="" ref="author_name"/></td>
		<td><field id="assessment-21" title="" ref="assessment"/></td>
		<td><field id="self-assessment-text-21" title="" ref="self-assessment-text"/></td>
	</tr>
	<tr>
		<td><field id="course_name-etc1" title="" ref="course_name"/></td>
		<td><field id="credit-etc1" title="" ref="credit"/></td>
		<td><field id="academic_year-etc1" title="" ref="academic_year"/></td>
		<td><field id="author_name-etc1" title="" ref="author_name"/></td>
		<td><field id="assessment-etc1" title="" ref="assessment"/></td>
		<td><field id="self-assessment-text-etc1" title="" ref="self-assessment-text"/></td>
	</tr>
	<tr>
		<td><field id="course_name-etc2" title="" ref="course_name"/></td>
		<td><field id="credit-etc2" title="" ref="credit"/></td>
		<td><field id="academic_year-etc2" title="" ref="academic_year"/></td>
		<td><field id="author_name-etc2" title="" ref="author_name"/></td>
		<td><field id="assessment-etc2" title="" ref="assessment"/></td>
		<td><field id="self-assessment-text-etc2" title="" ref="self-assessment-text"/></td>
	</tr>
</table>

健康観察記録

<table class="table" style="text-align:center; width:38em;">
	<tr style="background-color:#eaf4fc;">
		<td style="min-width:8em;">
			<p>日付</p>
		</td>
		<td style="min-width:5em">
			<p>体温(℃)</p>
		</td>
		<td style="min-width:10em" >
			<p>体調</p>
		</td>
		<td style="min-width:15em">
			<p>その他</p>
		</td>
	</tr>
	<tr>
		<td>
			<field id="date1" ref="date"></field>
		</td>
		<td>
			<field id="temperature1" ref="temperature"></field>
		</td>
		<td>
			<field id="taityou1" ref="taityou"></field>
		</td>
		<td>
			<field id="others1" ref="others"></field>
		</td>
	</tr>
	<tr>
		<td>
			<field id="date2" ref="date"></field>
		</td>
		<td>
			<field id="temperature2" ref="temperature"></field>
		</td>
		<td>
			<field id="taityou2" ref="taityou"></field>
		</td>
		<td>
			<field id="others2" ref="others"></field>
		</td>
	</tr>
	<tr>
		<td>
			<field id="date3" ref="date"></field>
		</td>
		<td>
			<field id="temperature3" ref="temperature"></field>
		</td>
		<td>
			<field id="taityou3" ref="taityou"></field>
		</td>
		<td>
			<field id="others3" ref="others"></field>
		</td>
	</tr>
	<tr>
		<td>
			<field id="date4" ref="date"></field>
		</td>
		<td>
			<field id="temperature4" ref="temperature"></field>
		</td>
		<td>
			<field id="taityou4" ref="taityou"></field>
		</td>
		<td>
			<field id="others4" ref="others"></field>
		</td>
	</tr>
	<tr>
		<td>
			<field id="date5" ref="date"></field>
		</td>
		<td>
			<field id="temperature5" ref="temperature"></field>
		</td>
		<td>
			<field id="taityou5" ref="taityou"></field>
		</td>
		<td>
			<field id="others5" ref="others"></field>
		</td>
	</tr>
	<tr>
		<td>
			<field id="date6" ref="date"></field>
		</td>
		<td>
			<field id="temperature6" ref="temperature"></field>
		</td>
		<td>
			<field id="taityou6" ref="taityou"></field>
		</td>
		<td>
			<field id="others6" ref="others"></field>
		</td>
	</tr>
	<tr>
		<td>
			<field id="date7" ref="date"></field>
		</td>
		<td>
			<field id="temperature7" ref="temperature"></field>
		</td>
		<td>
			<field id="taityou7" ref="taityou"></field>
		</td>
		<td>
			<field id="others7" ref="others"></field>
		</td>
	</tr>
</table>

時間入力

<table style="width:15em; text-align:center;">
	<tr>
		<td style="min-width:5em; border-right-color:white;">
			<field id="hour" ref="hour" />
		</td>
		<td style="min-width:1em; border-right-color:white;">
			<p>:</p>
		</td>
		<td style="min-width:5em;">
			<field id="minute" ref="minute" />
		</td>
	</tr>
</table>