怎么做网页表格（如何用网页制作出好看的表格）

本文目录

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

如何用网页制作出好看的表格

CSS制作好看的网页表格
如果数据表格对于视力没有问题用户都难以阅读的话，那么想像一个那些用辅助技术(掌上设备)的人来说，它们是多么复杂和混乱.幸运的是html规范提供了许多无素和属性来提高数据表格对于这些设备的可访问性.
1.summary 和 caption
第一元素是表格的caption，它基本上用做表格的标题.尽管这不是必须有的元素，但是尽可以使用caption总是好的.另一个元素是summary.summary属性可以应用于表格标签，用来描述表格的内容.与image的alt文本属性相似.
2.thead, tbody, tfoot
thead, tbody, tfoot使网页设计人员能够将表格划分为罗辑部分.例如，可以将所有列标题放在thead元素中，这样就能够对这个特殊区域单独应用样式.如果选择使用thead或tfoot元素，那么必须至少使用一个tbody元素.在一个表格中只能使用一个thead和tfoot元素，但是可以使用多个tbody元素将复杂的表格划分为更容易管理的部分.
3.col 和 colgroup
行与列标题应该使用th标记而不是td，但是如果某些内容既是标题又是数据，那么它仍然使用td.表格标题可以设置为row或col的scope属性，定义它们是行标题还是列标题.
虽然tr元素使开发人员能够整行应用样式，但是很难整列应用样式.为了解决这个问题。

如何用Dreamweaver制作网页表格

一、要想用Dreamweaver来制作网页，首先要安装Dreamweaver网页制作的工具，这是必备的，可以去官网里面去下载即可。

二、操作步骤：

【1】第一步是打开Dreamweaver工具。

【2】然后在Dreamweaver选项的中，选择新建一个Html文件，这个是制作网页的前提。

【3】进入Dreamweaver主界面后，我们可以看到自动生成的标题、头、身体的相关的代码的出现，这个是软件自动生成的，可以直接使用的。

【4】在Dreamweaver代码的主界面中，在代码、拆分、设计这三个选项卡中，选择拆分，因为这样可以更好的看到代码与相关设计的表格的调整的问题。

【5】然后选择插入中的表格的选项，这个是用来选择表格的选项的。

【6】选择表格的选项框出现后，然后根据个人的需要，可以选择表格的行与列，还可以选择相关的标题、摘要，这里就选择五行五列。

【7】当点击确定后，就能够看到左边的代码区域，右边的相关表格的区域。

【8】表格制作好后，可以根据个人的需要对表格进行调整大小，可以通过鼠标的拖动来调整表格的大小。

【9】还可以在代码中调整网页表格的大小，对表格的长与宽进行相关的调整，可以修改长与宽的值的大小。

【10】最后一定要记得保存哦，保存的文件是以html为后缀名的。

【11】文件保存好后，可以在Dreamweaver页面中按F12来浏览你做好的网页表格。

在线表格怎么做如何制作

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

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

1、首先登录腾讯文档。

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

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

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

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

如何把excel做成网页

1、电脑打开excel表格。

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

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

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

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格式。）
第一种（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制作一个表格

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、预览结果如下所示，一个简单的表格就制作出来了。