`

页面中的表格如何画斜线

 
阅读更多

 

有的时候我们在做开发的时候会想要画出有斜线的表格，方法如下：

 

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>表格斜线</title>

</head>

<script Language="javascript">

function a(x, y, color) { //起始位置x，y；宽、高度都是1个像素；颜色是color画线。

document.write("<img border='0' style='position: absolute; left: "

+ (x + 18) + "; top: " + (y + 18) + ";background-color: "

+ color + "' src='px.gif' width=1 height=1>");

}

</script>

<body leftmargin=18 topmargin=18>

<TABLE border=0 bgcolor="000000" cellspacing="1" width=398>

<TR bgcolor="FFFFFF">

<TD id="td1">

</TD>

<TD>

张三

</TD>

<TD>

李四

</TD>

</TR>

<TR bgcolor="FFFFFF">

<TD>

c

</TD>

<TD>

72

</TD>

<TD>

36

</TD>

</TR>

<TR bgcolor="FFFFFF">

<TD>

c++

</TD>

<TD>

85

</TD>

<TD>

58

</TD>

</TR>

</TABLE>

<script>

function line(x1, y1, x2, y2, color) {

var tmp;

if (x1 >= x2) {

tmp = x1;

x1 = x2;

x2 = tmp;

tmp = y1;

y1 = y2;

y2 = tmp;

}

for ( var i = x1; i <= x2; i++) {

x = i;

y = (y2 - y1) / (x2 - x1) * (x - x1) + y1; //y=ax+b：标准的直线表达式，通过斜率求y值

a(x, y, color);

}

}

line(td1.offsetLeft, td1.offsetTop, td1.offsetLeft + td1.offsetWidth,td1.offsetTop + td1.offsetHeight, '#000000');

</script>

</BODY>

</html>

分享到：
| 优秀的对象角色建模解决方案-Torque
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Html中用table画斜线

    在HTML中，`&lt;table&gt;`元素是用于创建表格的关键组件，它在网页布局和数据展示中扮演着重要角色。在某些场景下，我们可能需要在表格的单元格(`&lt;td&gt;`)内添加斜线，以达到特殊的视觉效果或区分不同的信息。例如，在描述...

    5种做法实现table表格中的斜线表头效果

    为了提高视觉效果，有时需要在表格表头中添加斜线来区隔不同的表头内容。实现斜线表头有多种方法，下面将详细介绍这五种方法的实现原理和适用场景。 1. 图片背景法 直接利用UI设计人员制作好的带有斜线的图片作为...

    用js作表格的表头斜线

    在网页设计中，创建带有斜线的表格表头可以增加信息层次感，使得数据更易于理解。本示例探讨如何使用JavaScript（js）来实现这一功能。JavaScript是一种强大的客户端脚本语言，它允许我们在用户的浏览器上动态地创建...

    CSS表格斜线.rar

    标题“CSS表格斜线.rar”和描述“CSS表格斜线”暗示了这个压缩包内容主要涉及如何使用CSS来实现带有斜线的表格效果。在网页设计中，有时...通过学习和理解这些技术，你可以创建出更加吸引人的、功能丰富的网页表格。

    页面展现画斜线VML入门

    页面展现画斜线VML入门帮助文档,转载只供学习使用VML入门.chm

    css 模拟表格斜线

    通过这种方法，我们可以无需图像处理即可在网页上灵活地模拟出表格斜线效果，既节约了资源也增加了页面的可维护性。这种技术可以在多种布局中使用，例如在表单、清单或其它需要线条交叉显示的场景。

    表格通过div+css现实对角线列表功能

    在网页设计中，传统的HTML表格元素`&lt;table&gt;`虽然强大，但有时可能无法满足某些复杂的布局需求，例如创建对角线列表。在这种情况下，开发者会借助`div`元素和CSS来实现这种效果。本篇文章将深入探讨如何使用`div`和...

    计算机应用基础教程表格处理与图文排PPT课件.pptx

    - 使用【绘制表格】工具，直接在页面上画出所需的表格结构。 2. **编辑表格**： - 插入单元格、行、列：可扩展表格大小，满足不同数据需求。 - 删除单元格：移除不再需要的单元格，调整表格结构。 - 合并表格或...

    Dreamweaver网页设计考试题目

    ### Dreamweaver网页设计考试...以上知识点全面覆盖了Dreamweaver网页设计考试中的关键概念和技术细节，从基础到进阶，旨在帮助考生深入理解Dreamweaver在网页设计中的应用，以及掌握相关的网页设计原则和技术要点。

    精品资料（2021-2022年收藏）业务培训记录-教师计算机基础知识培训教案精讲.doc

    **手工绘制表格**：启用“表格和边框工具栏”，点击“绘制表格”按钮后在文档中画出表格，可以使用“擦除”按钮去除多余的线条。\n3. **使用菜单命令建立表格**：在“表格”菜单中选择“插入表格”，输入所需的行数...

    信息技术操作题全.pdf

    此外，还可以进行拆分和合并单元格的操作，画斜线，以及调整表格高度。 7. **表格复制与编辑**：复制已有表格，删除指定列，调整单元格高度。这涉及到选中、复制、粘贴、删除和格式调整等操作。 8. **文字输入与...

    办公自动化操作相关习题.doc

    插入表格，可以在“插入”选项卡的“表格”下拉菜单中选择，设置单元格的宽度和高度，进行拆分和合并操作，画斜线，保存为“lx5.doc”。 6. **复制表格和修改**： - 复制表格，然后删除第一列，可在选中表格后使用...

    办公自动化操作相关习题(共10页).doc

    1. 制作四行三列的表格，设置单元格宽度为3.4cm，进行拆分、合并操作，画斜线，保存为lx5.doc。这涉及到更复杂的表格操作，包括单元格的合并、拆分和绘制斜线。 2. 复制上一表格，删除第一列，修改所有单元格高度为...

    《程序天下：JavaScript实例自学手册》光盘源码

    9.7 表格的斜线 9.8 table中的文字滚动 9.9 JavaScript遍历table的行和列 9.10 表格按回车自动生成新行 9.11 单击单元格背景变色 9.12 单击表格某行后其他行隐藏 9.13 单击表头实现表格排序 9.14 单击单元格显示行的...

    程序天下:JavaScript实例自学手册

    9.7 表格的斜线 9.8 table中的文字滚动 9.9 JavaScript遍历table的行和列 9.10 表格按回车自动生成新行 9.11 单击单元格背景变色 9.12 单击表格某行后其他行隐藏 9.13 单击表头实现表格排序 9.14 单击单元格显示行的...

    精品资料（2021-2022年收藏）业务培训记录-教师计算机基础知识培训教案资料.doc

    编辑操作则涉及增加或删除行和列、移动表格、拆分和合并单元格、绘制斜线表头、调整行高和列宽，以及将表格与文本相互转换。 艺术字的插入和文本框的操作也是Word应用的一部分。艺术字可以通过“插入”-&gt;“图片”-&gt;...

    计算机一级考试Word操作题.pdf

    - 在Word中，可以通过选择表格工具栏中的“布局”选项卡来实现表格列的交换。 - 通过选择特定的单元格，然后使用“合并单元格”和“拆分单元格”功能来完成对第四列的操作。 2. **字体设置：** - 选择特定的...

    业务培训记录教师计算机基础知识培训教案1.doc

    - 表头斜线：选择“表格”-&gt;“绘制斜线表头”。 - 调整行高/列宽：手动拖动或选中行/列后通过菜单调整。 ### 二、艺术字与文本框 1. **艺术字插入**： - 方法①：“插入”-&gt;“图片”-&gt;“艺术字”，选择样式、...

    Word、Excel、PPT使用技巧与实战方法大全

    - 复制Word中的表格，粘贴到Excel中，并选择“仅保留文本”。 **12. 巧存Word文档中的图片** - 右键点击图片，选择“另存为图片”。 **13. 在WordXP中巧输分数** - 输入分数时，如输入`1/2`后按空格键，会自动...

Magicbox
Global site tag (gtag.js) - Google Analytics