C1-03表格绘制

最新推荐文章于 2024-07-17 17:31:34 发布

乘风测码

最新推荐文章于 2024-07-17 17:31:34 发布

阅读量123

点赞数 3

文章标签： html css js

本文链接：https://blog.csdn.net/alibabaad/article/details/115625128

版权

C1-03表格绘制

C1-03表格绘制

C1-03表格绘制

绘制表格可以通过HTML+CSS+JavaScript来实现。

HTML简介

HTML是超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用，HTML 不是一种编程语言，而是一种标记语言 (markup language)，是网页制作所必备的。

页面内可以包含图片、链接，甚至音乐、程序等非文字元素，结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。

CSS用法

层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种样式表语言，用来描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。

CSS 是开放网络的核心语言之一，由 W3C 规范实现跨浏览器的标准化。CSS节省了大量的工作。样式可以通过定义保存在外部.css文件中，同时控制多个网页的布局，这意味着开发者不必经历在所有网页上编辑布局的麻烦。CSS 被分为不同等级：CSS1 现已废弃， CSS2.1 是推荐标准， CSS3 分成多个小模块且正在标准化中。

JavaScript简介

JavaScript ( JS ) 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web 页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，例如 Node.js、 Apache CouchDB 和 Adobe Acrobat。JavaScript 是一种基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。了解更多 JavaScript。

本部分将专注于 JavaScript 语言本身，而非局限于网页或其他限制环境。想要了解网页有关的 APIs ，请参考 Web APIs 以及 DOM。

JavaScript 的标准是 ECMAScript 。截至 2012 年，所有的现代浏览器都完整的支持 ECMAScript 5.1，旧版本的浏览器至少支持 ECMAScript 3 标准。2015年6月17日，ECMA国际组织发布了 ECMAScript 的第六版，该版本正式名称为 ECMAScript 2015，但通常被称为 ECMAScript 6 或者 ES6。自此，ECMAScript 每年发布一次新标准。本文档目前覆盖了最新 ECMAScript 的草案，也就是 ECMAScript2020。

不要将 JavaScript 与 Java编程语言混淆。虽然“Java”和“JavaScript”都是 Oracle 公司在美国和其他国家注册（或未注册）的商标，但是这两门语言在语法、语义与用途方面有很大不同。

一个基本表格需要用到HTML标签。

<body>
<table border="1">
    <tr>
        <th colspan="4">标题名字</th>
    </tr>
    <tr>
        <td>第一列第一行</td><td>第二列第一行</td><td>第三列第一行</td><td>第四列第一行</td>
    </tr>
    <tr>
        <td>第一列第二行</td><td>第二列第二行</td><td>第三列第二行</td><td>第四列第二行</td>
    </tr>
    <tr>
        <td>第一列第三行</td><td>第二列第三行</td><td>第三列第三行</td><td>第四列第三行</td>
    </tr>
    <tr>
        <td>第一列第四行</td><td>第二列第四行</td><td>第三列第四行</td><td>第四列第四行</td>
    </tr>
</table>
<body>

思考：怎么让第一行和第二行显示红色背景呢？？？？

通过CSS在基本表格基础改造后的表格。

<body>
<table border="1">
    <tr>
        <th colspan="4">标题名字</th>
    </tr>
    <tr>
        <td>第一列第一行</td><td>第二列第一行</td><td>第三列第一行</td><td>第四列第一行</td>
    </tr>
    <tr>
        <td>第一列第二行</td><td>第二列第二行</td><td>第三列第二行</td><td>第四列第二行</td>
    </tr>
    <tr>
        <td>第一列第三行</td><td>第二列第三行</td><td>第三列第三行</td><td>第四列第三行</td>
    </tr>
    <tr>
        <td>第一列第四行</td><td>第二列第四行</td><td>第三列第四行</td><td>第四列第四行</td>
    </tr>
</table>

<style type="text/css">
/*使用table标签选择器给表格设置样式*/
	table{
		height: 200px;
		width:500px;
		border:2px solid  green;
		}
/*使用td标签选择器给单元格设置样式*/
	td{
	border:1px solid;
	}
/*使用tr:nth-child(2n)子类选择器指定每个tr标签父类下偶数tr标签设置样式*/
	tr:nth-child(2n){
	background:#ff0000;
	}
</style>
</body>

通过JS自动产生表格。

<table border="1">
    <tr>
        <th colspan="4">标题名字</th>
    </tr>
    <tr>
        <td>第一列第一行</td><td>第二列第一行</td><td>第三列第一行</td><td>第四列第一行</td>
    </tr>
    <tr>
        <td>第一列第二行</td><td>第二列第二行</td><td>第三列第二行</td><td>第四列第二行</td>
    </tr>
    <tr>
        <td>第一列第三行</td><td>第二列第三行</td><td>第三列第三行</td><td>第四列第三行</td>
    </tr>
    <tr>
        <td>第一列第四行</td><td>第二列第四行</td><td>第三列第四行</td><td>第四列第四行</td>
    </tr>
</table>
<style type="text/css">
/*使用table标签选择器给表格设置样式*/
	table{
		height: 200px;
		width:500px;
		border:2px solid  green;
		}
/*使用td标签选择器给单元格设置样式*/
	td{
	border:1px solid;
	}
/*使用tr:nth-child(2n)子类选择器指定每个tr标签父类下偶数tr标签设置样式*/
	tr:nth-child(2n){
	background:#ff0000;
	}
</style>
<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>

乘风测码

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
C1-03表格绘制

C1-03表格绘制绘制表格可以通过HTML+CSS+JavaScript来实现。HTML简介HTML是超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用，HTML 不是一种编程语言，而是一种标记语言 (markup language)，是网页制作所必备的。页面内可以包含图片、链接，甚至音乐、程序等非文字元素，结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。CSS
复制链接

扫一扫