做表格怎么生成html5 html5怎么制作表格

很多站长朋友们都不太清楚做表格怎么生成html5，今天小编就来给大家整理做表格怎么生成html5，希望对各位有所帮助，具体内容如下：

本文目录一览： 1、 html5/CSS3做一个表格 2、 thml如何制作表格代码？ 3、怎样将带表格的Word文件快速准确的生成Html文件? 4、 HTML5-表格 5、 HTML5中如何绘制图表？ 6、如何制作一个响应式的HTML5表格 html5/CSS3做一个表格

给你写了个简单的课程表样式的表格

看一下

table { border-collapse:collapse;text-align:center; vertical-align:middle;}

table tr{ height:25px;}

table td{ width:100px;}

.bg1{ background:#ccc;}

table tr:hover{ background:#09C;}

.bg2{ background:#999;}

.t1,.t2,.t3,.t4,.b1,.b2,.b3,.b4,.tab{ display:block; overflow:hidden;}

.t1,.t2,.t3,.b1,.b2,.b3{ height:1px;}

.t2,.t3,.t4,.b2,.b3,.b4,.tab{ border-left:2px solid #f6f; border-right:2px solid #f6f;}

.t1,.b1{ margin:0 5px; background: #F6F;}

.t2,.b2{ margin:0 3px; border-width:2px;}

.t3,.b3{ margin:0 2px;}

.t4,.b4{ height:2px; margin:0 1px;}

.tab{ height:130px; background:#F7F8F9;}

.tab_width{ width:700px; margin:0 auto; cursor:pointer;}

</style>

<table>

<tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</table>

</div>

</div>

thml如何制作表格代码？

首先打开软件，新建一个HTML5文档。为文档命名为：table。当然新建文档的方法有很多，使用的软件不同，方式不同。

在<body></body>之间输入以下代码:

... ... </tbody></table></body>

我们可以看到表格已经完成大半，除了线框尚未加上以外。这时，我们只用在标签<table>里加一个属性<border="1">

这时候我们再在浏览器中查看，会发现表格的边框就已经加上了。

万变不离其宗，在最基本的代码基础上再加其他代码便可制作出绚丽的表格了。

怎样将带表格的Word文件快速准确的生成Html文件?

我曾经是一个网络管理员，做过几年网页。

WORD文件由于其特殊性，导致它输出的HTML文件的内容的代码格式并不“干净”，尤其是许多表格文件，在用DREAMWERVER打开你可以看到里面充满了许多你所不知道起什么作用的标记符号。

鉴于你现在的情况，建议你直接在DREAMWERVER中编辑表格，然后手动输入数据，再手动调整表格到你所需要的格式。这种方法是我这么多年来认为最简便的方法。

当然，如果你需要编辑的内容原本就是存储在WORD文件在中，并且不需要大量的修改格式的话，那么在word软件里选择“文件”、“另存为”选择“html”格式，或者直接另存为web页，之后对另存的html进行简单的编辑即可。

HTML5-表格

HTML <ul> 元素 ( 或 HTML 无序列表元素）代表多项的无序列表，即无数值排序项的集合，且它们在列表中的顺序是没有意义的。通常情况下，无序列表项的头部可以是几种形式，如一个点，一个圆形或方形。头部的风格并不是在页面的 HTML 描述定义, 但在其相关的 CSS 可以用 list-style-type 属性。 ul 标签需要和 li 标签结合使用。

属性说明：

HTML <ol> 元素表示多个有序列表项，通常渲染为有带编号的列表。

属性说明:

HTML 元素（或 HTML 描述列表元素）是一个包含术语定义以及描述的列表，通常用于展示词汇表或者元数据 ( 键-值对列表 )。

HTML 的 table 元素表示表格数据 — 即通过二维数据表表示的信息。

?> 属性：(写在开头标签的里面的单词就叫做该元素的属性)

浏览器运行效果如下：

把上面表格中数字为 1 和 2 的单元格进行合并，数字为 3 和 6 的单元格进行合并。

数字为 1 和 2 的单元格分别在不同的列中所以是进行了列合并，因为只需要合并两个单元格所以 colspan 的值为 2，列合并只需要在数字为 1 的单元格中添加属性 colspan，然后把数字为 2 的单元格删除，列合并就完成了。

数字为 1 和 2 的单元格分别在不同的行中所以是进行了行合并，因为只需要合并两个单元格所以 rowspan 的值为 2，行合并只需要在数字为 3 的单元格中添加属性 rowspan，然后把数字为 6 的单元格删除，行合并就完成了。

浏览器运行效果如下：

HTML5中如何绘制图表？

图表的背景一般是精心设计的它有一定的梯度、网格线、号码标签和月份名称等等，如果直接通过JavaScript进行绘制可能需数十行或上百行的代码。但是如果我们直接通过Canvas直接创建一个背景图。我们只需要在其他的软件如PS上绘制好一个背景图，然后加载到Canvas上就可以了。

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>你的浏览器不支持canvas元素</p>

</canvas>

</div>

// 1、要绘制图表首先我们要获取到canvas对象以及具有图表背景的图片对象。

var

canvas = document.getElementById('canvas'),

context = null;

context = canvas.getContext('2d');

var img = new Image();

img.src ='chart-background.png';//这里是一张具有图表背景的图片

// 2、绘制一个具有图表背景的图片后再根据要绘制的曲线图各个点在canvas是中的坐标绘制直线。

img.onload = function() {

//绘制图片

context.drawImage(img, 0, 0);

//绘制直线

context.beginPath();

context.moveTo(70, 105);

context.lineTo(105, 132);

context.lineTo(142, 250);

context.lineTo(176, 175);

context.lineTo(212, 145);

context.lineTo(245, 197);

context.lineTo(280, 90);

context.stroke();

}

</script>

</body>

</html>

3、本示例的最终绘制效果如下：这样一个曲线图表就绘制出来的，其他的图表也可以用类似的方法进行绘制。

这些都是有关于HTML5新特性的一些应用。给你推荐一个教程网站秒秒学，该网站上有关于HTML5新特性的讲解。

如何制作一个响应式的HTML5表格

前段时间在网上看到了一个老外写的一个HTML5响应式表格效果，它的CSS代码用SASS写的，有许多重复的data属性。我们这里改进一下他的代码，解决一下他写的不好的地方。要看到本例的响应式表格效果，浏览器要缩放到小于600像素的大小。HTML结构如下：

<tableid="miyazaki">

<caption>The Films of Miyazaki</caption>

<thead>

<tr><th>Film<th>Year<th>Honor

<tbody>

<tr>

<tddata-th="Film">My Neighbor Totoro

<tddata-th="Year">1988

<tddata-th="Honor">Blue Ribbon Award (Special)

<tr>

<tddata-th="Film">Princess Mononoke

<tddata-th="Year">1997

<tddata-th="Honor">Nebula Award (Best Script)

<tr>

<tddata-th="Film">Spirited Away

<tddata-th="Year">2001

<tddata-th="Honor">Academy Award (Best Animated Feature)

<tr>

<tddata-th="Film">Howl’s Moving Castle

<tddata-th="Year">2004

<tddata-th="Honor">Hollywood Film Festival (Animation OTY)

</table>

注意代码中的data属性，每一个单元格的data属性都与表格的header相对应。

CSS样式

表格基本的CSS样式如下：

table#miyazakicaption{

font-size:2rem;color:#444;

margin:1rem;

background-image:url(miyazaki.png),url(miyazaki2.png);

background-size: contain;

background-repeat:no-repeat;

background-position:centerleft,centerright;

}

table#miyazaki {

border-collapse:collapse;

font-family: Agenda-Light;font-weight:100;

background:#333;color:#fff;

text-rendering:optimizeLegibility;

border-radius:5px;

}

table#miyazaki thead th {font-weight:600; }

table#miyazaki thead th, table#miyazaki tbody td {

padding: .8rem;font-size:1.4rem;

}

table#miyazaki tbody td {

padding: .8rem;font-size:1.4rem;

color:#444;background:#eee;

}

table#miyazaki tbody tr:not(:last-child) {

border-top:1pxsolid#ddd;

border-bottom:1pxsolid#ddd;

}

下面是响应式表格的CSS代码：

@mediascreenand (max-width:600px) {

table#miyazakicaption{background-image:none; }

table#miyazaki thead {display:none; }

table#miyazaki tbody td {display:block;padding: .6rem; }

table#miyazaki tbody tr td:first-child {background:#333;color:#fff; }

table#miyazaki tbody td:before {

content:attr(data-th);font-weight:bold;

display:inline-block;width:6rem;

}

media query代码中隐藏表格的头部单元，并且将每一个单元格的data-th作为标签显示在单元格内容的前面。每一行的第一个单元格都设置了特别的背景色和前景色，使之更为清晰。

关于做表格怎么生成html5的介绍到此就结束了，不知道本篇文章是否对您有帮助呢？如果你还想了解更多此类信息，记得收藏关注本站，我们会不定期更新哦。

查看更多关于做表格怎么生成html5 html5怎么制作表格的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did154417

更新时间：2022-12-02 阅读：43次