HTML的表格创建与修饰
在网页编写中,我们会用到表格,这就涉及了表格的创建和样式的编写,表格的创建分为行和列,还有表格的一些修饰也就是一些样式,比如 ,表格文字的居中,表格的边框样式与边框颜色等。
我么先创建简单的表格,先创建一个三行三列的表格,行用<tr>标签列用<td>标签,在用一个<table>标签代码如下 :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table width="200" border="none" height="50px" > <tr> <td align="center">1</td> <td align="center">2</td> <td align="center">3</td> </tr> <tr> <td align="center">4</td> <td align="center">5</td> <td align="center">6</td> </tr> <tr> <td align="center">7</td> <td align="center">8</td> <td align="center">9</td> </tr> </table> </body> </html>
效果图如下
这就是我们创建的三行三列的表格,下面我们来解释一下align=center,align是HTML中的定位标签,center为中心也就是居中,还可以写的参数是left ,right。
我们看上面的效果图可以看出这个表格有连个边框,这样看着不美观 ,我们可以设置一下去掉边框,变成单边框的表格,我们还可以给表格边框设置颜色,代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table width="200" border="none" height="50px" bordercolor="red" cellspacing="0"> <tr> <td align="center">1</td> <td align="center">2</td> <td align="center">3</td> </tr> <tr> <td align="center">4</td> <td align="center">5</td> <td align="center">6</td> </tr> <tr> <td align="center">7</td> <td align="center">8</td> <td align="center">9</td> </tr> </table> </body> </html>
效果图如下
这样我们就实现了边框的修改,解释一下其中的一些属性cellspacing是单元格的间距,我们设置为0px就取消了双边框。
这里我们可以拓展一下 ,我们如果需要还可以在表格中增加提交按钮。用来提交我们填写好的表格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table width="800" border="none" height="200px" bordercolor="red" cellspacing="0"> <tr> <td align="center">1</td> <td align="center">2</td> <td align="center">3</td> </tr> <tr> <td align="center">4</td> <td align="center">5</td> <td align="center">6</td> </tr> <tr> <td align="center">7</td> <td align="center">8</td> <td align="center"><button class="button" style="width: 80px;border-radius: 10px;height: 30px;background-color: #467ECF"><a>按钮</a></button></td> </tr> </table> </body> </html>
我们给按钮<button>设置了一些属性就得到了显示的效果。效果图如下:
我们还可以给按钮标签添加超链接 我们在<a>标签中添加就可以
<a herf=" 我们要连接到的地址"></a>
其他的属性不用改变就可以了
相关推荐
lyg0 2020-05-28
lupeng 2020-11-14
sjcheck 2020-11-10
sjcheck 2020-11-03
meylovezn 2020-08-28
owhile 2020-08-18
Francismingren 2020-08-17
pythonclass 2020-07-29
sunzhihaofuture 2020-07-19
爱读书的旅行者 2020-07-07
行吟阁 2020-07-05
tianqi 2020-07-05
行吟阁 2020-07-04
冰蝶 2020-07-04
lyg0 2020-07-04
owhile 2020-07-04
opspider 2020-06-28
lengyu0 2020-06-28