首页 / HTML / HTML表格基础详解_html/css_WEB-ITnose

HTML表格基础详解_html/css_WEB-ITnose

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了HTML表格基础详解_html/css_WEB-ITnose，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含21658字，纯文字阅读大概需要31分钟。

内容图文

在现在 div 大行其道的时代，table 这个标签似乎很少被人提及，到处都是 div+css 布局的书以及博客文章，但其实 table 以及连带的其他表格标签依然在的网页排版中占很重要的地位，特别是后台展示数据的时候表格运用是否熟练就显得很重要，一个清爽简约的表格布局能够把繁杂的数据表现得很有条理，虽然 div 布局也可以做到，但是总没有表格来得方便。平时也经常接触到表格，现在总结一下表格的一些属性和样式，以及学习构思一些表格的样式，以便以后不时之需。

一、标签

定义 HTML 表格

标签定义表格的表头

标签表格主体（正文）

标签定义表格的页脚（脚注或表注）

元素定义表格行

标签为表格中一个或多个列定义属性值。

标签用于对表格中的列进行组合，以便对其进行格式化。

二、表格标签及标签属性

（1）

元素定义表格标题，必须紧随 table 标签之后。只能对每个表格定义一个标题，默认居中与表格之上
元素定义表头	元素定义表格单元

标签属性说实话个人觉得挺好用的，比如 align，width等，但是本着表现层与结构层的分离，现在w3c上已经不赞成使用了。

align：相当于浮动，用 css 的 float 代替

bgcolor：用 css 的background-color 代替

border：table 的 border 属性是继承到内部的 td 标签的，相当于同时对 (selector)：table 和 (selector) table td 设置 css 的 border 属性，但是当你设置大于1的 border 数值时，又只有 table 的 border 宽度会改变。默认的浏览器属性包括：border-collapse: separate;border-spacing: 2px; 故默认添加后是双边border

cellpadding：规定单元边沿与其内容之间的空白，其实是设置表哥内部 td 标签的 padding 属性，用 (selector) table td 设置 css 的 padding 属性代替。

cellspacing：规定单元格之间的空间，用 (selector)：table 设置 css 的 padding 属性代替。

frame：规定外侧边框的哪个部分是可见的，即设置表格 border，基本不会用这个属性。

rules：规定内侧边框的哪个部分是可见的，同 frame，几乎不会用到。

summary：规定表格内容的摘要，屏幕阅读器可以利用该属性，不会有其他视觉效果。

width：用 css 的 width 代替。

css 属性

table-layout：automatic（default） | fixed | inherit（列宽度由单元格内容设定 | 列宽由表格宽度和列宽度设定 | 继承父属性）

需要注意的是，表格以及列设置的 width 属性在 table-layout 为 automatic 时都是表现为 min-width，当 table-layout 的值为 fixed 时则表现为固定的 width 值。

当需要表格内容的宽度在控制范围内，不会超出自己设置的范围，则可以用 fixed 属性值来设置这个属性，下面举个例子。

--------------------------------------------------------------举个栗子--------------------------------------------------------------

HTML：

2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

title	title	title
the	testinglongstring	Row
Second	-	Row
the	third	Row

CSS：

1 table{2     width: 300px;3     border:1px solid #000;4 }5 table td,table th{6     border:1px solid #000;7 }

没有显式加 table-layout 这个属性时是默认为 automatic 值，此时由于 testinglongstring 内容比较长，表格自动调整列的宽度，效果如下：

table 标签加了 table-layout：fixed 属性后，浏览器直接渲染表结构（相当于显示没有内容的表），太长的内容会覆盖到其他表格，效果如下：

--------------------------------------------------------------吃完栗子--------------------------------------------------------------

而往往我们希望既保持我们要的列宽度，同时确保内容不会这样覆盖到其他表格单元单元（针对英文）。这里就要涉及到另外两个 css 属性了：

1、word-wrap：normal（default）| break-word（只在允许的断字点换行 | 在长单词或 URL 地址内部进行换行）

这里主要用到 break-word 属性值。

2、work-break：normal（defaut）| break-all | keep-all（默认的换行规则 | 允许在单词内换行 | 只能在半角空格或连字符处换行）

这里主要用到 break-all 属性值。

用到的两个 css 属性的属性值作用类似，但有些区别，break-word 只有在单个单词都超过外围宽度的时候才会断单词；break-all 则是把每个行填满，然后行尾不管是单词还是空格都断为下一行，个人优选 word-wrap 属性，可以减少断单词的几率，毕竟不得已才断单词，断了后会影响单词内容表达。具体辨析可以看《你真的了解word-wrap和word-break的区别吗？》讲得比较详细。

--------------------------------------------------------------举个栗子--------------------------------------------------------------

沿用上例的 HTML 结构，举 word-wrap 属性的例子：

CSS：

 1 table { 2     width: 300px; 3     border: 1px solid #000; 4     table-layout: fixed; 5     word-wrap:break-word; 6 } 7 table td, 8 table th { 9     border: 1px solid #000;10 }11 .odd{12     width: 120px;13 }

表现如下：

--------------------------------------------------------------吃完栗子--------------------------------------------------------------

（2）、、

align：属性规定内容的水平对齐方式，用 css 属性 text-align 代替。

valign：( top|middle|bottom|baseline )，规定 tbody 元素中内容的垂直对齐方式，默认是 middle。相当于 css 的 vertical-align 属性，这里 bottom 和 baseline 在 w3shcool 上还有一些辨析，不过只是对于不同字号的英文内容来说有点用处。

还有 char，charoff 属性几乎是用不到的，所以不列举了。

注意：

1、、标签内部必须拥有标签；

2、标签不管放在

内的哪个位置，都会被定位到表格的头部，同理会被定位到底部。另外，和我们的常识不同，标签是要放在标签之前的，结合官方文档和我自己的理解，主要是因为和内的内容一般比较重要，这样能保证在表现具有大量行内容的表格时能够提前渲染，让用户先看到。

3、、、的结束标签为了精简，均可以省略。

4、设置和的一个好处是，当打印很长的需要分页的表格时，每一页上都会有、的内容。

（3）tr

align，valign：同（2）

（4）td，th

abbr：规定单元格中内容的缩写版本。不会在普通的 web 浏览器中造成任何视觉效果方面的变化。屏幕阅读器可以利用该属性。

headers：规定表头与单元格相关联。不会在普通浏览器中产生任何视觉变化。屏幕阅读器可以利用该属性。

scope：定义将表头单元与数据单元相关联的方法。不会在普通浏览器中产生任何视觉变化。屏幕阅读器可以利用该属性。

align，valign：同（2）。需要留意的是 th 默认是居中属性的，而且 th 内的字体是加粗的。

nowrap：规定表格单元格中的内容不换行。用 white-space: nowrap 代替

colspan：规定单元格可横跨的列数。比较常用，相当于 word 中的合并横向的单元格。

rowspan：规定单元格可横跨的行数。比较常用，相当于 word 中的合并垂直方向的单元格。

（5）caption

align：（top | bottom | left | right ），规定 caption 元素的对齐方式，默认居中。

align 的浏览器支持并不好，只有 top 和 bottom 属性值支持是统一的，left 和 right 在不同浏览器中的表现也不一样，所以这两个属性值当然不用，而 css 属性 caption-side 刚好就只有 top 和 bottom，故完全可以用 css 属性 caption-side 代替 align。至于要实现 left 和 right 的效果，给 caption 加 margin 属性或者 padding 属性或者用其他标签实现都不难。

c ss 属性

caption-side：top | bottom | inherit（表格标题定位在表格之上 | 表格标题定位在表格之下 | 继承父属性）

（6）col，colgroup

标签中的一些属性在一些浏览器中的支持并不好，只有在一些老的浏览器中（IE7-等）才能表现那些属性，具体原因可以点此参考。

能够用的属性主要是以下三个：

span：规定列组应该横跨的列数。默认一列，即对表格的一列设置样式。

width：col 元素的宽度。

background：设置背景色，要通过 css 样式来设置。

标签需要包裹在内，就算没有写一般浏览器也会自动帮你加上。属性和类似，增加了可以设置 css 的 border 属性。个人认为不在标签上设置属性，而是用包裹的写法比较规范。

说到列，要重新提一下前面的 table-layout 属性，下面举例子说明 col 对这个属性的影响。

--------------------------------------------------------------举个栗子--------------------------------------------------------------

HTML：

 1  2     3         4         5         6      7      8          9             10             11             12         13     14     15         16             17             18             19         20         21             22             23             24         25         26             27             28             29         30     31     title title title
the testinglongstring Row
Second - Row
the third Row

CSS：

 1 table { 2     width: 300px; 3     border: 1px solid #000; 4 } 5 table td, 6 table th { 7     border: 1px solid #000; 8 } 9 .odd{10     width: 120px;11 }

设置 120px 的列宽度后，中间列（.even）的宽度不够，但是浏览器会帮你计算并为中间内容空出足够宽度：

设置了 table-layout 属性的 fixed 值后就完全按照自己的意思来渲染了：

--------------------------------------------------------------吃完栗子--------------------------------------------------------------

（7）border-collapse | border-spacing | empty-cells

这几个 css 属性，基本只会用在表格上。

border-collapse：separate（defaul）| collapse | inherit （边框会被分开 | 边框会合并为一个单一的边框 | 继承父属性）

border-spacing：length length（定义一个 length 参数，那么定义的是水平和垂直间距。定义两个 length 参数，那么第一个设置水平间距，而第二个设置垂直间距）

empty-cells：show（defaul）| hide | inherit （在空单元格周围绘制边框 | 不绘制 | 继承父属性）

注意：

border-spacing 和 empty-cells 属性只有在 border-collapse 为 separate 是才有效的。

--------------------------------------------------------------举个栗子--------------------------------------------------------------

HTML：

 1  2      3          4          5      6      7          8          9     10 Row One
Row

CSS：

1 table {2     border-collapse: separate;3     border-spacing: 5px 20px;4     empty-cells: hide;5     border:1px solid #000;6 }7 td{8     border:1px solid #000;9 }

表现如下：

--------------------------------------------------------------吃完栗子--------------------------------------------------------------

三、表格 css 样式

（1）单线边框

HTML：

 1  2      3          4          5      6      7          8          9     10 Row One
Row Two

（方法一） CSS：

 1 table { 2     width: 200px; 3     border-left: 1px solid #000; 4     border-top: 1px solid #000; 5     border-collapse: collapse; 6 } 7 td { 8     border-right: 1px solid #000; 9     border-bottom: 1px solid #000;10 }

（方法二）CSS：

1 table {2     width: 200px;3     border-collapse: collapse;4 }5 td {6     border: 1px solid #000;7 }

效果如下：

（2）列和行的高亮

在复杂的多行多列的表格中，鼠标停留的行或列高亮能够带来更优的体验，下面讲讲这方面的应用。

1、行的高亮

行的高亮实现比较简单，可以使用 css 的 :hover 伪类实现，即 tr：hover 即可实现，后面的表格例子会出现。

2、列的高亮

列的高亮用 css 似乎没有什么实现的方法，故还是用 JavaScript 实现。

<1>原生 JavaScript

原生 JavaScript 实现比较麻烦， A Complete Guide to the Table Element 文章介绍了一种原生 js 代码的写法。不过代码的兼容性不是很好，IE10 以下的版本就无法支持了（替换 addClass() 和 removeClass() 方法后在 IE9 下也可以用）。下面是我自己写的原生 JavaScript 实现方法，不过也只能支持 IE9+，IE8 及以下的 IE 浏览器要加兼容性代码：

JavaScript：

 1 //#table可以是table的id，也可以是tbody的id 2 var element = document.getElementById("table"); 3 var row_col = element.rows; 4 window.onload = function() { 5     for (var i = 0; i < row_col.length; i++) { 6         var cell_col = row_col[i].cells; 7         for (var j = 0; j < cell_col.length; j++) { 8             cell_col[j].addEventListener('mouseover', function() { 9                 cellIndex(this, true);10             }, false);11             cell_col[j].addEventListener('mouseout', function() {12                 cellIndex(this, false);13             }, false);14         }15     }16 }17 function cellIndex(element, bool) {18     for (var i = 0; i < row_col.length; i++) {19         var cell_col = row_col[i].cells;20         for (var j = 0; j < cell_col.length; j++) {21             if (element == cell_col[j]) {22                 highLight(j, bool);23             }24         }25     }26 }27 function highLight(index, bool) {28     for (var i = 0; i < row_col.length; i++) {29         var cell_col = row_col[i].cells;30         if (bool) {31             //列高亮，#eee为高亮颜色32             cell_col[index].style.backgroundColor = "#eee";33         } else {34             //移除列高亮，#fff为原来颜色35             cell_col[index].style.backgroundColor = "#fff";36         }37     }38 }

<2>引用Jquery

使用 Jquery 框架实现方便很多，而且能够兼容 IE5.5+。好久没写 Jquery，选择器不是很熟，所以参考了一下 html5及css3对table表格高亮当前行列的多浏览器兼容写法中的代码，其中 high_light css 类中定义高亮的颜色：

 1 $(document).ready( 2     function() { 3         $('table td').hover( 4             function() { 5                 //获取鼠标所在的 td 在所在行中的 index  6                 var td_index = $(this).parent().children('td').index($(this)[0]); 7                 $("table tr:not(:has(th))").each(  8                     function(i){  9                         $(this).children("td").eq(td_index).addClass('high_light'); 10                     } 11                 ); 12             },13             function() {14                 var td_index = $(this).parent().children('td').index($(this)[0]); 15                 $("table tr:not(:has(th))").each( 16                     function(i){17                         $(this).children("td").eq(td_index).removeClass('high_light');18                     } 19                 ); 20             }21         );22     }23 );

四、清爽简约的表格

下面给出一些简约的实用的表格样式，留作备用。

（1）不带竖线的表格

HTML：

 1  2      3          4              5              6              7          8      9     10         11             12             13             14         15         16             17             18             19         20         21             22             23             24         25     26 title title title
the First Row
Second - Row
the third Row

title	title	title
the	First	Row
Second	-	Row
the	third	Row

CSS：

 1 table { 2     width: 300px; 3     line-height: 2em; 4     font-family: Arial; 5     border-collapse: collapse; 6 } 7 thead tr { 8     color: #ae1212; 9     border-bottom: 2px solid #980000;10 }11 tbody tr {12     color: #bd3030;13     font-size: 0.8em;14     border-bottom: 1px solid #ffaeae;15 }16 th {17     font-weight: normal;18     text-align: left;19 }20 th,td {21     padding: 0 10px;22 }

效果如下：

（2）不带横线的表格

HTML：

< 沿用例 1）的 HTML >

CSS：

 1 table { 2     width: 300px; 3     line-height: 2em; 4     font-family: Arial; 5     text-align: center; 6     border-collapse: collapse; 7     border-top: 2px solid #980000; 8     border-bottom: 2px solid #980000; 9 }10 thead tr {11     color: #ae1212;12 }13 tbody tr {14     color: #bd3030;15     font-size: 0.8em;16 }17 th {18     font-weight: normal;19 }20 th,td {21     border-left: 1px solid #ffaeae;22     border-right: 1px solid #ffaeae;23 }

效果如下：

（3）带背景表格

1、HTML：

< 沿用例 1）的 HTML >

CSS：

 1 table { 2     width: 300px; 3     line-height: 2em; 4     font-family: Arial; 5     border-collapse: collapse; 6 } 7 thead tr { 8     color: #902d2d; 9     background-color: #e09999;10     border-bottom: 1px solid #fff;11 }12 tbody tr {13     color: #ac5959;14     font-size: 0.8em;15     border-bottom: 1px solid #fff;16     background-color: #ffe7e7;17 }18 tbody tr:hover {19     background-color: #ffd4d4;20 }21 th {22     font-weight: normal;23     text-align: left;24 }25 th,td {26     padding: 0 10px;27 }

效果如下：

2、HTML：

< 沿用例 1）的 HTML >

CSS：

 1 table { 2     width: 300px; 3     line-height: 2em; 4     font-family: Arial; 5     border-collapse: collapse; 6 } 7 th,td { 8     padding: 0 10px; 9 }10 th {11     color: #a03f3f;12     font-weight: normal;13     text-align: left;14     background-color: #f2caca;15     border: 1px solid #fff;16 }17 td{18     color: #c48080;19     font-size: 0.8em;20     background-color: #fff3f3;21     border-top: 1px solid #ffdede;22     border-left: 1px solid #ffdede;23 }24 tbody tr:hover th{25     background-color: #ffdede;26     border-right:1px solid #ffdede;27     color:#9a4242;28 }29 tbody tr:hover td{30     background-color: #ffdede;31     border-left:1px solid #ffdede;32     border-top: 1px solid #ffdede;33     color:#9a4242;34 }

效果如下：

3、HTML：

 1  2     3         4         5         6         7      8      9         10             11             12             13             14         15     16     17         18             19             20             21             22         23         24             25             26             27             28         29         30             31             32             33             34         35     36      title title title title
the the the the
first - third fourth
Row Row Row Row

title	title	title	title
the	the	the	the
first	-	third	fourth
Row	Row	Row	Row

CSS：

 1 table { 2     width: 300px; 3     line-height: 2em; 4     font-family: Arial; 5     border-collapse: collapse; 6     text-align: center; 7 } 8 th,td { 9     padding: 0 10px;10 }11 th {12     color: #a03f3f;13     font-weight: normal;14 }15 td{16     color: #c48080;17     font-size: 0.8em;18 }19 thead th{20     background-color: #fbdcdc;21 }22 .odd{23     background-color: #fff3f3;24 }25 .even{26     border-left:1px solid #fff;27     border-right:1px solid #fff;28     background-color: #ffe9e9;29 }30 .even_th{31     background-color: #eec4c4; 32 }

效果如下：

4、适用于表现简单后台数据的表格

HTML：

 1  2      3          4          5          6          7      8      9         10         11         12         13     14     15         16         17         18         19     20 the the the the
first - third fourth
Row Row Row Row

CSS：

 1 table { 2     width: 300px; 3     line-height: 2em; 4     font-family: Arial; 5     border-width: 1px; 6     border-style: solid; 7     border-color: #eec4c4 #eec4c4 #fff #fff; 8     text-shadow: 0 1px 0 #FFF; 9     border-collapse: separate;10     border-spacing: 0;11     background-color: #ffe9e9;12 }13 th {14     color: #a03f3f;15     font-weight: normal;16     text-align: left;17 }18 td {19     color: #c48080;20     font-size: 0.8em;21 }22 th,td {23     padding: 0 10px;24     border-width: 1px;25     border-style: solid;26     border-color: #fff #fff #eec4c4 #eec4c4;27 }

效果如下：

这里也只是列举比较基本的表格实例，加圆角、背景图等等在不同情况下可以获得更好的视觉效果，以后如果有看到更好的例子会继续补充。表格在现在的使用中已不像以前那么广了，基本只有在表现数据的时候才会用到，所以我并没有太深入地去了解表格的表现原理，这里涉及的知识都比较基础，而且只是冰山一角，想要进一步了解的可以去看看 HTML 4.01 和 CSS 2.01关于 table 的文档（文末有附链接）。写这篇博文的时候也发现了其他一些有趣的关于表格的应用与拓展，比如响应式的表格、表格搜索、表格排序等等，再加进来博文就太长了（为自己太懒找个借口......），等有空的时候再来了解总结一下吧。

水平有限，错误欢迎指正。原创博文，转载请注明出处。

参考文档：

HTML4.01 . http://www.w3.org/TR/html401/struct/tables.html

CSS2.1 . Tables

参考文章：

R. Christie . Top 10 CSS Table Designs

W3Cfuns . 参透Html表格

Chris Coyier . A Complete Guide to the Table Element（译文：白牙 . 表格元素的完全指南）

漫游 . html5及css3对table表格高亮当前行列的多浏览器兼容写法

无双 . 你真的了解word-wrap和word-break的区别吗？

内容总结

以上是互联网集市为您收集整理的HTML表格基础详解_html/css_WEB-ITnose全部内容，希望文章能够帮你解决HTML表格基础详解_html/css_WEB-ITnose所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/401443.html

来源：【匿名】

【上一篇】htmlform一点基础知识，实现文件上传_html/css_WEB-ITnose 【下一篇】PHP 和 HTML

更多 ►

【HTML表格基础详解_html/css_WEB-ITnose】教程文章相关的互联网学习教程文章

AJAX基础（三）——DOM基础及DOM操纵HTML【代码】

DOM的概念 DOM= Document Object Model，文档对象模型，DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一个HTML或XML文档的常用方法。有一点 DOM很重要，DOM的设计是以对象管理组织（OMG）的规约为基础的，因此可以用于任何编程语言。最初人们把它认为是一种让JavaScript在浏览器间可移植的方法，不过DOM的应用已经远远超出这个范围。Dom技术使得用户页面可以动态地变化，如可...

HTML5基础

1.HTML是什么?HTML是用来描述网页的一种语言,它是一种超文本标记语言,也就是说,HTML不是一种编程语言,仅是一种标记语言.2.HTML特点简易性：超级文本标记语言版本升级采用超级方式，从而更加灵活方便。可拓展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。平台无关性：虽然PC大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛...

HTML零基础入门视频课程——笔记【代码】

视频课程链接：http://edu.51cto.com/course/16023.htmlHTML，主讲：汤小洋一、HTML简介1. HTML是什么? HTML：Hyper Text Markup Language超文本标签(标记)语言? 由各种标签组成，用来制作网页，告诉浏览器该如何显示页面2. 作用制作网页，控制网页和内容的显示插入图片、音乐、视频、动画等多媒体通过链接检索信息使用表单获取用户信息，实现交互3. 版本? W3C：World Wide Web Consortium [k?n?s?:ti?m]万维网联盟，制定Web...

HTML语言基础应用【图】

Html文档可以包含的内容：文本：HTML对文本的支持是最丰富的，你可以设置不同级别的标题，分段和换行，可以指定文本的语义和外观，可以说明文本是引用自其它的地方，等等等等。链接链接用来指出内容与另一个页面或当前页面某个地方有关。图片图片用于使页面更加美观，或提供更多的信息。列表列表用于说明一系列条目是彼此相关的。表格表格是按行与列将数据组织在一起的形式。也有不少人使用表格进行页面布局。表单表单通常由文本输...

HTML基础做出属于自己的完美网页【代码】【图】

HTML HTML解释：HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，他是一种制作万维网页面标准语言（标记）。相当于定义统一的规则（W3C），大家都来遵守他，这样就可以让浏览器根据标记语言的规则去解释它。浏览器负责将标签翻译成用户“看得懂”的格式，呈现给用户！网页的组成：一个网页一般由两部分组成即：HTML（Hypertext Markup Language）和CSS（Cascade Style Sheets）HTML负责描述网页的结构和内容（如标题...

HTML基础 pre 显示预排版的代码【代码】【图】

OS : Windows 10browser : Chrome 83.0.4103.116editor : Visual Studio Code 1.46.1 typesetting : Markdown html<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head><body><pre><html></html></pre> </body></html> resultresource[ 教程 ] www.w3school.com.cn/html/index.asp[ 手册 ] www.w3cscho...

html基础【代码】

HTML通过各种标签进行定义，最简单的HTML文档：<html> <head><title>简单的HTML</title> </head> <body><p>title 元素的内容会显示在浏览器的标题栏中。</p><p>body 元素的内容会显示在网页中。</p> </body> </html>　　基本HTML页面以<html>标签开始，以</html>结束。在它们之间，整个页面有两部分－－头部和正文。　　头部－－夹在<head>和</head>标签之间－－<head>定义文档的头部，是所有头部元素的容器。可以引用脚本、指示浏...

XHTML基础

XHTML文档由元素组成，元素定义了文本和图形在浏览器中显示的方式，告诉web浏览器如何显示页面。XHTML 元素使用XHTML标记定义，每个标记都出现在一对尖括号中，标记通常成对出现，第一个标记定义了标记的起点，称为开始标记第二个标记定义了标记的结尾称为结束标记。在开始标记和结束标记之间的为别把称为元素内容。标记具有属性，属性提供了关于页面上的XHTML元素的附加信息。XHTML文档的总体结构由<html>/<head><body>这三个文档...

通达OA 小飞鱼工作流在线培训教程（一）HTML基础介绍【图】

应一些刚接触工作流设计朋友的要求，这里开设一个系列教程，对通达OA工作流设计相关的内容做个介绍。方便解决一些日常经常出现的问题，希望对刚刚接触这部分工作的朋友能够有些帮助。工作流设计须要多方面的知识，当中的HTML是最基础的部分，这里先通过大概4小节的课程将HTML部分介绍一下。对于刚接触网页html语言的朋友能够实际操练一下。寻经常常使用的编辑工具能够使用Dreamweaver。记事本或者Editplus、UltraEdit，对于刚開始学...

HTML&CSS基础学习笔记1.6-html的文本操作标签【图】

文本也许是HTML里最常见的元素了，所以我们有必要对HTML的文本操作标签做下认识。1. <em>，<i>内的文字呈现为倾斜效果；2. <strong>，<b>内的文字呈现为加粗效果；3. <b>，<i>只是单纯的为了让文本具有某种特殊样式，而<strong>，<em>不仅带有特殊样式，而且也表达了某种语义；4. 在单纯的为了达到某种样式的情况下，建议使用不带有语义的标签。体验如下：http://www.mayacoder.com/lesson/lesson?lesson_id=28&knowledge_id=5原文...

Reboot运维开发html基础-06

零基础HTML5游戏制作教程第6章贪吃蛇的实现及代码【代码】【图】

第6章贪吃蛇的实现及代码讲了不少东西了，老讲理论的东西没劲呀，我们不如先试着做一个小游戏吧。作为我们的第一个游戏，当然是越简单越好。《贪吃蛇》大家应该都玩过吧？我觉得我玩过的游戏中，她应该算是最简单的一个了。好，就让我们从做《贪吃蛇》开始，享受自己做游戏的乐趣吧。由于这个游戏是本教程的第一个实际的游戏例子，我会讲的比较详细一些。请大家重点注意编程的思路和实现的方法，这些远比代码本身要重要。一，蛇身...

HTML基础 select selected 下拉列表的默认值【代码】【图】

OS : Windows 10browser : Chrome 83.0.4103.116editor : Visual Studio Code 1.46.1 typesetting : Markdown html<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head><body><form><select name="道家经典"><option value="道德经">道德经</option><option value="清静经" selecte...

web基础，用html元素制作web页面【代码】【图】

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Mis问答平台</title></head><body><h1>mis问答系统</h1><h2>2015</h2><div id="container" style="width: 300px"><div id="header" style="background-color: darkorange"><h2 align="center">登陆界面</h2></div><div id="content"><form> 用户名：<input type="text" placeholder="请输入账号"><br>密码&nbsp：<input type="password" placeholder="请输入密...

html基础

HTML 简介 HTML 是用来描述网页的一种语言。HTML 指的是超文本标记语言 (Hyper Text Markup Language)HTML 不是一种编程语言，而是一种标记语言 (markup language)标记语言是一套标记标签 (markup tag)HTML 使用标记标签来描述网页HTML 标签HTML 标记标签通常被称为 HTML 标签 (HTML tag)。HTML 标签是由尖括号包围的关键词，比如 <html>HTML 标签通常是成对出现的，比如 <b> 和 </b>标签对中的第一个标签是开始标签，第二个标签是...

HTML - 技术教程分类

HTML 教程 HTML 简介 HTML 编辑器 HTML 基础 HTML 元素 HTML 属性 HTML 标题 HTML 段落 HTML 文本格式化 HTML 链接 HTML 头部 HTML CSS HTML 图像 HTML 表格 HTML 列表 HTML 区块 HTML 布局 HTML 表单 HTML 框架 HTML 颜色 HTML 颜色名 HTML 颜色值 HTML 脚本 HTML 字符实体 HTML URL HTML 速查列表 HTML 总结 XHTML 简介 HTML 媒体(Media) HTML 插件 HTML 实例 HTML 标签列表（功能排序） HTML 属性 HTML 事件 HTML 画布 HTML 音频/视频 HTML 颜色名 HTML 字符集 HTML ASCII HTML ISO-8859-1 HTML 符号 HTML 语言代码 html 全部

HTML - 最热教程

html5代码如何实现进度条功能？（示例）javascript中html字符串转化为jquerydo...HTML5实战与剖析之CSS选择器——getEle...html5中设置或返回音频/视频是否应该被...HTML5获取设备信息 jQuery打印指定区域Html页面并自动分页...jQuery+HTML5+CSS3制作支持响应式布局时...JS+HTML5实现上传图片预览效果完整实例...php删除html标签和标签内的内容的方法总...XMLHttpRequest中responseText如何获取...

首页 / HTML / HTML表格基础详解_html/css_WEB-ITnose

HTML表格基础详解_html/css_WEB-ITnose

内容导读

内容图文

内容总结

内容备注

内容手机端

【HTML表格基础详解_html/css_WEB-ITnose】教程文章相关的互联网学习教程文章

AJAX基础（三）——DOM基础及DOM操纵HTML【代码】

HTML5基础

HTML零基础入门视频课程——笔记【代码】

HTML语言基础应用【图】

HTML基础做出属于自己的完美网页【代码】【图】

HTML基础 pre 显示预排版的代码【代码】【图】

html基础【代码】

XHTML基础

通达OA 小飞鱼工作流在线培训教程（一）HTML基础介绍【图】

HTML&CSS基础学习笔记1.6-html的文本操作标签【图】

Reboot运维开发html基础-06

零基础HTML5游戏制作教程第6章贪吃蛇的实现及代码【代码】【图】

HTML基础 select selected 下拉列表的默认值【代码】【图】

web基础，用html元素制作web页面【代码】【图】

html基础

HTML - 相关标签

CSS - 相关标签

WEB - 相关标签

HTML - 技术教程分类

HTML - 最新教程

HTML - 最热教程