Html5学习-JQuery mobile--table学习使用

9、表格

9.1 表格模板

<div data-role="content">

<div class="<grid-css-attribute>">

<div class="<block-css-attribute>">Block A</div>

<div class="<block-css-attribute>">Block B</div>

</div>

</div>

(1)表格容器

列的数量	表格CSS属性
2	ui-grid-a
3	ui-grid-b
4	ui-grid-c
5	ui-grid-d

(2）块

第X列	块CSS属性
1	ui-block-a
2	ui-block-b
3	ui-block-c
4	ui-block-d
5	ui-block-e

9.2举例：

9.2.1两列表格

<div data-role="content" >

<div class="ui-grid-a">

<div class="ui-block-a"><strong>Block A</strong><br>The text will wrap within the grid.</div>

<div class="ui-block-b"><strong>Block B</strong><br>More text.</div>

</div>

</div>

9.2.2 三列表格

添加style

<div data-role="content">

<div class="ui-grid-b"> 

<div class="ui-block-a">

<div class="ui-bar ui-bar-e" style="height:100px;">Block A</div>

</div>

<div class="ui-block-b">

<div class="ui-bar ui-bar-e" style="height:100px;">Block B</div>

</div>

<div class="ui-block-c">

<div class="ui-bar ui-bar-e" style="height:100px;">Block C</div>

</div>

</div>

</div>

9.2.3四列表格

带图标

<div data-role="content">

<div class="ui-grid-c" style="text-align: center;"> 

<div class="ui-block-a">

<img src="../images/cloud-default.png" height="57" width="57">

</div>

<div class="ui-block-b">

<img src="../images/cloud-bright.png" height="57" width="57">

</div>

<div class="ui-block-c">

<img src="../images/cloud-ripple.png" height="57" width="57">

</div>

<div class="ui-block-d">

<img src="../images/cloud-sparkle.png" height="57" width="57">

</div>

</div>

</div>

9.3不规则表格

<style>

/* Set 2-column grid to 25/75% */

.ui-grid-a .ui-block-a {

    width: 25%;

}

.ui-grid-a .ui-block-b {

    width: 75%;

}

/* Set 3-column grid to 25/50/25% */

.ui-grid-b .ui-block-a {

    width: 25%;

}

.ui-grid-b .ui-block-b {

    width: 50%;

}

.ui-grid-b .ui-block-c {

    width: 25%;

}

</style>

<div data-role="content" >

<div class="ui-grid-a"> 

<div class="ui-block-a">

<div class="ui-bar ui-bar-e" style="text-align:center; height:100px;">25%</div>

</div>

<div class="ui-block-b">

<div class="ui-bar ui-bar-e" style="text-align:center; height:100px;">75%</div>

</div>

</div>

<div class="ui-grid-b"> 

<div class="ui-block-a">

<div class="ui-bar ui-bar-e" style="text-align:center; height:100px;">25%</div>

</div>

<div class="ui-block-b">

<div class="ui-bar ui-bar-e" style="text-align:center; height:100px;">50%</div>

</div>

<div class="ui-block-c">

<div class="ui-bar ui-bar-e" style="text-align:center; height:100px;">25%</div>

</div>

</div>

</div>