启嘟渡科技商贸有限公司
SEARCH

与我们合作

我们专注提供互联网一站式服务,助力企业品牌宣传多平台多途径导流量。
主营业务:网站建设、移动端微信小程序开发、营销推广、基础网络、品牌形象策划等

您也可通过下列途径与我们取得联系:

微 信: wxyunyingzhe

手 机: 15624122141

邮 箱:

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

更新时间:2024-12-23 02:57:44

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"

  trtd第一行/td/tr

  trtd第二行/td/tr

  trtd第三行/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=1trtd colspan=3标题/tdtrtd第一列/td      td第二列/td  td第三列/tdtrtdA/tdtdB/tdtdC/td/table

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

跨多行的表

td rowspan=#

table border=1trtd rowspan=3标题/tdtd第一行

/td tdA/td/trtrtd第二行

/td tdB/td/trtrtd第三行

/td tdC/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.

多重随机标签

猜你喜欢文章

QQ客服 电话咨询