如何制作table 一列多行的表格?

Table控件主要用于在web页面上创建表格，其功能与HtmlTable类似。不同的是，Table控件可以用动态的内容以编程的方式来生成表格。
我们在制作表格的时候，总是会遇到一个表格中有多行多列，但是又不一定每行的列数相同，这样的表格我们该怎么制作呢？以下介绍以下这样的表格如何制作：
方法一：
代码编写
<table width="200" border="1">
<tr>
<td> </td>
<td> </td>
<td rowspan="2"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"> </td>
<td> </td>
</tr>
</table>

方法二：

1、在html中定义一个表格table，并且给其这只一个id

2、定义一个js函数，在函数中利用jquery的链式语法获取table下的所有td

3、结果得到一个包含table下的所有td的数组

示例：

html代码：
<table id="mytable">
<tr><td>第一行</td></tr>
<tr><td>第二行</td></tr>
<tr><td>第三行</td></tr>
</table>
js代码：
function getAllTd(){
var tdArr = $('#mytable tr td');
alert(tdArr.length);
}其中：$("#tid [id=trid] td:eq(0)") table的id为tid,tr为trid中的第一列td，eq括号中为td的索引值，从0开始。

方法三：
<table border=1><tr><td colspan=3>标题</td><tr><td>第一列</td> <td>第二列</td> <td>第三列</td><tr><td>A</td><td>B</td><td>C</td></table>

标题
第一列 第二列 第三列
A B C

跨多行的表
<td rowspan=#>
<table border=1><tr><td rowspan=3>标题</td><td>第一行
</td> <td>A</td></tr><tr><td>第二行
</td> <td>B</td></tr><tr><td>第三行
</td> <td>C</td></tr></table>

标题 第一行 A
第二行 B
第三行 C

方法四：

其中：
〈table〉...〈/table〉 - 定义表格
〈th〉 - 定义表头 Defines a table header
〈tr〉 - 定义表行 Defines a table row
〈td〉 - 定义表元(表格的具体数据) td stands for "table data," Defines a table cell.

赞 (0)

相关推荐

  • Excel中怎么将日常收支制作成多列堆积图?

    Excel中怎么将日常收支制作成多列堆积图?你还在为Excel多列堆积图怎么制作而苦恼吗,今天小编教你Excel多列堆积图怎么制作,让你告别Excel多列堆积图怎么制作的烦恼. 一.数据处理 1.如图 ...

  • Excel2010如何制作成多列堆积图

    Excel2010如何制作成多列堆积图 一.数据处理 1.如图所示,添加一组数据列,里面的数据可以任意. Excel2010教程 二.Excel多列堆积图制作 1.选中数据区域(先不选辅助列)--点击 ...

  • 怎么在电脑wps文字软件内完成表格列和行的添加

    怎么在电脑wps文字软件内完成表格列和行的添加

    当我们在使用电脑的时候,可以通过wps软件来处理一些文档,而在wps文字内,如果想要为表格的列和行进行添加的话,应如何设置呢?接下来就由小编来告诉大家.具体如下:1. 第一步,打开需要进行添加表格列和 ...

  • 如何在Excel中冻结首列首行

    如何在Excel中冻结首列首行

    有的小伙伴在使用Excel软件处理数据时,经常会翻动表格,而且首列首行也会跟着翻动,为了方便查看数据,因此想要冻结首列首行,但是却不知道如何冻结,那么小编就来为大家介绍一下吧.具体如下:1. 第一步, ...

  • 怎么将Excel表格中的数据进行先列后行转为一列操作

    怎么将Excel表格中的数据进行先列后行转为一列操作

    怎么将Excel表格中的数据进行先列后行转为一列操作呢?一起来看看吧.1. 如图,打开想要操作的excel表格,如图,将四组数据先列后行然后再转为一列.2. 将四组人员名单全部选中.3. 如图,点击方 ...

  • 电脑EXCEL表格怎么让隐藏列（行）中的数据不被复制

    电脑EXCEL表格怎么让隐藏列（行）中的数据不被复制

    我们即便在excel中隐藏了列(行),依旧可以显示出来并被复制.今天小编就告诉大家电脑EXCEL表格怎么让隐藏列(行)中的数据不被复制.具体如下:1. 首先我们需要在电脑中打开excel表格,在表格A ...

  • Word中的文本转表格识别不出正确的列或行如何解决

    Word中的文本转表格识别不出正确的列或行如何解决

    我们在将Word文本转表格时候,出现无法识别出正确的列或行,该怎么办呢?今天就跟大家介绍一下Word中的文本转表格识别不出正确的列或行的具体解决方法.1. 如图,打开想要转换的文本,中间用逗号隔开.2 ...

  • 如何固定EXCEL的列和行

    如何固定EXCEL的列和行 操作方法 01 打开EXCEL软件,点击视图: 02 选择:冻结窗格,点击下拉箭头: 03 选择对应要固定的属性值:固定首行,只能固定EXCEL的第一行 04 选择对应要固 ...

  • EXCEL表格中，列和行如何同时冻结窗格？

    本文所分享的内容是:工作表中,需要冻结窗格的时候,怎样把列和行同时冻结窗格. 希望通过本文可以帮到有需要的朋友. 操作方法 01 比如,有这么一个工作表, 现在,要把第3行与A列同时冻结窗格. 02 ...