浅析Table 和 div 的简介及用法
<p> Web前端1</p><p>
<table>
<tbody>
<tr>
<td>
<p>学号</p>
</td>
<td>
<p>姓名</p>
</td>
<td>
<p>性别</p>
</td>
<td>
<p>年龄</p>
</td>
</tr>
<tr>
<td>
<p>01</p>
</td>
<td>
<p>张三</p>
</td>
<td>
<p>男</p>
</td>
<td>
<p>20</p>
</td>
</tr>
<tr>
<td>
<p>02</p>
</td>
<td>
<p>李四</p>
</td>
<td>
<p>女</p>
</td>
<td>
<p>21</p>
</td>
</tr>
<tr>
<td colspan="3">
<p>人数合计</p>
</td>
<td>
<p>60</p>
</td>
</tr>
</tbody>
</table>
</p>
<p><span style="color: #ff0000"><strong>表格的组成部分：</strong></span></p>
<p> 标题 表头 主体 表尾</p>
<p>Table 定义一个表格</p>
<div class="jb51code">
<pre class="brush:xhtml;">
<table border="1" cellspacing="0" cellpadding="0" align="center">
</table></pre>
</div>
<p>Caption 定义表格的标题</p>
<div class="jb51code">
<pre class="brush:xhtml;">
<caption>web前/caption>端1<</pre>
</div>
<p>Thead 定义表头的部分</p>
<div class="jb51code">
<pre class="brush:xhtml;">
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead></pre>
</div>
<p>Tbody 定义表格的主体</p>
<div class="jb51code">
<pre class="brush:xhtml;">
<tbody>
<tr>
<td>01</td>
<td>张三</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<td>02</td>
<td>李四</td>
<td>女</td>
<td>21</td>
</tr>
<tfoot>
<tr>
<td colspan="3">人数合计:</td>
<td>60</td>
</tr>
</tfoot>
</tbody></pre>
</div>
<p>Tfoot 定义表尾，一般来显示汇总信息</p>
<div class="jb51code">
<pre class="brush:xhtml;">
<tfoot>
<tr>
<td colspan="3">人数合计:</td>
<td>60</td>
</tr>
</tfoot></pre>
</div>
<p>Tr 定义一行</p>
<div class="jb51code">
<pre class="brush:xhtml;">
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr></pre>
</div>
<p>Th td 定义数据项（单元格） th 一般用于表头，有加粗的样式</p>
<p> Td 一般用于主体部分，没有加粗样式</p>
<div class="jb51code">
<pre class="brush:xhtml;">
<tr>
<td>01</td>
<td>张三</td>
<td>男</td>
<td>20</td>
</tr></pre>
</div>
<p>Td rowspan 和 colspan 分别定义单元格跨行的行数，跨列的列数</p>
<div class="jb51code">
<pre class="brush:xhtml;">
<td colspan="3">人数合计:</td></pre>
</div>
<p>Cellspacing 定义表格的间距</p>
<p>Cellpadding 定义表格的边距</p>
<div class="jb51code">
<pre class="brush:xhtml;">
<table border="1" cellspacing="0" cellpadding="10"></pre>
</div>
<p>Div 定义一个分块 （division）</p>
<div class="jb51code">
<pre class="brush:xhtml;">
<div style="width: 200px;height: 200px;background-color:skyblue";></pre>
</div>
<p>特点：在新的一行显示 块级标签</p>
<p><span style="color: #ff0000"><strong>块级标签 与 行内标签的区别：</strong></span></p>
<p>块级标签占满行 行内标签会按照顺序从左到右依次排列</p>
<p>块级标签：h1-h6 p ul ol li div table dl form</p>
<p>行内标签：span a br lable I em</p>
<p>块级元素的特点：display:block</p>
<ul>
<li>每个块都是从新的一行开始，后面的元素会另起一行</li>
<li>元素的宽度、高度、行高、内外边距都是可设置的</li>
<li>如果不设置元素的宽度，是他父容器的100%，除非你给他设定高度</li>
</ul>
<p>行内元素的特点：display：inline</p>
<ul>
<li>和其他的元素都在一行上</li>
<li>不能设置元素的宽度，高度，行高，内外边距</li>
<li>元素的宽度是他包含文字或图片的宽度，不能改变</li>
</ul>
<p>行内块元素的特点：display：inline-block</p>
<ul>
<li>和其他的元素都在一行上</li>
<li>宽度，高度，行高，内外边距都可以设置的</li>
</ul>
<p><span style="color: #ff0000"><strong>总结</strong></span></p>
頁:
[1]