怎么做网页表格（网页的表格怎么做的）

本文目录

• 网页的表格怎么做的
• HTML表格怎么制作
• 怎样用html制作一个表格
• 在线表格怎么做如何制作
• 如何把excel做成网页

网页的表格怎么做的

提供几种代码：（每种代码，保存成html格式。）
第一种（CSS+JS）：
《html》
《head》
《title》Untitled Document《/title》
《meta http-equiv="Content-Type" content="text/html; charset=gb2312"》
《style》
.t1 {background-color:#336699;text-align:center}
.t2 {background-color:#ffcc00;text-align:center}
《/style》
《/head》
《body bgcolor="#FFFFFF" text="#000000"》
《table id="table1" width="50%" border="0" cellpadding="0" cellspacing="0"》
《tr》《td》aaaaaaaaaaa《/td》《/tr》
《tr》《td》bbbbbbbbbbb《/td》《/tr》
《tr》《td》aaaaaaaaaaa《/td》《/tr》
《tr》《td》bbbbbbbbbbb《/td》《/tr》
《tr》《td》aaaaaaaaaaa《/td》《/tr》
《tr》《td》bbbbbbbbbbb《/td》《/tr》
《tr》《td》aaaaaaaaaaa《/td》《/tr》
《tr》《td》bbbbbbbbbbb《/td》《/tr》
《tr》《td》aaaaaaaaaaa《/td》《/tr》
《tr》《td》bbbbbbbbbbb《/td》《/tr》
《tr》《td》aaaaaaaaaaa《/td》《/tr》
《tr》《td》bbbbbbbbbbb《/td》《/tr》
《/table》
《script Language="Javascript"》
for (i=0;i《table1.rows.length;i++) {
(i%2==0)?(table1.rows(i).className = "t1"):(table1.rows(i).className = "t2");
}
《/script》
《/body》
《/html》
第二种（CSS）：
《!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"》
《HTML》
《HEAD》
《TITLE》 New Document 《/TITLE》
《META NAME="Generator" CONTENT="EditPlus"》
《META NAME="Author" CONTENT=""》
《META NAME="Keywords" CONTENT=""》
《META NAME="Description" CONTENT=""》
《style type="text/css"》
table{
width:100%;
}
.t1{
background:#ff6600;
color:black;
}
.t2{
background:#336699;
color:white;
}
《/style》
《/HEAD》
《BODY》
《TABLE cellpadding="0" cellspacing="0"》
《TR class="t1"》
《TD》1《/TD》《TD》1《/TD》《TD》1《/TD》《TD》1《/TD》《TD》1《/TD》
《/TR》
《TR class="t2"》
《TD》2《/TD》《TD》1《/TD》《TD》1《/TD》《TD》1《/TD》《TD》1《/TD》
《/TR》
《TR class="t1"》
《TD》1《/TD》《TD》1《/TD》《TD》1《/TD》《TD》1《/TD》《TD》1《/TD》
《/TR》
《TR class="t2"》
《TD》2《/TD》《TD》1《/TD》《TD》1《/TD》《TD》1《/TD》《TD》1《/TD》
《/TR》
《TR class="t1"》
《TD》1《/TD》《TD》1《/TD》《TD》1《/TD》《TD》1《/TD》《TD》1《/TD》
《/TR》
《TR class="t2"》
《TD》2《/TD》《TD》1《/TD》《TD》1《/TD》《TD》1《/TD》《TD》1《/TD》
《/TR》
《/TABLE》
《/BODY》
《/HTML》
第三种（CSS+JS）
《!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"》
《html xmlns="http://www.w3.org/1999/xhtml"》
《head》
《meta http-equiv="Content-Type" content="text/html; charset=gb2312" /》
《title》表格隔行换色《/title》
《style type="text/css" media="screen"》
《!-- /* PR-CSS */
table {border-collapse:collapse;border:solid #999;border-width:1px 0 0 1px;}
table td {border:solid #999;border-width:0 1px 1px 0;}
tr.t1 td {background-color:#fff;}/* 第一行的背景色 */
tr.t2 td {background-color:#eee;}/* 第二行的背景色 */
tr.t3 td {background-color:#ccc;}/* 鼠标经过时的背景色 */
--》
《/style》
《/head》
《body》
《table id="tab"》
《tr》《td》12《/td》《td》12《/td》《td》12《/td》《td》12《/td》《/tr》
《tr》《td》12《/td》《td》12《/td》《td》12《/td》《td》12《/td》《/tr》
《tr》《td》12《/td》《td》12《/td》《td》12《/td》《td》12《/td》《/tr》
《tr》《td》12《/td》《td》12《/td》《td》12《/td》《td》12《/td》《/tr》
《tr》《td》12《/td》《td》12《/td》《td》12《/td》《td》12《/td》《/tr》
《/table》
《script type="text/javascript"》
《!--
var Ptr=document.getElementById("tab").getElementsByTagName("tr");
function $() {
for (i=1;i《Ptr.length+1;i++) {
Ptr.className = (i%2》0)?"t1":"t2";
}
}
window.onload=$;
for(var i=0;i《Ptr.length;i++) {
Ptr.onmouseover=function(){
this.tmpClass=this.className;
this.className = "t3";
};
Ptr.onmouseout=function(){
this.className=this.tmpClass;
};
}
//--》
《/script》
《/body》
《/html》

HTML表格怎么制作

1、制作表格我们需要使用标签table在html中输入table标签，然后设置行和列，，tr代表行,td代表列，然后在行和列中输入相关的内容。

2、预览网页我们发现，网页显示格式看起来不像是表格，因为没有框线，这时候我们需要给table标签设置边框，border，如图所示，在table标签中，定义border的值，这样再预览网页我们就可以看到表格样式。

3、图中的表格表头和文本内容显示格式一致，我们可以使用th标签代替td标签作为表格的表头，系统自动将表头内部的文本内容加粗居中显示，这样表头格式就被着重定义出来。

4、可以使用caption标签给表格添加标题，caption是table标签的子标签需要写在table标签内部，将需要定义的标题文本输入到caption中。

5、两行数值一样的话可以设置为rowspan值，如图所示，两行数据一致，直接设置rowspan值为2，下一行的这个数值就不必单独定义了，如果是三行数值一致，那么可以直接设置为3.

6、将多列相同数据一起显示可以使用colspan来进行设置，如图所示，第三列所有的内容都全部显示一致，我们可以设置像表格中的合并效果然后一起显示，这样就不必每一列都输入内容。

怎样用html制作一个表格

html做个表格的步骤如下：

1、首先新建一个html，点击《body》《/body》中间，先填入表格内容；

2、内容根据需求来写即可，示例代码如下：

《table》

《p style="text-align:center "》功课表《/p》

《tr》

《th》语文《/th》

《td》7:00-7:40《/td》

《td》7:50-8:30《/td》

《/tr》

《tr》

《th》数学《/th》

《td》7:00-7:40《/td》

《td》7:50-8:30《/td》

《/tr》

《tr》

《th》英文《/th》

《td》7:00-7:40《/td》

《td》7:50-8:30《/td》

《/tr》

《/table》

3、然后在《head》《/head》中间输入样式表的样式；

4、样式也根据个人的需求来设置即可，设置单元格的宽度高度，合并单元格，位置，颜色等等，示例代码如下：

《style type="text/css"》

body

{

width:340px;

height :800px;

}

table

{

border-collapse :collapse ;

}

th,td

{

width:100px;

height:40px;

border :1px solid black;

font-size:12px;

text-align :center;

}     

《/style》

5、这里需要注意这个代码“table”的意义是将表格边框合并为单一的边框，将相邻变合并。

6、预览结果如下所示，一个简单的表格就制作出来了。

在线表格怎么做如何制作

腾讯文档制作在线表格的方法步骤如下：

工具／原料：OPPOA93、Android11、腾讯文档2.14.0

1、首先登录腾讯文档。

2、进入首页点击“＋”。

3、在弹出的菜单栏点击“在线表格”。

4、进入页面后，双击要输入内容的格子。

5、双击后就可以输入内容了，直到内容输入完成后，点击“√”保存好的内容。

如何把excel做成网页

1、电脑打开excel表格。

2、打开excel表格做好文档之后，点击左上角的文件，然后选择文件中的另存为。

3、点击选择另存为之后，点击文件类型选择为网页文件格式，然后点击保存。

4、把excel保存网页文件格式后，返回就可以看到表格的网页格式图标了。