富⽂本源码界⾯通过html+css+js实现表格绘制
富⽂本源码界⾯通过html+css+js实现表格绘制
了解html
超⽂本标记语⾔（英语：HyperText Markup Language，简称：HTML）是⼀种⽤于创建⽹页的标准标记语⾔。
⼀个⽹页对应多个HTML⽂件，超⽂本标记语⾔⽂件以.htm或.html（外语缩写）为扩展名(其中.htm是因为之前的⽂件系统只⽀持最多三位扩展名)。可以使⽤任何能够⽣成TXT类型源⽂件的⽂本编辑器来产⽣超⽂本标记语⾔⽂件，只⽤修改⽂件后缀即可。标准的超⽂本标记语⾔⽂件都具有⼀个基本的整体结构，标记⼀般都是成对出现（部分标记除外例如：<br/> <img/>），即超⽂本标记语⾔⽂件的开头与结尾标志和超⽂本标记语⾔的头部与实体两⼤部分。有三个双标记符⽤于页⾯整体结构的确认。
绘制表格
1.学习绘制表格所需要的html标签
<table>定义表格</table>
<th>定义表格标题</th>
<tr>定义⾏</tr>
<td>定义单元格</td>
2.绘制表格的代码实现
这是表格标题
1-11-21-3
2-12-22-3
3-23-3
3-1
1-21-3
上述表格源码如下：
<!--所有标签成对出现，末尾标签名前加/-->
<table><!--⼀组table标签创建单元格-->
<tr><!--⼀组tr标签新增⼀⾏-->
<th colspan="3">这是表格标题</th><!--使⽤⼀组th标签设置表格标题字体较普通单元格粗，使⽤colspan设置跨越同⾏多少个单元格，后⾯数字值就代表跨越多少个-->
</tr>
<tr>
<td>1-1</td><td>1-2</td><td>1-3</td><!--⼀组td标签在该⾏新增⼀个单元格，三组就会在同⼀⾏⽣出三个单元格-->
</tr>
<tr>
<td>2-1</td><td>2-2</td><td>2-3</td>
</tr>
<tr>
<td rowspan="2">3-1</td><td>3-2</td><td>3-3</td><!--使⽤rowspan设置跨越同列多少个单元格，后⾯数字值就代表跨越多少个-->
</tr>
<tr>
<td>1-2</td><td>1-3</td>
</tr>
</table>
3.在富⽂本编辑器源码模式下代码及效果
4.通过添加css样式使表格隔⾏换⾊
<style type="text/css">
/*使⽤table标签选择器给表格设置样式*/
table{
height: 200px;
width:400px;
border:2px solid  green;
}
/
*使⽤td标签选择器给单元格设置样式*/
td{
border:1px solid;
}
/*使⽤tr:nth-child(2n)⼦类选择器指定每个tr标签⽗类下偶数tr标签设置样式*/ tr:nth-child(2n){
background:#ff0000;
}
</style>
5.通过js⾃动⽣产表格
<script>
/*创建⾃动⽣成标的的⽅法*/
function table1(tdcount){
var ateElement("table");/*创建table标签*/
var ateElement("tr");/*创建tr标签*/
/*创建td标签，根据参数设定td个数*/
for(var i=0;i<tdcount;i++){
var ateElement("td");
td.innerHTML=i+1;
td.align="center"
tr.appendChild(td);/*将td放⼊tr标签中*/
}
table.appendChild(tr);/*将tr放⼊table标签中*/
table.width="100%";
table.height=50;
return table;
}
for(var i=1;i<=10;i++){
/*创建在body标签中加⼊⽣成的表格，循环10次每次单元格数量递增*/
css表格样式</script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。