＜script＞でJavascriptを記述
【HTMLソース】
<script type="text/javascript">
<!--
document.write("Hello World!!");
// -->
</script>
「CSSの編集」にてカレンダーに影響。回避するためにid指定。
「CSSの編集」にてカレンダーに影響。回避するためにid指定。
【CSSの編集で設定した内容】
table#mystyle {
border: 2px #2b2b2b solid;
width: 400px;
table-layout: fixed;
}
td#mystyle, th#mystyle {
border: 2px #2b2b2b solid;
width: 50%;
}
【id指定を追加したHTMLソース】
<table id="mystyle">
<tr>
<th id="mystyle">ホスティング</th>
<th id="mystyle">ホームページ制作</th>
</tr>
<tr>
<td id="mystyle">サーバーA社</td>
<td id="mystyle">WebデザインA社</td>
</tr>
</table>
【表示結果】
| ホスティング | ホームページ制作 |
|---|---|
| サーバーA社 | WebデザインA社 |
「CSSの編集」機能でstyle部分を追加、文中で呼び出し
「CSSの編集」機能で追加した内容
table {
border: 2px #2b2b2b solid;
width: 400px;
table-layout: fixed;
}
td, th {
border: 2px #2b2b2b solid;
width: 50%;
}
【記事中のHTMLソース】
<table>
<tr>
<th>ホスティング</th>
<th>ホームページ制作</th>
</tr>
<tr>
<td>サーバーA社</td>
<td>WebデザインA社</td>
</tr>
</table>
【表示結果】※カレンダー表示に影響
| ホスティング | ホームページ制作 |
|---|---|
| サーバーA社 | WebデザインA社 |
カレンダー表示で用いている定義と衝突した。
COLGROUPを含むtable
【参考サイト】TABLE - Table(jp)
【HTMLソース】
<TABLE SUMMARY="このテーブルは、シンボルやギリシャ文字の
文字符号実体参照・十進法文字符号参照
そして十六進法文字符号参照の表です。">
<COLGROUP>
<COLGROUP SPAN=3>
<THEAD>
<TR>
<TH SCOPE=col>Character</TH>
<TH SCOPE=col>Entity</TH>
<TH SCOPE=col>Decimal</TH>
<TH SCOPE=col>Hex</TH>
</TR>
</THEAD>
<TBODY>
<TR>
<TD SCOPE=row>Latin small f with hook</TD>
<TD>&fnof;</TD>
<TD>&#402;</TD>
<TD>&#x192;</TD>
</TR>
</TBODY>
</TABLE>
| Character | Entity | Decimal | Hex |
|---|---|---|---|
| Latin small f with hook | ƒ | ƒ | ƒ |
基本的なtable
【HTMLソース】
<table>
<tr>
<th>ホスティング</th>
<th>ホームページ制作</th>
</tr>
<tr>
<td>サーバーA社</td>
<td>WebデザインA社</td>
</tr>
</table>
【結果】
| ホスティング | ホームページ制作 |
|---|---|
| サーバーA社 | WebデザインA社 |
【記入スペースが変換した後のHTMLソース】
<table><tbody><tr><th>ホスティング</th>
<th>ホームページ制作</th>
</tr>
<tr><td>サーバーA社</td>
<td>WebデザインA社</td>
</tr>
</tbody>
</table>
styleを含むtable
【参考サイト】スタイルシート［CSS］/テーブル/表のレイアウト方法を指定する - TAG index
【HTMLソース】
<style type="text/css">
<!--
table {
border: 2px #2b2b2b solid;
width: 400px;
table-layout: fixed;
}
td, th {
border: 2px #2b2b2b solid;
width: 50%;
}
-->
</style>
</head>
<body>
<table>
<tr>
<th>ホスティング</th>
<th>ホームページ制作</th>
</tr>
<tr>
<td>サーバーA社</td>
<td>WebデザインA社</td>
</tr>
</table>