html中的table标签中如何将几个<td>合在一起的
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<body>标签中，输入html代码：
<table border="1">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td colspan="3">456</td></tr>
</table>
3、浏览器运行index.html页面，此时表格第2行的3个td合并在了一起。
已赞过
已踩过<
1、为table表格设置边框合并
table{
border-collapse:collapse;
border-spacing:0;
}
2、隔行变色和添加内边框
function addColor() {
var tbodyTrList = $(".table tbody tr");
var tdList = $(".table td");
for (var i = 0; i < tbodyTrList.length; i++) {
if (i % 2 == 0) {
tbodyTrList[i].className = "color";//隔行变色
}
}
for (var j = 0; j < tdList.length; j++) {
if (j % 6 != 0) {
$(tdList[j]).addClass("border-left");//除第一列以外添加左边框
}
}
}
addColor();
3、单独设置每一列的样式
<script>
$(document).ready(function () {
var obj;
$("tbody tr").each(function () {
$(this).find("td:nth-child(2)").
first().css({"width":"360px"});//设置第二列宽度
obj = $(this).find("td:nth-child(3)");//设置第三列
if($(obj).html()!="0"){//值不是0的加粗
$(obj).css({"font-weight":"bold"});
}
});
});
</script>
扩展资料：
html table td中放图片注意事项
例子，下面td中存放了一个img，td的高度很小，也就是7，img后如果紧跟</td>，就正常显示，如果</td>换行，就会将td撑开，不正常显示
Java代码
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr align="center">
<td background="images/index-6.gif" height="7">
<img id="i" src="images/index-5.gif" width="81"
height="7" style="cursor: pointer;" border="0" alt="隐藏"/></td>
</tr>
</table>
如果是用Dreamweaver进行制作的话，在设计视图中。选中要合并的几个单元格，点击如下图所示按钮，合并单元格。
代码如下：
<table width="200" border="1">
<tr>
<td rowspan="2"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
效果图如下：
colspan=xx (合并xx列，同时需要把本行删除xx个<td></td>标签 ，同样不删除表格就会变形)
希望能够帮到你^V^
