thml如何制作表格代码?

html-css011

thml如何制作表格代码?,第1张

首先打开软件,新建一个HTML5文档。为文档命名为:table。当然新建文档的方法有很多,使用的软件不同,方式不同。

在<body></body>之间输入以下代码:

<table> <thead> <tr> <th>标题1</th> <th>标题2</th> <th>标题3</th> </tr> </thead> <tbody> <tr> <td>单元格1</td> <td>单元格2</td> <td>单元格3</td> </tr>

... ...</tbody></table></body>

我们可以看到表格已经完成大半,除了线框尚未加上以外。这时,我们只用在标签<table>里加一个属性<border="1">

这时候我们再在浏览器中查看,会发现表格的边框就已经加上了。

万变不离其宗,在最基本的代码基础上再加其他代码便可制作出绚丽的表格了。

下面是表单代码,你直接再加属性就可以了,表单用 table 写比较简单,div 太麻烦了;

<html xmlns=" http://www.dayinmandarin.com ">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>黑板</title>

</head>

<body>

<div style="width:500px">

<h1 style="width:500pxheight:50pxcolor:#2A8DF0border-bottom:#2A8DF0 solid 3pxtext-align:center">用户注册页面</h1>

<table cellpadding="0" cellspacing="10" style="margin:0 auto">

<tr>

<td align="right" valign="top"><div>用户名:</div></td>

<td><input style='width:250px' value='请输入用户名' /></td>

</tr>

<tr>

<td align="right" valign="top"><div>密 码:</div></td>

<td><input style='width:250px' value='请输入密码' /></td>

</tr>

<tr>

<td align="right" valign="top"><div>确 认:</div></td>

<td><input style='width:250px' value='请再次输入密码' /></td>

</tr>

<tr>

<td align="right" valign="top"><div>姓 名:</div></td>

<td><input style='width:250px' value='请输入真实姓名' /></td>

</tr>

<tr>

<td align="right" valign="top"><div>邮 箱:</div></td>

<td><input style='width:250px' value='请输入电子邮箱' /></td>

</tr>

</table>

<div align="center"><input style="width:100pxheight:30pxtext-align:centerline-height:30pxbackground:#2289F0border:#2289F0color:whitefont-weight:boldfont-size:16px" type="submit" value="提交注册" /></div>

</div>

</body>

</html>