HTML Table

<table>標簽定義 HTML 表格。

<pre> <<c>table> 建立一表格。 <<c>tbody> 表格內容開始。 <<c>caption> **標題** <<c>/caption> <<c>th> <<c>/th> 表示表頭單元格 <<c>tr> <<c>/tr> 表頭單元格 - 包含表頭信息。 <<c>td> <<c>/td> 代表一列。 <<c>/tbody> 表格內容完結。 <<c>/table> 建立完成。 <<c>table border="1">邊框 <<c>table rules="rows"> 欄位內距距離 rules=none 沒有線條。 rules=groups 位於行組和列組之間的線條。 rules=rows 位於行之間的線條。 rules=cols 位於列之間的線條。 rules=all 位於行和列之間的線條。</pre> <style> input {cursor:pointer;} pre { font-size: 20px ; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } bb{font-size:25px;color:blue;font-weight : bold;} b{font-size:20px;color:blue;} r{font-size:20px;color:red;} </style>

預覽 寫程式 還原 LLLLLLLLLLLLLLLLL

<bb><<c>caption> **標題** <<c>/caption></bb><br><br> <table border="1" style="width:400px"> <tbody> <caption>**標題**</caption> <tr><td>第一行 欄位 1</td><td>第一行 欄位 2 </td></tr> <tr><td>第二行 欄位 1</td><td>第二行 欄位 2 </td></tr> </tbody> </table> <pre> <<c>table border="1" style="width:400px"> <<c>tbody> <<c>caption>**標題**<<c>/caption> <<c>tr><<c>td>第一行 欄位 1<<c>/td><<c>td>第一行 欄位 2 <<c>/td><<c>/tr> <<c>tr><c><<c>td>第二行 欄位 1<<c>/td><<c>td>第二行 欄位 2 <<c>/td><<c>/tr> <<c>/tbody> <<c>/table> </pre> <style> pre { font-size: 20px ; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } bb{font-size:25px;color:blue;font-weight : bold;} b{font-size:20px;color:blue;} r{font-size:20px;color:red;} </style>

預覽 寫程式 還原 LLLLLLLLLLLLLLLLL

<bb><<c>tr> 表頭單元格 - 包含表頭信息</bb><br><br> <table border="1" style="width:400px"> <tbody> <tr><th colspan="2">表頭單元格 - 包含表頭信息 </th</tr> <tr><td>第二行 欄位 1</td><td>第二行 欄位 2 </td></tr> </tbody> </table> <pre> <<c>table border="1" style="width:400px"> <<c>tbody> <<c>tr><b><<c>th colspan="2"></b>表頭單元格 - 包含表頭信息 <b><<c>/th>></b><<c>/tr> <<c>tr><c><<c>td>第二行 欄位 1<<c>/td><<c>td>第二行 欄位 2 <<c>/td><<c>/tr> <<c>/tbody> <<c>/table> </pre> <style> pre { font-size: 20px ; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } bb{font-size:25px;color:blue;font-weight : bold;} b{font-size:20px;color:blue;} r{font-size:20px;color:red;} </style>

預覽 寫程式 還原 LLLLLLLLLLLLLLLLL

<bb><<c>table border="10" ></bb><br><br> <table border="10" width="80%" > <tbody> <tr><td>第一行 欄位 1</td><td>第一行 欄位 2</td></tr> <tr><td>第二行 欄位 1</td><td>第二行 欄位 2</td></tr> </tbody></table> <pre> <<c>table <b>border="10"</b> style="width:400px"> <<c>tbody> <<c>tr><<c>td>第一行 欄位 1<<c>/td><<c>td>第一行 欄位 2 <<c>/td>><<c>/tr> <<c>tr><c><<c>td>第二行 欄位 1<<c>/td><<c>td>第二行 欄位 2 <<c>/td><<c>/tr> <<c>/tbody> <<c>/table> </pre> <style> pre { font-size: 20px ; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } bb{font-size:25px;color:blue;font-weight : bold;} b{font-size:20px;color:blue;} r{font-size:20px;color:red;} </style>

預覽 寫程式 還原 LLLLLLLLLLLLLLLLL

<bb><<c>table cellspacing="30" ></bb><br><br> <table border="1" cellspacing="30" width="80%" > <tbody> <tr><td>第一行 欄位 1</td><td>第一行 欄位 2</td></tr> <tr><td>第二行 欄位 1</td><td>第二行 欄位 2</td></tr> </tbody></table> <pre> <<c>table border="1" <b>cellspacing="30"</b> style="width:400px"> <<c>tbody> <<c>tr><<c>td>第一行 欄位 1<<c>/td><<c>td>第一行 欄位 2 <<c>/td>><<c>/td> <<c>tr><c><<c>td>第二行 欄位 1<<c>/td><<c>td>第二行 欄位 2 <<c>/td><<c>/tr> <<c>/tbody> <<c>/table> </pre> <style> pre { font-size: 20px ; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } bb{font-size:25px;color:blue;font-weight : bold;} b{font-size:20px;color:blue;} r{font-size:20px;color:red;} </style>

預覽 寫程式 還原 LLLLLLLLLLLLLLLLL

<bb><<c>table colspan="2" ></bb><br><br> <table border="1" width="80%" > <tbody> <tr><td colspan="2" align="center">橫 二合併為一</td></tr> <tr><td>第二行 欄位 1</td><td>第二行 欄位 2</td></tr> </tbody></table> <pre> <<c>table border="1" style="width:400px"> <<c>tbody> <<c>tr><<c>td <b>colspan="2" align="center"</b>>橫 二合併為一<<c>/td><<c>/tr> <<c>/td>><<c>/td> <<c>tr><c><<c>td>第二行 欄位 1<<c>/td><<c>td>第二行 欄位 2 <<c>/td><<c>/tr> <<c>/tbody> <<c>/table> </pre> <style> pre { font-size: 20px ; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } bb{font-size:25px;color:blue;font-weight : bold;} b{font-size:20px;color:blue;} r{font-size:20px;color:red;} </style>

預覽 寫程式 還原 LLLLLLLLLLLLLLLLL

<bb><<c>table rowspan="2" 直二合併為一></bb><br><br> <table border="1" width="80%" > <tbody> <tr><td rowspan="2">直二合併為一</td><td>第一行 欄位 2</td></tr> </td><td>第二行 欄位 2</td></tr> </tbody></table> <pre> <<c>table border="1" style="width:400px"> <<c>tbody> <<c>tr><<c>td rowspan="2">直二合併為一<<c>/td><<c>td>第一行 欄位 2 <<c>/td><<c>/tr> <<c>tr><c><<c>td>第二行 欄位 2 <<c>/td><<c>/tr> <<c>/tbody> <<c>/table> </pre> <style> pre { font-size: 20px ; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } bb{font-size:25px;color:blue;font-weight : bold;} b{font-size:20px;color:blue;} r{font-size:20px;color:red;} </style>

預覽 寫程式 還原 LLLLLLLLLLLLLLLLL

<bb><<c>table rules=" rows/cols/all/none" ></bb><br><br> <table border="1" cellspacing="30" style="width:95%"> <tbody> <tr><td> <table rules="rows" style="width:95%" > <caption><<c>table rules="rows" ></caption><tbody> <tr><td>欄位 1</td><td>欄位 2</td><td>欄位 3</td></tr> <tr><td>欄位 1</td><td>欄位 2</td><td>欄位 3</td></tr> <tr><td>欄位 1</td><td>欄位 2</td><td>欄位 4</td></tr> </tbody></table> </td><td> <table rules="cols" style="width:95%" > <caption><<c>table rules="cols" ></caption><tbody> <tr><td>欄位 1</td><td>欄位 2</td><td>欄位 3</td></tr> <tr><td>欄位 1</td><td>欄位 2</td><td>欄位 3</td></tr> <tr><td>欄位 1</td><td>欄位 2</td><td>欄位 4</td></tr> </tbody></table> </td></tr><tr><td> <table rules="all" style="width:95%" > <caption><<c>table rules="all" ></caption><tbody> <tr><td>欄位 1</td><td>欄位 2</td><td>欄位 3</td></tr> <tr><td>欄位 1</td><td>欄位 2</td><td>欄位 3</td></tr> <tr><td>欄位 1</td><td>欄位 2</td><td>欄位 4</td></tr> </tbody></table> </td><td> <table rules="none" style="width:95%" > <caption><<c>table rules="none" ></caption><tbody> <tr><td>欄位 1</td><td>欄位 2</td><td>欄位 3</td></tr> <tr><td>欄位 1</td><td>欄位 2</td><td>欄位 3</td></tr> <tr><td>欄位 1</td><td>欄位 2</td><td>欄位 4</td></tr> </tbody></table> </rd></tr></tbody></table> <style> td{text-align:center} pre { font-size: 20px ; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } bb{font-size:25px;color:blue;font-weight : bold;} b{font-size:20px;color:blue;} r{font-size:20px;color:red;} </style>

預覽 寫程式 還原 LLLLLLLLLLLLLLLLL

Edit

#html #網頁格式 #script #style #html table #table caption #table th #table tr #table td #標簽定義 HTML 表格 #table border #table colspan #table rowspan #table rules