0042.htm

来自「新时代软件教程:操作系统 主页制作 服务器 设计软件 网络技术 编程语言 文字编」· HTM 代码 · 共 437 行

HTM
437 行
字号 
<html>

<head>
<title>新时代软件教程:操作系统 主页制作 服务器 设计软件 网络技术 编程语言 文字编辑</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
<!--
body, table {font-size: 9pt; font-family: 宋体}
a {text-decoration:none}
a:hover {color: red;text-decoration:underline}
.1  {background-color: rgb(245,245,245)}
-->
</style>
</head>
<p align="center"><script src="../../1.js"></script></a>
    <p align="center"><big><strong>表格</strong></big></p>
<div align="right">---摘自《网页设计师》</div>

    ◇ 表格的基本语法 
    &lt;table&gt;...&lt;/table&gt; - 定义表格<br> 
    &lt;tr&gt; - 定义表行<br> 
    &lt;th&gt; - 定义表头<br> 
    &lt;td&gt; - 定义表元(表格的具体数据) 
    <p>带边框的表格：</p> 
    <pre>&lt;table border&gt;
&lt;tr&gt;&lt;th&gt;Food&lt;/th&gt;&lt;th&gt;Drink&lt;/th&gt;&lt;th&gt;Sweet&lt;/th&gt;
&lt;tr&gt;&lt;td&gt;A&lt;/td&gt;&lt;td&gt;B&lt;/td&gt;&lt;td&gt;C&lt;/td&gt;      
&lt;/table&gt;

</pre> 
    <table border="1"> 
      <tbody> 
        <tr> 
          <th>Food</th> 
          <th>Drink</th> 
          <th>Sweet</th> 
        </tr> 
        <tr> 
          <td>A</td> 
          <td>B</td> 
          <td>C</td> 
        </tr> 
      </tbody> 
    </table> 
    <p><br> 
    不带边框的表格：</p> 
    <pre>&lt;table&gt;
&lt;tr&gt;&lt;th&gt;Food&lt;/th&gt;&lt;th&gt;Drink&lt;/th&gt;&lt;th&gt;Sweet&lt;/th&gt;
&lt;tr&gt;&lt;td&gt;A&lt;/td&gt;&lt;td&gt;B&lt;/td&gt;&lt;td&gt;C&lt;/td&gt;      
&lt;/table&gt;

</pre> 
    <table> 
      <tbody> 
        <tr> 
          <th>Food</th> 
          <th>Drink</th> 
          <th>Sweet</th> 
        </tr> 
        <tr> 
          <td>A</td> 
          <td>B</td> 
          <td>C</td> 
        </tr> 
      </tbody> 
    </table> 
    <p>　</p>
    <p><!--################## Table Span ########################-->
    <a name="span"></a></p> 
    ◇ 跨多行、多列的表元(Table Span) 
    <p><!------Colspan-------> 
    </p> 
    跨多列的表元 &lt;th colspan=#&gt; 
    <pre>&lt;table border&gt;
&lt;tr&gt;&lt;th colspan=3&gt; Morning Menu&lt;/th&gt;
&lt;tr&gt;&lt;th&gt;Food&lt;/th&gt;       &lt;th&gt;Drink&lt;/th&gt;  &lt;th&gt;Sweet&lt;/th&gt;
&lt;tr&gt;&lt;td&gt;A&lt;/td&gt;&lt;td&gt;B&lt;/td&gt;&lt;td&gt;C&lt;/td&gt;
&lt;/table&gt;

</pre> 
    <table border="1"> 
      <tbody> 
        <tr> 
          <th colSpan="3">Morning Menu</th> 
        </tr> 
        <tr> 
          <th>Food</th> 
          <th>Drink</th> 
          <th>Sweet</th> 
        </tr> 
        <tr> 
          <td>A</td> 
          <td>B</td> 
          <td>C</td> 
        </tr> 
      </tbody> 
    </table> 
    <p><!------Rowspan-------> 
    </p> 
    跨多行的表元 &lt;th rowspan=#&gt; 
    <pre>&lt;table border&gt;
&lt;tr&gt;&lt;th rowspan=3&gt; Morning Menu&lt;/th&gt;
        &lt;th&gt;Food&lt;/th&gt; &lt;td&gt;A&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;th&gt;Drink&lt;/th&gt; &lt;td&gt;B&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;th&gt;Sweet&lt;/th&gt; &lt;td&gt;C&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;

</pre> 
    <table border="1"> 
      <tbody> 
        <tr> 
          <th rowSpan="3">Morning Menu</th> 
          <th>Food</th> 
          <td>A</td> 
        </tr> 
        <tr> 
          <th>Drink</th> 
          <td>B</td> 
        </tr> 
        <tr> 
          <th>Sweet</th> 
          <td>C</td> 
        </tr> 
      </tbody> 
    </table> 
    <p>　</p>
    <p><!--################## Size ########################-->
    <a name="size"></a></p> 
    ◇ 表格尺寸设置 
    <p><!------Border-------> 
    </p> 
    &lt;table border=#&gt; 
    <p>边框尺寸设置：</p> 
    <pre>&lt;table border=10&gt;
&lt;tr&gt;&lt;th&gt;Food&lt;/th&gt;&lt;th&gt;Drink&lt;/th&gt;&lt;th&gt;Sweet&lt;/th&gt;
&lt;tr&gt;&lt;td&gt;A&lt;/td&gt;&lt;td&gt;B&lt;/td&gt;&lt;td&gt;C&lt;/td&gt;      
&lt;/table&gt;

</pre> 
    <table border="10"> 
      <tbody> 
        <tr> 
          <th>Food</th> 
          <th>Drink</th> 
          <th>Sweet</th> 
        </tr> 
        <tr> 
          <td>A</td> 
          <td>B</td> 
          <td>C</td> 
        </tr> 
      </tbody> 
    </table> 
    <p><!------Length-------> 
    </p> 
    &lt;table border width=# height=#&gt; 
    <p>表格尺寸设置：</p> 
    <pre>&lt;table border width=170 height=100&gt;
&lt;tr&gt;&lt;th&gt;Food&lt;/th&gt;&lt;th&gt;Drink&lt;/th&gt;&lt;th&gt;Sweet&lt;/th&gt;
&lt;tr&gt;&lt;td&gt;A&lt;/td&gt;&lt;td&gt;B&lt;/td&gt;&lt;td&gt;C&lt;/td&gt;      
&lt;/table&gt;

</pre> 
    <table border="1" height="100" width="170"> 
      <tbody> 
        <tr> 
          <th>Food</th> 
          <th>Drink</th> 
          <th>Sweet</th> 
        </tr> 
        <tr> 
          <td>A</td> 
          <td>B</td> 
          <td>C</td> 
        </tr> 
      </tbody> 
    </table> 
    <p><!------CellSpacing-------> 
    </p> 
    &lt;table border cellspacing=#&gt; 
    <p>表元间隙设置：</p> 
    <pre>&lt;table border cellspacing=10&gt;
&lt;tr&gt;&lt;th&gt;Food&lt;/th&gt;&lt;th&gt;Drink&lt;/th&gt;&lt;th&gt;Sweet&lt;/th&gt;
&lt;tr&gt;&lt;td&gt;A&lt;/td&gt;&lt;td&gt;B&lt;/td&gt;&lt;td&gt;C&lt;/td&gt;      
&lt;/table&gt;

</pre> 
    <table border="1" cellSpacing="10"> 
      <tbody> 
        <tr> 
          <th>Food</th> 
          <th>Drink</th> 
          <th>Sweet</th> 
        </tr> 
        <tr> 
          <td>A</td> 
          <td>B</td> 
          <td>C</td> 
        </tr> 
      </tbody> 
    </table> 
    <p><!------CellPadding-------> 
    </p> 
    &lt;table border cellpadding=#&gt; 
    <p>表元内部空白设置：</p> 
    <pre>&lt;table border cellpadding=10&gt;
&lt;tr&gt;&lt;th&gt;Food&lt;/th&gt;&lt;th&gt;Drink&lt;/th&gt;&lt;th&gt;Sweet&lt;/th&gt;
&lt;tr&gt;&lt;td&gt;A&lt;/td&gt;&lt;td&gt;B&lt;/td&gt;&lt;td&gt;C&lt;/td&gt;      
&lt;/table&gt;

</pre> 
    <table border="1" cellPadding="10"> 
      <tbody> 
        <tr> 
          <th>Food</th> 
          <th>Drink</th> 
          <th>Sweet</th> 
        </tr> 
        <tr> 
          <td>A</td> 
          <td>B</td> 
          <td>C</td> 
        </tr> 
      </tbody> 
    </table> 
    <p>　</p>
    <p><!--################## Text in Table ########################-->
    <a name="text"></a></p> 
    ◇ 表格内文字的对齐/布局 
    <p><!------ALIGN-------> 
    </p> 
    &lt;tr align=#&gt; 
    &lt;th align=#&gt; #=left, center, right 
    &lt;td align=#&gt; 
    <pre>&lt;table border width=160&gt;
&lt;tr&gt;
                &lt;th&gt;Food&lt;/th&gt;&lt;th&gt;Drink&lt;/th&gt;&lt;th&gt;Sweet&lt;/th&gt;
&lt;tr&gt;
                &lt;td align=left&gt;A&lt;/td&gt;
                &lt;td align=center&gt;B&lt;/td&gt;
                &lt;td align=right&gt;C&lt;/td&gt;  
&lt;/table&gt;

</pre> 
    <table border="1" width="160"> 
      <tbody> 
        <tr> 
          <th>Food</th> 
          <th>Drink</th> 
          <th>Sweet</th> 
        </tr> 
        <tr> 
          <td align="left">A</td> 
          <td align="middle">B</td> 
          <td align="right">C</td> 
        </tr> 
      </tbody> 
    </table> 
    <p><!------VALIGN-------> 
    </p> 
    &lt;tr valign=#&gt; 
    &lt;th valign=#&gt; #=top, middle, bottom, baseline 
    &lt;td valign=#&gt; 
    <pre>&lt;table border height=100&gt;
&lt;tr&gt;
                &lt;th&gt;Food&lt;/th&gt;&lt;th&gt;Drink&lt;/th&gt;
                &lt;th&gt;Sweet&lt;/th&gt;&lt;th&gt;Other&lt;/th&gt;
&lt;tr&gt;
                &lt;td valign=top&gt;A&lt;/td&gt;
                &lt;td valign=middle&gt;B&lt;/td&gt;
                &lt;td valign=bottom&gt;C&lt;/td&gt;
                &lt;td valign=baseline&gt;D&lt;/td&gt;
&lt;/table&gt;

</pre> 
    <table border="1" height="100"> 
      <tbody> 
        <tr> 
          <th>Food</th> 
          <th>Drink</th> 
          <th>Sweet</th> 
          <th>Other</th> 
        </tr> 
        <tr> 
          <td vAlign="top">A</td> 
          <td vAlign="center">B</td> 
          <td vAlign="bottom">C</td> 
          <td vAlign="baseline">D</td> 
        </tr> 
      </tbody> 
    </table> 
    <p>　</p>
    <p><!--################## Floating Table ########################-->
    <a name="float"></a></p> 
    ◇ 表格在页面中的对齐/布局(Floating Table) 
    <p><!------left-------> 
    </p> 
    &lt;table align=left&gt; 
    <dl> 
      <pre>&lt;table align=&quot;left&quot; border&gt;
&lt;tr&gt;&lt;th&gt;Food&lt;/th&gt;&lt;th&gt;Drink&lt;/th&gt;&lt;th&gt;Sweet&lt;/th&gt;
&lt;tr&gt;&lt;td&gt;A&lt;/td&gt;&lt;td&gt;B&lt;/td&gt;&lt;td&gt;C&lt;/td&gt;
&lt;/table&gt;
My favorites...&lt;br&gt;
cookies, chocolates, and more.
</pre> 
    </dl> 
    <table align="left" border="1"> 
      <tbody> 
        <tr> 
          <th>Food</th> 
          <th>Drink</th> 
          <th>Sweet</th> 
        </tr> 
        <tr> 
          <td>A</td> 
          <td>B</td> 
          <td>C</td> 
        </tr> 
      </tbody> 
    </table> 
    <p>My favorites...<br> 
    cookies, chocolates, and more.<br clear="all"> 
    </p> 
    &lt;table align=right&gt; 
    <table align="right" border="1"> 
      <tbody> 
        <tr> 
          <th>Food</th> 
          <th>Drink</th> 
          <th>Sweet</th> 
        </tr> 
        <tr> 
          <td>A</td> 
          <td>B</td> 
          <td>C</td> 
        </tr> 
      </tbody> 
    </table> 
    <p>My favorites...<br> 
    cookies, chocolates, and more.<br clear="all"> 
    </p> 
    <p>　</p>
    &lt;table vspace=# hspace=#&gt; #=space value <img alt="netscape.gif (168 bytes)" height="14" src="images/netscape.gif" width="80"> 
    <dl> 
      <pre>&lt;table align=&quot;left&quot; border vspace=20 hspace=30&gt;
&lt;tr&gt;&lt;th&gt;Food&lt;/th&gt;&lt;th&gt;Drink&lt;/th&gt;&lt;th&gt;Sweet&lt;/th&gt;
&lt;tr&gt;&lt;td&gt;A&lt;/td&gt;&lt;td&gt;B&lt;/td&gt;&lt;td&gt;C&lt;/td&gt;
&lt;/table&gt;
My favorites...&lt;br&gt;
cookies, chocolates, and more.
</pre> 
    </dl> 
    <table align="left" border="1" hspace="30" vspace="20"> 
      <tbody> 
        <tr> 
          <th>Food</th> 
          <th>Drink</th> 
          <th>Sweet</th> 
        </tr> 
        <tr> 
          <td>A</td> 
          <td>B</td> 
          <td>C</td> 
        </tr> 
      </tbody> 
    </table> 
    <p>My favorites...<br> 
    cookies, chocolates, and more.<br clear="all"> 
    </p> 
    ◇ 表格的标题 
    <p><!------Caption align-------> 
    </p> 
    &lt;caption align=#&gt; ... &lt;/caption&gt; #=left, center, right 
    <pre>&lt;table border&gt;
&lt;caption align=center&gt;Lunch&lt;/caption&gt;
&lt;tr&gt;&lt;th&gt;Food&lt;/th&gt;&lt;th&gt;Drink&lt;/th&gt;&lt;th&gt;Sweet&lt;/th&gt;
&lt;tr&gt;&lt;td&gt;A&lt;/td&gt;&lt;td&gt;B&lt;/td&gt;&lt;td&gt;C&lt;/td&gt;      
&lt;/table&gt;
</pre> 
    <table border="1"> 
      <tbody> 
        <tr> 
          <td>Lunch 
            <p>　</p>
        </tr>
      <tbody>
        <tr>
          <th>Food</th>
          <th>Drink</th>
          <th>Sweet</th>
        </tr>
        <tr>
          <td>A</td>
          <td>B</td>
          <td>C</td>
        </tr>
      </tbody>
    </table>
    <p><!------Caption Valign------->
    </p>
    &lt;caption valign=#&gt; ... &lt;/caption&gt; #=top, bottom 
    <ul> 
      <li><font size="-1">valign=top is default.</font></li> 
    </ul> 
    <pre>&lt;table border&gt;
&lt;caption valign=bottom&gt;Lunch&lt;/caption&gt;
&lt;tr&gt;&lt;th&gt;Food&lt;/th&gt;&lt;th&gt;Drink&lt;/th&gt;&lt;th&gt;Sweet&lt;/th&gt;
&lt;tr&gt;&lt;td&gt;A&lt;/td&gt;&lt;td&gt;B&lt;/td&gt;&lt;td&gt;C&lt;/td&gt;      
&lt;/table&gt;
</pre> 
    <table border="1"> 
      <tbody> 
        <tr> 
          <td>Lunch 
            <p>　</p>
        </tr>
      <tbody>
        <tr>
          <th>Food</th>
          <th>Drink</th>
          <th>Sweet</th>
        </tr>
        <tr>
          <td>A</td>
          <td>B</td>
          <td>C</td>
        </tr>
      </tbody>
    </table>
    <p>　</p>
    <p>(未完，请继续)

  </table>
<p align="center"><script src="../../2.js"></script></a>
</body>
</html>

0042.htm - 源码说明

本页面展示了「新时代软件教程:操作系统 主页制作 服务器 设计软件 网络技术 编程语言 文字编辑」中的 0042.htm 源码文件，采用 HTM 编程语言编写，共 437 行代码。您可以在线阅读完整代码内容，也可以返回资源详情页下载完整源码包进行本地学习和开发。

虫虫下载站收录了大量与软件教程相关的技术资源，包括源代码、技术文档、电路图等，是电子工程师和嵌入式开发者的专业学习平台。

⌨️ 快捷键说明

复制代码Ctrl + C
搜索代码Ctrl + F
全屏模式F11
增大字号Ctrl + =
减小字号Ctrl + -
显示快捷键?