当前位置：首页 > news >正文

表格标记＜table＞

news 2025/8/4 8:31:38

一.表格标记、

1table：表格标记

2.caption:表单标题标记

3.tr:表格行标记

4.td:表格中数据单元格标记

5.th:标题单元格

table标记是表格中最外层标记，tr表示表格中的行标记，一对<tr>表示表格中的一行，在<tr>中可以嵌套几对<th>标记或几对<td>标记

属性：

width：设置表格或者单元格的宽度

height：设置表格或者单元格的高度

align：设置表格或者单元格中，文字水平对齐方式

valign：设置单元格垂直对齐方式，可取top bottom middle baseline

border:设置边框的值，默认为0，表示不可见

bgcolor：背景颜色

background:背景图片

    <!-- 属性：width：设置表格或者单元格的宽度height：设置表格或者单元格的高度align：设置表格或者单元格中，文字水平对齐方式valign：设置单元格垂直对齐方式，可取top bottom middle baseline border:设置边框的值，默认为0，表示不可见bgcolor：背景颜色background:背景图片 --><table align="center" border="4" width="300px" height="400px" bgcolor="yellow" ><caption>表格</caption><tr valign="top"><th>标题1</th><th>标题1</th></tr><!-- valign:这个属性只能放在tr td th标记中 --><tr valign="middle"><td >单元格1</td><td>单元格2</td></tr><tr valign="bottom"><td>单元格3</td><td>单元格4</td></tr></table>

留下一个小作业，这个用表格怎么写呢？

这里直接贴上代码了哦

    <hr><table border="3" align="center" width="500px" bgcolor="yellow"><caption>个人简历表</caption><tr bgcolor="blue"><th>姓名</th><th>年龄</th><th>籍贯</th></tr><tr bgcolor="green"><td>东方翱翔</td><td>不告诉你</td><td>我也不告诉你</td></tr></table>

完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><!-- 属性：width：设置表格或者单元格的宽度height：设置表格或者单元格的高度align：设置表格或者单元格中，文字水平对齐方式valign：设置单元格垂直对齐方式，可取top bottom middle baseline border:设置边框的值，默认为0，表示不可见bgcolor：背景颜色background:背景图片 --><table align="center" border="4" width="300px" height="400px" bgcolor="yellow" ><caption>表格</caption><tr valign="top"><th>标题1</th><th>标题1</th></tr><!-- valign:这个属性只能放在tr td th标记中 --><tr valign="middle"><td >单元格1</td><td>单元格2</td></tr><tr valign="bottom"><td>单元格3</td><td>单元格4</td></tr></table><hr><table border="3" align="center" width="500px" bgcolor="yellow"><caption>个人简历表</caption><tr bgcolor="blue"><th>姓名</th><th>年龄</th><th>籍贯</th></tr><tr bgcolor="green"><td>东方翱翔</td><td>不告诉你</td><td>我也不告诉你</td></tr></table></body></html>

效果