如何用HTML来制作表格

如何用HTML来制作表格,第1张

楼主你好。

html编写表格的方法有多种。

最简单的就是用html标签<table></table>

表格是由表头,表格,表行组成的。

表头<tt></tt>

表行<tr></tr>

表格<td></td>

表头和表格都是放在表行里面的。

下面假设写一个2行1列的表格

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

 

   <title>Table</title>

</head>

<body>

   <table>

       <tr><th>第一行</th></tr>

       <tr><td>第二行</td></tr>

   </table>

</body>

</html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html charset=utf-8" />

<title>无标题文档</title>

</head>

<body style="width::100%">  <div style="margin:0px auto width:100px">招新表格</div>

<div style="margin:50px auto">

<table width="917" height="601"  style="BORDER-COLLAPSE: collapse" borderColor=#000000 height=40 cellPadding=1 width=250 align=center border=1>

  <tr>

    <td width="101">姓名</td>

    <td width="141">&nbsp</td>

    <td width="121">性别</td>

    <td width="121">&nbsp</td>

    <td width="121">出生年月</td>

    <td width="120">&nbsp</td>

    <td colspan="2" rowspan="3">&nbsp</td>

  </tr>

  <tr>

    <td rowspan="2">曾任职务</td>

    <td rowspan="2">&nbsp</td>

    <td>学号</td>

    <td>&nbsp</td>

    <td>政治面貌</td>

    <td>&nbsp</td>

  </tr>

  <tr>

    <td>联系电话</td>

    <td>&nbsp</td>

    <td>qq号</td>

    <td>&nbsp</td>

  </tr>

  <tr>

    <td>加入部门</td>

    <td>第一志愿</td>

    <td>&nbsp</td>

    <td>第三志愿</td>

    <td>&nbsp</td>

    <td colspan="2">是否服从调配</td>

    <td width="111">&nbsp</td>

  </tr>

  <tr>

    <td>个人情况简介</td>

    <td colspan="7">&nbsp</td>

  </tr>

  <tr>

    <td>&nbsp</td>

      <td colspan="7">&nbsp</td>

  </tr>

  <tr>

    <td>&nbsp</td>

      <td colspan="7">&nbsp</td>

  </tr>

  <tr>

    <td>&nbsp</td>

     <td colspan="7">&nbsp</td>

  </tr>

  <tr>

    <td>&nbsp</td>

     <td colspan="7">&nbsp</td>

  </tr>

  <tr>

    <td>&nbsp</td>

      <td colspan="7">&nbsp</td>

  </tr>

</table>

</div>

</body>

</html>

其中的文字自己去写了!

边框为"3"是指表格外层的边框,还是指td的边框

如果是指td的边框,每列的宽度=(699-3*5-3*2*3)/4=166.5

如果是指表格外层的边框,每列的宽度=(699-3*5)/4=171


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7202176.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-02
下一篇 2023-04-02

发表评论

登录后才能评论

评论列表(0条)

保存