美文网首页
认识html------------表格标签的属性

认识html------------表格标签的属性

作者: 周行知 | 来源:发表于2019-04-18 17:52 被阅读0次

    表格标签的属性:

    1.宽度和高度的属性

    1)可以给table标签和td标签使用

    2)表格的宽度和高度默认是按照内容的尺寸(意思就是例如<tr>周行知</tr>中的周行知所占据的尺寸就是内容尺寸)来调整的,也可以通过table标签设置width/height属性的方式来手动来指定表格的宽度和高度。如下所示:

    示例一:编写一个两行两列的表格

    <html>

    <head>

    <meta charset="utf-8">

    <title>表格标签</title>

    </head>

    <body>

    <table border="1" width="500px" height="300px">

    <tr>

    <td>姓名</td>

    <td>年龄</td>

    </tr>

    <tr>

    <td>周行知</td>

    <td>29</td>

    </tr>

    </table>

    运行结果如图所示:

    我们现在给td标签设置width/height属性,看看会有什么变化

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>表格标签</title>

    </head>

    <body>

    <table border="1"  width="500px" height="300px">

    <tr>

    <td  width="150px" height="45px">姓名</td>

    <td>年龄</td>

    </tr>

    <tr>

    <td>周行知</td>

    <td>29</td>

    </tr>

    </table>

    </body>

    </html>

    运行结果如图所示:

    结论:虽然修改当前单元格的宽度和高度,但不会影响整个表格的宽度和高度变化。

    2.水平对齐和垂直对齐属性

    1)水平对齐可以给table标签和tr标签和td标签使用

    我们现在对比一下align是left,right,center的时候的效果:

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>表格标签</title>

    </head>

    <body>

    <table border="1"  width="500px" height="300px" align="left">

    <tr>

    <td  width="150px" height="45px">姓名</td>

    <td>年龄</td>

    </tr>

    <tr>

    <td>周行知</td>

    <td>29</td>

    </tr>

    </table>

    </body>

    </html>

    运行结果如图所示:

    align="center"的实例:

    align="right"

    结论:给table设置align属性,可以控制表格在水平方向的对齐方式。

    现在我们给tr设置align,会有什么结果?

    代码如下:

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>表格标签</title>

    </head>

    <body>

    <table border="1"  width="500px" height="300px" align="right">

    <tr align="center">

    <td  width="150px" height="45px" align="right">姓名</td>

    <td>年龄</td>

    </tr>

    <tr>

    <td>周行知</td>

    <td>29</td>

    </tr>

    </table>

    </body>

    </html>

    运行结果如下:

    结论:给tr标签设置align属性,可以控制当前行中所有单元格内容在水平方向的对齐方式

    现在我们给td设置align="right",会有什么结果?

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>表格标签</title>

    </head>

    <body>

    <table border="1"  width="500px" height="300px" align="left">

    <tr align="center">

    <td  width="150px" height="45px" align="right">姓名</td>

    <td>年龄</td>

    </tr>

    <tr>

    <td>周行知</td>

    <td>29</td>

    </tr>

    </table>

    </body>

    </html>

    运行结果如下:



    结论:td标签设置align属性,可以控制当前单元格中内容对齐的方式

              如果td中设置了align属性,tr中也设置了align属性,那么单元格中内容会按照td中设置的对齐。

    发散思维练习:给tr标签,td标签分别设置了valign等于top,bottom属性,观察会有什么效果?(结论:垂直标签只能给tr标签和td标签使用)

    3.外边距和内边距的属性

    外边距就是单元格与单元格之间的距离。

    就好比你的房子和你邻居的房子的隔开距离


    1)只能给table标签使用

    外边距的格式:

    cellspacing="0"

    代码如下:

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>表格标签</title>

    </head>

    <body>

    <table border="1"  width="500px" height="300px" align="left" cellspacing="0">

    <tr align="center">

    <td  width="150px" height="45px" align="right">姓名</td>

    <td>年龄</td>

    </tr>

    <tr>

    <td>周行知</td>

    <td>29</td>

    </tr>

    </table>

    </body>

    </html>

    运行结果如图所示:

    内边距:文字距离单元格的边框和文字之间的间隙。(cellpadding="17")

    有点像我们装在门店的广告牌

    代码如下:

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>表格标签</title>

    </head>

    <body>

    <table border="1"  width="500px" height="300px" align="left" cellspacing="0"cellpadding="17">

    <tr align="center">

    <td  width="150px" height="45px" align="right">姓名</td>

    <td>年龄</td>

    </tr>

    <tr>

    <td>周行知</td>

    <td>29</td>

    </tr>

    </table>

    </body>

    </html>

    运行结果如下:

    相关文章

      网友评论

          本文标题:认识html------------表格标签的属性

          本文链接:https://www.haomeiwen.com/subject/kcotgqtx.html