免费发布信息
微信公众号

html表格居中代码效果

   来源:黔优网责任编辑:优优  时间:2023-11-02 14:12:25 浏览量:60
导读:日常在做html表格时会使用到table表格,比如有成绩表、值日表、学员信息表等,会有排版需求让文字居中,合并单元格目录1table边框样式实线虚线2table边框颜色样式3html表格代码table边框样式实线虚线!DOCTYPEhtmlhtm

日常在做html表格时会使用到table表格,比如有成绩表、值日表、学员信息表等,会有排版需求让文字居中,合并单元格

  • 目录

  • 1table边框样式实线虚线

  • 2table边框颜色样式

  • 3html表格代码

table边框样式实线虚线


  1. <!DOCTYPE html> 

  2. <html> 

  3.     <head> 

  4.         <meta charset="utf-8"

  5.         <title>通高科技</title> 

  6.         <style> 

  7.             table{ 

  8.                 width: 500px; 

  9.                 border: 1px solid red; 

  10.             } 

  11.             th,tr,td{ 

  12.                 border: 1px dashed red; 

  13.             } 

  14.             td{ 

  15.                 text-align :center; 

  16.                  

  17.             } 

  18.              

  19.         </style> 

  20.     </head> 

  21.     <body> 

  22.         <table > 

  23.             <tr> 

  24.                 <td>1</td> 

  25.                 <td>2</td> 

  26.                 <td>3</td> 

  27.             </tr> 

  28.             <tr> 

  29.                 <td colspan="3">table边框样式实线虚线</td> 

  30.             </tr> 

  31.         </table> 

  32.     </body> 

  33. </html> 


table边框颜色样式


  1. <!DOCTYPE html> 

  2. <html> 

  3.     <head> 

  4.         <meta charset="utf-8"

  5.         <title>通高科技</title> 

  6.         <style> 

  7.             table{ 

  8.                 width: 500px; 

  9.                 border-color: aqua; 

  10.             } 

  11.             td{ 

  12.                 text-align :center; 

  13.                  

  14.             } 

  15.              

  16.         </style> 

  17.     </head> 

  18.     <body> 

  19.         <table border="1" > 

  20.             <tr> 

  21.                 <td>1</td> 

  22.                 <td>2</td> 

  23.                 <td>3</td> 

  24.             </tr> 

  25.             <tr> 

  26.                 <td colspan="3">table边框颜色</td> 

  27.             </tr> 

  28.         </table> 

  29.     </body> 

  30. </html> 


html表格代码


1、首先新建一个html,点击中间,先填入表格内容;

2、style样式控制,设置高度颜色等

  1. <!DOCTYPE html> 

  2. <html> 

  3.     <head> 

  4.         <meta charset="utf-8"

  5.         <title>通高科技</title> 

  6.         <style> 

  7.             table{ 

  8.                 width: 500px; 

  9.                 border-collapse : collapse; 

  10.             } 

  11.             td{ 

  12.                 text-align :center; 

  13.                  

  14.             } 

  15.              

  16.         </style> 

  17.     </head> 

  18.     <body> 

  19.         <table border="1"

  20.             <tr> 

  21.                 <td>1</td> 

  22.                 <td>2</td> 

  23.                 <td>3</td> 

  24.             </tr> 

  25.             <tr> 

  26.                 <td colspan="3">456</td> 

  27.             </tr> 

  28.         </table> 

  29.     </body> 

  30. </html> 

 
 
 
没用 0举报 收藏 0
免责声明:
黔优网以上展示内容来源于用户自主上传、合作媒体、企业机构或网络收集整理,版权争议与本站无关,文章涉及见解与观点不代表黔优网官方立场,请读者仅做参考。本文标题:html表格居中代码效果,本文链接:https://www.qianu.com/news/253188.html,欢迎转载,转载时请说明出处。若您认为本文侵犯了您的版权信息,或您发现该内容有任何违法信息,请您立即点此【投诉举报】并提供有效线索,也可以通过邮件(邮箱号:kefu@qianu.com)联系我们及时修正或删除。
 
 

 

 
推荐图文
推荐商业资讯