第二周初学表格

来源：互联网发布：沪江背单词软件编辑：程序博客网时间：2024/06/14 10:32
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title></head><body><!--<table></table>--><!--<tr></tr>表示一行--><!--<td></td>某一行一个单元个的内容--><!--1.border给表格添加边框--><!--当border属性增大时，只有外围框增加，单元格的边框始终为一px--><!--2.bordercolor="bule"边框颜色3.width="400"height="200" 表格宽高4.cellspacing="5"单元格之间的间距，cellspacing="0"只会时单元格间隙为0，不会合并边框线表格边框合并style="border-collapse: collapse"无需写cellspacing="0"5.cellpadding="10px"文本与边框的距离6.align:表格在屏幕的左右中位置 left center right注意：给表格添加align属性时，相当于让表格浮动会直接打破表格后面的元素的排列方式7.bgcolor="yellow"背景色CSS3的效果实现style=“backg-color：”8. background="../../img/diannao.jpg"背景图片，与背景色冲突时只显示图片规范的写法还是用CSS3在style中写background: url('')因为外面的style的用了双引号，所以路径只能用单引号--><!--与tr和 td相关的属性1.wight和hight单元格宽高2.bgcolor单元格背景色3.style="text-align::left center right单元格中的文字，水平对齐方式4.style="text-valign:top,center,right单元格中的文字，垂直对齐方式5.nowrap="nowrap"单元格中文字不换行6.跨行跨列7.caption表格头    注意：1、当表格属性与行属性冲突时，以行属性为准（就近原则）    2.表格的align属性是控制自身自身在浏览器显示的位置；    行和列的属性时控制单元格的文字在单元格的对齐方式    3.表格的align，并不影响表格内文字对齐方式    valign:行和列的属性时控制单元格的文字在单元格的对齐方式    --><!--语义化标签，代码优化thead包裹表格标题头tbody包裹内容tfoot--包裹脚部--><table border="10" bordercolor="red"width="400"height="200"       style="border-collapse: collapse;cellpadding:10px;background: url('../../img/diannao.jpg')"       align="center"bgcolor="yellow"       background="../../img/diannao.jpg">    <tr>        <td width="100" height="50">手机充值</td>        <td bgcolor="#5f9ea0">IP卡</td>        <td>网游</td>    </tr>    <tr bgcolor="aqua" >        <td>移动</td>        <td>联通</td>        <td>电信</td>    </tr></table><hr/><table>    <tr>        <th>学号</th>        <th>姓名</th>        <th>数学成绩</th>        <th>语文成绩</th>        <th>英语成绩</th>    </tr>    <tr>        <td>14061201</td>        <td>张三</td>        <td>12</td>        <td>13</td>        <td>15</td>    </tr>    <tr>        <td>14061202</td>        <td>李四</td>        <td>56</td>        <td>56</td>        <td>88</td>    </tr>    <tr>        <td>14061203</td>        <td>王二</td>        <td>89</td>        <td>90</td>        <td>89</td>    </tr></table><hr/><table border="1">    <tr>        <td>一行一列</td>        <td colspan="3">跨三行</td>    </tr>    <tr>        <td rowspan="3">跨三列</td>        <td>二行二列</td>        <td>二行三列</td>        <td>二行四列</td>    </tr>    <tr>        <td>三行二列</td>        <td>三行三列</td>        <td>三行四列</td>    </tr>    <tr>        <td>四行二列</td>        <td>四行三列</td>        <td>四行四列</td>    </tr></table><hr/><table border="1">    <tr>        <td colspan="4">weq</td>    </tr>    <tr>        <td>wewq</td>        <td>ewq</td>        <td>weq</td>        <td>weq</td>    </tr>    <tr>        <td>weq</td>        <td>weqw</td>        <td>wqewqe</td>        <td>weqw</td>    </tr>    <tr>        <td colspan="2">weqwewq</td>        <td colspan="2">wewqewe</td>    </tr>    <tr>        <td>weq</td>        <td>weqw</td>        <td>wqewqe</td>        <td>weqw</td>    </tr>    <tr>        <td>weq</td>        <td>weqw</td>        <td>wqewqe</td>        <td>weqw</td>    </tr>    <tr>        <td colspan="3">sdasdsa</td>        <td>wewqewqe</td>    </tr>    <tr>        <td>weq</td>        <td>weqw</td>        <td>wqewqe</td>        <td>weqw</td>    </tr>    <tr>        <td>weq</td>        <td>weqw</td>        <td>wqewqe</td>        <td>weqw</td>    </tr></table><hr/><table border="1">    <tr>        <td rowspan="2">sadsa</td>        <td>sdas</td>        <td>wsdsad</td>    </tr>    <tr>        <td>sdasd</td>        <td>sdasd</td>    </tr>    <tr>        <td rowspan="2">wwewe</td>        <td>wewewq</td>        <td>wewewq</td>    </tr>    <tr>        <td>wewewq</td>        <td>wewewq</td>    </tr></table><table border="5"style="border-color: #AA22FF">    <tr>        <td rowspan="6"width="100">23112</td>        <td rowspan="3"width="100">2</td>        <td rowspan="2"width="100">3</td>        <td width="100">3</td>    </tr>    <tr>        <td>2</td>    </tr>    <tr>        <td rowspan="2">2</td>        <td>2</td>    </tr>    <tr>        <td rowspan="3">2</td>        <td>2</td>    </tr>    <tr>        <td rowspan="2">2</td>        <td>2</td>    </tr>    <tr>        <td>2</td>    </tr>    <table border="1">        <tr>            <td colspan="2">wqe</td>        </tr>        <tr>            <td rowspan="4">weqw </td>            <td>weqwe</td>        </tr>        <tr>            <td>sadsd</td>        </tr>        <tr>            <td>dadas</td>        </tr>        <tr>            <td>wdad</td>        </tr>    </table></table><hr/><!--语义化标签--><table width="500" align="center">    <colgroup style="background-color: red;"> <!--前两列为一组-->        <col/> <!--第一列-->        <col/> <!--第二列-->    </colgroup>    <col style="background-color: blue;"/> <!--第三列-->    <caption>表格标题</caption>    <thead>    <tr>        <th>头1</th>        <th>头2</th>        <th>头3</th>    </tr>    </thead>    <tbody>    <tr>        <td>111</td>        <td>111</td>        <td>111</td>    </tr>    <tr>        <td>222</td>        <td>222</td>        <td>222</td>    </tr>    </tbody>    <tbody>    <tr>        <td>111</td>        <td>111</td>        <td>111</td>    </tr>    <tr>        <td>222</td>        <td>222</td>        <td>222</td>    </tr>    </tbody>    <tfoot>    <tr>        <td>尾1</td>        <td>尾2</td>        <td>尾3</td>    </tr>    </tfoot></table></body></html>
0 0