富文本源码界面通过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-1	1-2	1-3
2-1	2-2	2-3
3-1	3-2	3-3
	1-2	1-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 table=document.createElement("table");/*创建table标签*/
    var tr=document.createElement("tr");/*创建tr标签*/
    /*创建td标签,根据参数设定td个数*/
    for(var i=0;i<tdcount;i++){
        var td=document.createElement("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次每次单元格数量递增*/
    document.getElementsByTagName("body")[0].appendChild(table1(i));
}
</script>