WEB前端之网页设计③----最新最全详解/如何在网页上创建表格

WEB前端之网页设计③—-最新最全详解/如何在网页上创建表格

一、表格效果图1：

<table border="0px" cellspacing="1px" width="500px" height="200px"  cellpadding="0px" align="center" bgcolor="red" >
    <caption align="top">学生基本信息</caption>
       <tr  bgcolor="white">
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>兴趣</th>
        <th>爱好</th>     
      </tr>
      <tr  align="center" bgcolor="white">
        <td>骆腾飞</td>
        <td align="left" >18</td>
        <td>男</td>
        <td>美女</td>
        <td>画画</td>     
      </tr>
      <tr  align="center"  bgcolor="white">
        <td>李高璐</td>
        <td>19</td>
        <td>男</td>
        <td>玩电脑</td>
        <td>篮球</td>     
      </tr>
    </table>

表格效果图二：

图二代码：

<table border="1px" cellspacing="0px" width="500px" height="200px" bordercolor="red" cellpadding="0px" align="center" >
    <caption align="top">学生基本信息</caption>
       <tr >
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th colspan="2">兴趣爱好</th>   
      </tr>
      <tr  align="center" bgcolor="">
        <td>骆腾飞</td>
        <td align="left" >18</td>
        <td rowspan="2">男</td>
        <td bgcolor="#fafad2">美女</td>
        <td>画画</td>     
      </tr>
      <tr  align="center">
        <td>李高璐</td>
        <td>19</td>

        <td>玩电脑</td>
        <td>篮球</td>     
      </tr>
    </table>

二、table标签及属性详解:

tabel标签	解释
<table></table>	table标签是要告诉浏览器我要在这个地方写表格
属性	解释
border=“”	border表示表格的边框线厚度填像素单位px
cellspacing=“”	cellspacing表示单元格和单元格之间距离
cellpadding=“”	cellpadding单元格边框和字体的距离
with=“”	with表示表格的整体宽度单位px
height=“”	height表示表格的整体高度单位px
bgcolor=“”	bgcolor表示表格的背景颜色

三、caption标签及属性详解:

caption标签	解释
<caption></caption>	caption中填表格的标题，默认居中加粗，且必须紧跟table标签之后。

四、tr标签及属性详解:

tr标签	解释
<tr></tr>	tr标签定义HTML表格的行，
属性	解释
align=”center/lift/right”	规定表格内文本的对齐方式：居中/左对齐/右对齐
bgcolor=“”	bgcolor规定表格行的背景颜色。
charoff=“number”	规定第一个字符的偏移量
valign=“top/bottom”	规定表格行中内容的垂直对齐方式，上对齐/底部对齐

五、th标签及属性详解:

th标签	解释
<th></th>	表格的表头标签，通常默认加粗居中。
属性	解释
align=”center/lift/right”	表格中的文本居中/左对齐/右对齐
colspan	表示单元格横跨的列数
rowspan	表示单元格跨越的行数

六、td标签及属性详解:

td标签	解释
<td></td>	表格中标准的单元格标签。
属性	解释
align=”center/lift/right”	表格中的文本居中/左对齐/右对齐
colspan	表示单元格横跨的列数
rowspan	表示单元格跨越的行数

结语：差不多就是这些标签了有了这些就可以做一个网页版的宿舍成员统计表了哦；后期的话还会慢慢跟新的，先分享这么多。
上一篇：WEB前端之网页设计②—-最新最全详解/网页常用标签
下一篇：WEB前端之网页设计④—-最新最全详解/网页中的表单
版权声明：非商用自由转载-保持署名-注明出处
署名(TM): TopGradeModel