<html>
<head>
<title>斜线表头</title>
<meta charset="utf-8">
</head>
<script Language="javascript">
function a(x, y, color) {
document.write("<img border='0' style='position: absolute left: " + (x) + " top: " + (y) + "background-color: " + color + "' src='px.gif' width=1 height=1>")
}
</script>
<body leftmargin=0 topmargin=0>
<br>
<TABLE border=0 bgcolor="000000" cellspacing="1" width=400>
<TR bgcolor="FFFFFF">
<TD width="111" height="52">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="td1">
</td>
<td>
成绩
</td>
</tr>
<tr>
<td>
姓名
</td>
<td id="td2">
</td>
</tr>
</table>
</TD>
<TD width="81">
数学
</TD>
<TD width="96">
英语
</TD>
<TD width="99">
C语言
</TD>
</TR>
<TR bgcolor="FFFFFF">
<TD>
张三
</TD>
<TD>
55
</TD>
<TD>
66
</TD>
<TD>
77
</TD>
</TR>
<TR bgcolor="FFFFFF">
<TD>
李四
</TD>
<TD>
99
</TD>
<TD>
68
</TD>
<TD>
71
</TD>
</TR>
<TR bgcolor="FFFFFF">
<TD>
王五
</TD>
<TD>
33
</TD>
<TD>
44
</TD>
<TD>
55
</TD>
</TR>
</TABLE>
<script>
function getTop(tdobj) {
vParent = tdobj.offsetParent
t = tdobj.offsetTop
while (vParent.tagName.toUpperCase() != "BODY") {
t += vParent.offsetTop
vParent = vParent.offsetParent
}
return t
}
function getLeft(tdobj) {
vParent = tdobj.offsetParent
t = tdobj.offsetLeft
while (vParent.tagName.toUpperCase() != "BODY") {
t += vParent.offsetLeft
vParent = vParent.offsetParent
}
return t
}
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
a(x, y, color)
}
}
//line(1,1,100,100,"000000")
line(getLeft(td1), getTop(td1), getLeft(td1) + td1.offsetWidth, getTop(td1) + td1.offsetHeight, '#000000')
line(getLeft(td2), getTop(td2), getLeft(td2) + td2.offsetWidth, getTop(td2) + td2.offsetHeight, '#000000')
</script>
</BODY>
</HTML>
table本身没有这个样式 1，作图，2css，js
1、打开WORD软件，新建一份文档。2、在文档中插入或绘制所需要的表格。
3、在所要做出如上图的表格单击一下，随便那一格都可以，然后单击命令栏上的表格，单击绘制斜线表头，在表头样式里选样式2，字体根据需要选，在行标题，数据标题，列标题分别输入要制表所要项。最后单击确定。
4、调整美化。
以上我是用word 2003所说，其他版本，你注意查找。因为版本不一样，工具，格式有细微区分。同时还可以操作其他样式表头制作。
border-collapse 属性：设置表格的边框是否被合并为一个单一的边框，即：用于设置表格边框是合并显示还是分开显示。border-collapse 属性设置表格的边框是否被合并为一个单一的边框。它有以下几个值：
-- separate 默认值：边框会被分开，不会忽略 border-spacing 和 empty-cells 属性；
-- collapse：如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性；
-- inherit：规定应该从父元素继承 border-collapse 属性的值。
双线表格边框的实现
html代码：
<table>
<tr>
<td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td>
</tr>
<tr>
<td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td>
</tr>
<tr>
<td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td>
</tr>
<tr>
<td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td>
</tr>
</table>
css代码：
table,table td{
text-align: center
border: 1px solid #000
border-collapse：separate；
}
table td{
padding: 10px 30px
}
表格边框的双线样式其实很简单，只要同时设置表格外边框和table里的每个单元格的边框，就可以实现了。
因为separate是默认值，就算是不设置border-collapse：separate；表格也会呈现双线效果。
我们主要是来看看border-collapse属性合并边框，实现单线边框的方法，html代码一样，只需设置css样式：
css代码：
table,table tr td {
border: 1px solid #000
text-align: center
border-collapse: collapse
}table tr td {
padding: 10px 30px
}
单线边框的实现也很简单，它是在双线样式的基础上，设置border-collapse: collapse
把相邻的两个table边框合并成一个，使得相邻的两条线并在一起，边框就以单线的形式显示了。
总结：表格边框的无论是单线边框样式，还是双线边框样式都在前端页面中应用广泛，大家可以根据自己
