|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
每一款手机有不同的分辨率,不同屏幕大小,如何使我们开发出来的应用或页面大小能适合各种高端手机使用呢?学习html5viewport的使用能帮你做到这一点……网页制造poluoluo文章简介:从头发明HTML表格.
依据我比来的一些理论和在和一些读者举行关于HTML表格的利用成绩相同以后,决意写这篇文章。总的来讲,我注重到因为误导性信息,他们关于table的利用有种先进为主的讨厌。现实上良多人会说”我看到永久不该该利用表格”的说法,可是这相对是毛病的!这个倡议只是针对利用HTML表格来界说网页的结构,可是表格在便利的分列数据信息行和列方面十分完善,并且假如你必定要在一个页面上显现表列数据,你就不能不利用它们!为何不呢?但是,在这类情形下,一些人忽视了用于table的某些HTML标签的存在而且不晓得该怎样准确的利用它们。
HTML有10个表格相干标签。上面是一个带有简介的列表,可是起首,文档要被准确的界说在HTML4.01/XHTML1或HTML5上面:
- <caption>界说表格题目(4,5)
- <col>为表格的列界说属性(4,5)
- <colgroup>界说表格列的分组(4,5)
- <table>界说表格(4,5)
- <tbody>界说表格主体(4,5)
- <td>界说一个单位格(4,5)
- <tfoot>界说表格的表注(底部)(4,5)
- <th>界说表格的表头(4,5)
- <thead>界说表格的表头(4,5)
- <tr>界说表格的行(4,5)
一个基础的表格布局以下:
它包括一个题目、头部、主体和底部。准确的HTML元素按次是:
- <table>
- <caption>
- <thead>
- <tfoot>
- <tbody>
你也能够利用<col>和<colgroup>来界说表格的列或为列分组:
- <table>
- <caption>
- <colgroup>
- <col>
- <thead>
- <tfoot>
- <tbody>
上面是一个准确的表格布局实例:- <tableborder="1"><caption>Tablecaptionhere</caption><colgroupspan="1"style="background:#DEDEDE;"/><colgroupspan="2"style="background:#EFEFEF;"/><!--TableHeader--><thead><tr><th>Head1</th><th>Head2</th><th>Head3</th></tr></thead><!--TableFooter--><tfoot><tr><td>Foot1</td><td>Foot2</td><td>Foot3</td></tr></tfoot><!--TableBody--><tbody><tr><td>A</td><td>B</td><td>C</td></tr><tr><td>D</td><td>E</td><td>F</td></tr></tbody></table>
复制代码 在扫瞄器中的了局以下图所示:
关于表格的一些技能
- 依据w3schools的注释和用法,在一个table界说中,<tfoot>元素必需呈现在<tbody>之前,如许,扫瞄器就能够在承受到一切数据之前出现表注了。别的,假如不是这个按次,将不克不及经由过程W3C的HTML4和XHTML考证,不管你声明哪一种DTD。
- 在HTML4.01中,表格的align和bgcolor属性不同意利用,以是在HTML5中不再有任何table的属性被撑持(现实上,在XHTML1.0StrictDTD中已不撑持”align”和”bgcolor”属性了);
- 一切支流扫瞄器都撑持<colgroup>标签,可是Firefox、Chrome和Safari仅撑持colgroup元素的span和width属性;
- CSS中的empty-cells:show|hide能够设定空单位格是不是显现边框。注重,这个必要设置在table而不是td/th中。IE6中对照简单碰到该成绩;
- css中的border-collapse:collapse|separate能够设置表格的边框是不是被兼并成一个边框;
- css中的border-spacing属性等效于table的cellspacing属性。
为了完成如今所倡始的体现和布局分别的开辟形式,前端察看倡议将页面中一切与体现层有关的东东,都用CSS来把持,不必HTML自带的属性来把持页面的体现,而table是最简单被疏忽的一个。
关于table的更多具体内容能够检察W3C的文档:w3Introductiontotables
最初留一个十分复杂的成绩给人人,CSS的哪一个属性等效于table的cellpadding属性?
</p>
最近群里面很多人在问html5应该怎么学,这个问题其实没有标准答案。我开这个帖子,目的是为了收集大家每天的学习心得,欢迎大家来回复。 |
|