html table怎么实现斜线表头

html-css06

html table怎么实现斜线表头,第1张

<HTML>

<HEAD>

<TITLE>斜线表头</TITLE> 

</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=x1i<=x2i++)

{

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>

万维网上的一个超媒体文档称之为一个页面（外语：page）。作为一个组织或者个人在万维网上放置开始点的页面称为主页（外语：Homepage）或首页，主页中通常包括有指向其他相关页面或其他节点的指针（超级链接），所谓超级链接，就是一种统一资源定位器（Uniform Resource Locator，外语缩写：URL）指针，通过激活（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。在逻辑上将视为一个整体的一系列页面的有机集合称为网站（Website或Site）。超级文本标记语言（英文缩写：HTML）是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。

网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。[1]

超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。

方法一:可以利用Excel中的绘图工具。Excel中的绘图工具栏在默认情况下没有打开，在工具栏空白处点击右键，打开绘图工具栏。然后调整好单元格的大小，画好所需斜线，在空白处画文本框，输入表头文字，然后双击设置文本框格式，选择“颜色与线条”标签，“填充颜色”选择“无填充色”，“线条颜色”选择“无线条色”。

按住“Ctrl”键的同时拖动刚才建立的文本框，复制带有格式的文本框，更改里面的文字，然后利用“Shift+点击”选中表头的对象，单击右键，选择“组合”即可。

技术要点:使用“单元格格式”对话框中的“边框”选项卡设置斜线，使用“对齐”选项卡结合空格键调整文字位置。

方法二:具体操作步骤如下。

1 .单击 工作表的的A1单元格，输入斜线表头的内容，比如本例中有两个标题“项目名称”和“日期”，先输入“项目名称”，然后按快捷键 Alt+ 回车键，这样可以在单元格内向下换行，再按 Alt+ 回车键一次，输入“日期”。

2.按Ctrl+ 回车键，这样可以在不离开该单元格的情况下选中该单元格。

3.按快捷键Ctrl+1 ，打开“单元格格式”对话框。 ( 如果在单元格上单击右键，然后从弹出的快捷菜单中选择命令“设置单元格格式”，也能打开该对话框，但使用快捷键会更快一些。 )

4.在 “单元格格式”对话框中，单击“边框”选项卡，然后单击左斜线按钮。

5.在 “单元格格式”对话框中，单击“对齐”选项卡，将文本的水平和垂直对齐方式都设置为“两端对齐”。设置完毕，单击“确定”按钮。

6.观察表头中的文本，显然项目名称的位置不是很合适。双击A1单元格，将插入点定位到“项目名称”左边，并按两次空格键，让“项目名称”的位置向右一些。按Ctrl+ 回车键离开编辑状态并选中A1单元格，如果发现“项目名称”换行了，可以通过调整该列的宽度将其调整到合适为止，同样可以调整行宽，使表头的大小变得合适。当然，也可以改变表头中文本的大小。最后我们可以得到表头斜线效果。