見た目をテーブルにする
テーブル(表)を作成して、セル内に入力項目を設置したり、文を記述できます。
<table>を使うことで、テーブル(表)を作成できます。
![table1](../../_images/creating-carte-xml/recipe/table1.png)
<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>
タグを使って作成します。
各タグについてはこちらをご参照ください。
装飾する
属性
属性を指定して、表を装飾できます。
名称 | 指定可能なタグ | 詳細 |
---|---|---|
|
説明: HTMLのstyle属性で[指定可能な値]を設定可能です。 |
|
|
|
説明: このタグにclass名を指定できます。ここで指定したclass名を <style> タグのCSSから参照できます。 |
|
|
説明: 指定した数だけセルが列方向(横)に繋がります。 |
|
|
説明: 指定した数だけセルが行方向(縦)に繋がります。 |
使用例
style
style
属性に指定可能な値をご紹介します。
指定可能な値は多く存在するため、よく使いそうなものをご紹介します。
値 | 指定可能な値 | 詳細 |
---|---|---|
|
色のコードまたはネーム |
説明:文字の背景色を変更できます。 |
|
色のコードまたはネーム |
説明:テーブルの背景色を変更できます。 |
|
|
説明:水平方向の表示位置を変更できます。 |
|
|
説明:境界線に対して変更を加えます。。 |
|
数値 |
説明:テーブルの横幅を変更できます。 |
|
数値 |
説明:テーブルの最小の横幅を変更できます。 |
![table2](../../_images/creating-carte-xml/recipe/table2.png)
<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
指定した数だけセルが列方向(横)に繋がります。
![table3](../../_images/creating-carte-xml/recipe/table3.png)
<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
指定した数だけセルが行方向(縦)に繋がります。
![table4](../../_images/creating-carte-xml/recipe/table4.png)
<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>
テーブル(表)の具体的な使用例
履修科目一覧
![table5](../../_images/creating-carte-xml/recipe/table5.png)
<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>
健康観察記録
![table6](../../_images/creating-carte-xml/recipe/table6.png)
<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>
時間入力
![table7](../../_images/creating-carte-xml/recipe/table7.png)
<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>