马黑黑 发表于 2021-11-20 17:38

table标签:入门

本帖最后由 马黑黑 于 2021-11-20 17:45 编辑

table标签用于定义HTML表格布局,它需要用到诸多元素才能构建一张完整的有行和单元格的表格,其中常用到的有 tr 和 td 两个元素,tr 定义表格的行,td 定义表格单元,偶尔还会用到 th 元素用以定义表头。

一张 1×1 的表格,最简单的代码样式如下所示:

<table>
    <tr>
      <td>
            表格内容放在此处,可以是文本,可以是图片,也可以是其他可视的网页内容
      </td>
    </tr>
</table>

从中我们看到:

① table 标签以 <table> 开始,以 </table> 结束;其下元素 tr 和 td 同样需要成对出现,有开始符和结束符。

② table 标签在第一层,tr 元素在第二层,td 元素在第三层,层次绝对不能弄乱!在代码中用缩进表示层次是个好习惯,但不是必须的,如果愿意我们甚至可以不缩进也不分行:

<table><tr><td>表格内容……</td></tr></table>

再给出一个 1×2 即一行两列的表格代码样式:

<table>
    <tr>
      <td>列一</td>
      <td>列二</td>
    </tr>
</table>

两行两列即 2×2 的表格代码则酱紫:

<table>
    <tr>
      <td>行一列一</td>
      <td>行一列二</td>
    </tr>
    <tr>
      <td>行二列一</td>
      <td>行二列二</td>
    </tr>
</table>

效果请查看楼下——

马黑黑 发表于 2021-11-20 17:38

本帖最后由 马黑黑 于 2021-11-20 17:43 编辑 <br /><br />1×1 表格样式<div>&nbsp; &nbsp;<table border="1" width="300">
    <tbody><tr>
      <td>表格内容
      </td>
    </tr>
</tbody></table><br></div><div>

1×2 表格样式</div><div>&nbsp; &nbsp;<table border="1" width="300">
    <tbody><tr>
      <td>列一</td>
      <td>列二</td>
    </tr>
</tbody></table><br></div><div>

2×2 表格样式</div><div>&nbsp; &nbsp;<table border="1" width="300">
    <tbody><tr>
      <td>行一列一</td>
      <td>行一列二</td>
    </tr>
    <tr>
      <td>行二列一</td>
      <td>行二列二</td>
    </tr>
</tbody></table>


</div>

大猫咪 发表于 2021-11-20 19:01

继续学习,老黑晚上好!{:4_190:}

加林森 发表于 2021-11-20 19:14

老黑讲得很详细,谢谢老黑!

马黑黑 发表于 2021-11-20 19:16

大猫咪 发表于 2021-11-20 19:01
继续学习,老黑晚上好!

https://dl4.weshineapp.com/gif/20170330/bd0c41b944fdcb8bfff1d29adf087f34.gif?f=micro_5pma5LiK5aW9

马黑黑 发表于 2021-11-20 20:10

加林森 发表于 2021-11-20 19:14
老黑讲得很详细,谢谢老黑!

这个你早精通了

红影 发表于 2021-11-20 20:11

看到过这两个符号,不知道代表什么。现在知道了,谢谢黑黑{:4_187:}

马黑黑 发表于 2021-11-20 20:12

红影 发表于 2021-11-20 20:11
看到过这两个符号,不知道代表什么。现在知道了,谢谢黑黑

懂几个汉语拼音就不难理解

红影 发表于 2021-11-20 20:12

如果是<table><tr><td>表格内容……</td></tr></table>
就是只有行一列一,不多加的意思吧。

马黑黑 发表于 2021-11-20 20:15

红影 发表于 2021-11-20 20:12
如果是表格内容……
就是只有行一列一,不多加的意思吧。

你要加也行,只要层次不乱就好。如下面是 2×2 的:

<table><tr><td>1<</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></table>

加林森 发表于 2021-11-20 20:15

马黑黑 发表于 2021-11-20 20:10
这个你早精通了

继续学习嘛

马黑黑 发表于 2021-11-20 20:16

加林森 发表于 2021-11-20 20:15
继续学习嘛

学而时时发呆不亦说乎

加林森 发表于 2021-11-20 20:33

马黑黑 发表于 2021-11-20 20:16
学而时时发呆不亦说乎

哈哈哈哈,说得真好。

小辣椒 发表于 2021-11-20 21:05

这个我平时不用,但也是要学习一下的,谢谢黑黑{:4_187:}

马黑黑 发表于 2021-11-20 21:23

小辣椒 发表于 2021-11-20 21:05
这个我平时不用,但也是要学习一下的,谢谢黑黑

你不是套用表格代码么

小辣椒 发表于 2021-11-20 21:24

马黑黑 发表于 2021-11-20 21:23
你不是套用表格代码么

我具体工作不做这个的{:4_189:}

马黑黑 发表于 2021-11-20 21:25

加林森 发表于 2021-11-20 20:33
哈哈哈哈,说得真好。

嗯嗯

马黑黑 发表于 2021-11-20 21:25

小辣椒 发表于 2021-11-20 21:24
我具体工作不做这个的
你套用的代码里就有表格的

绿叶清舟 发表于 2021-11-20 21:26

来上课了

马黑黑 发表于 2021-11-20 21:27

绿叶清舟 发表于 2021-11-20 21:26
来上课了

{:4_174:}
页: [1] 2 3 4
查看完整版本: table标签:入门