如何用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>

  用到拆分合并单元格,手写挺麻烦的,先用dw在设计视实现,然后再返回代码视图,复制即可代码如下:

<table width="268" height="200" border="1" cellpadding="0" cellspacing="0">

  <tr>

    <td height="50" colspan="2" bordercolor="#0000FF">&nbsp;</td>

    <td rowspan="4" bordercolor="#0000FF"><table width="100%" height="200" border="1" cellpadding="0" cellspacing="0">

      <tr>

        <td height="75" bordercolor="#0000FF">&nbsp;</td>

      </tr>

      <tr>

        <td height="125" bordercolor="#0000FF">&nbsp;</td>

      </tr>

    </table></td>

  </tr>

  <tr>

    <td height="50" colspan="2" bordercolor="#0000FF">&nbsp;</td>

  </tr>

  <tr>

    <td height="50" bordercolor="#0000FF">&nbsp;</td>

    <td height="50" bordercolor="#0000FF">&nbsp;</td>

  </tr>

  <tr>

    <td height="50" bordercolor="#0000FF">&nbsp;</td>

    <td height="50" bordercolor="#0000FF">&nbsp;</td>

  </tr>

</table>

  解释如下:

  先插入四行两列的表格,第一列通过合并单元格来实现,第二列将所有单元格合并,然后新插入一个两行一列的表格即可实现上述效果

HTML中,有两种方法可以做到右侧添加表格:

同一个div内,将设置成背景,同时将div内左边距(padding-left)设置成与一样的宽度,再在此div内加表格即可;

做成2个div,同时设置左浮动,第1个div的宽度设置成与一样宽,第2个div宽度根据自己表格情况设定即可,然后再第2个div里添加表格即可

如有问题可再接着问,希望能帮到你!

1、示例代码

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style>

table{

width: 100%;

text-align: center;

line-height: 50px;

}

table tr td{

border-left: 1px solid #00FF00;

}

</style>

</head>

<body>

<div>

<table>

<tr>

<th>姓名</th>

<th>年龄</th>

</tr>

<tr>

<td>张三</td>

<td>23</td>

</tr>

<tr>

<td>李四</td>

<td>22</td>

</tr>

<tr>

<td>王思</td>

<td>21</td>

</tr>

</table>

</div>

</body>

</html>

2、实例结果

Html的表格用table来表示。下面,我们来看看HTML怎么插入表格吧。

table

首先定义HTML表格,代码为<table></table> ,如下图所示

定义表格的行

使用tr元素定义HTML表格的行,如下图所示:

定义单元格

使用td元素定义单元格,如下图所示:

表格的边框

然后用border定义表格的边框,如下图所示:

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

原文地址: http://outofmemory.cn/bake/12170775.html

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

发表评论

登录后才能评论

评论列表(0条)

保存