标签:body 单元格 title ali view center 高度 port cells
table标签:用于直观展示用户信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>前端工程师第二天</title>
</head>
<body>
<!-- 今天我们来学习table、input标签 -->
<!-- 最简单的表格,如下 -->
<table>
<!-- tr:行,有多少个tr就有多少行 -->
<!-- 第一行 -->
<tr>
<td>1111</td>
<td>1222</td>
<td>1333</td>
<td>1444</td>
</tr>
<!-- 第二行 -->
<tr>
<td>2111111111</td>
<td>2222222222</td>
<td>2333333333</td>
<td>2444444444</td>
</tr>
</table>
<!-- 带有边框、内容居中 -->
<!-- border:边框厚度 -->
<!-- bordercolor:边框颜色 -->
<!-- algin:table居中 -->
<!-- cellspacing:单元格间距为0,就是没有间距;你可设置为10 尝试一下 -->
<table border="1" bordercolor="blue" align="center" cellspacing="0">
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>籍贯</td>
<td>爱好</td>
</tr>
<tr>
<td>小郑</td>
<td>女</td>
<td>保密</td>
<td>广东-汕尾</td>
<td>听歌、刷抖音</td>
</tr>
<tr>
<td>小陈</td>
<td>男</td>
<td>保密</td>
<td>江西-赣州</td>
<td>篮球、写代码</td>
</tr>
</table>
<div style="margin-top:20px;">
</div>
<!-- 设置宽度,高度 -->
<table border="1" bordercolor="skyblue" cellspacing="0">
<tr align="center" style="font-weight:bold;">
<td width="100px;">姓名</td>
<td width="50px;">性别</td>
<td width="100px;">年龄</td>
<td width="200px;">籍贯</td>
<td width="500px;">爱好</td>
</tr>
<tr align="center">
<td>小郑</td>
<td>女</td>
<td>保密</td>
<td>广东-汕尾</td>
<td>听歌、刷抖音</td>
</tr>
<tr align="center">
<td>小陈</td>
<td>男</td>
<td>保密</td>
<td>江西-赣州</td>
<td>篮球、写代码</td>
</tr>
</table>
<h5>下面我们来学习网页中,最重要最常见的元素-----表单</h5>
<input type="text" placeholder="请输入">
</body>
</html>
标签:body 单元格 title ali view center 高度 port cells
原文地址:https://www.cnblogs.com/KoBe-bk/p/14669884.html