html中的table详解
一般表格,简便的HTML表格由table元素乃至tr、td和th元素组成,其中tr是指表格行,td是指单元格,th定义表头。空单元格就直接不填即可,或者用 。
<table> <tr> <th>表头</th> <th>表头</th> <th>表头</th> </tr> <tr> <td>单元格1 </td> <td></td> <td>单元格3</td> </tr> </table>
2.带有边框的表格。border元素表示表格的边框,默许单位是px,cellspcing表示表格与表格之间的间距,cellpadding表示内边距/内填充的间隔。
<table border="1" cellspacing="10" cellpadding="30"> <tr> <th>表头</th> <th>表头</th> <th>表头</th> </tr> <tr> <td>单元格1</td> <td>单元格2</td> <td>单元格3</td> </tr> </table>
3.带有背景图片或色彩的表格,留意:bgcolor表示色彩,而background不克不及直接在html里面增加色彩(这句话说错了,是使用的方式错误,直接使用内联样式书写的格局是style="background:red"或者是style="background-color:red"),在table中增加就是对整个表格设定,假如在独自的tr或者td中设定就是对独自的行或者单元格来停止设定。
<table border="1"> <tr> <th>表头</th> <th>表头</th> <th>表头</th> </tr> <tr> <td>单元格1</td> <td>单元格2</td> <td>单元格3</td> </tr> </table>
4、跨行和跨列的表格,rowspan表示跨行,colspan表示跨列,跨列的话就在当前表格行内删除,跨行的话就鄙人方的表格行内删除。
<table border="1"> <caption>跨行</caption> <tr> <th>姓名</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">电话</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table>
<table border="1"> <caption>跨列</caption> <tr> <th>姓名</th> <th colspan="2">电话</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table>
5.带有标题的表格,caption表示表格的标题,也可以用其他标签比方p标签来定位表格标题,但使用caption的好处是他会跟着表格一起走,默许是在和表格居中对齐。
6.在表格单元中摆列内容,比方在单元格中增加段落,列表等。
<table border="1"> <tr> <td> <p>这是一个段落,hello World!</p> </td> <td> <ul> <li>这是一个列表 <ul> <li>html</li> <li>css</li> <li>javascript</li> </ul> </li> </ul> </td> </tr> </table>
7.frame框架属性,规定外侧边框的哪个部分是可见的。//临时不会使用。
相关引荐:
HTML页面table滚动条的实现
ElTableColumn扩展办法详解
关于SQL ALTER TABLE 语句的相关操纵
以上就是html中的table详解的具体内容,更多请关注百分百源码网其它相关文章!