專注搜索競(jìng)價(jià)代運(yùn)營(yíng)

成長(zhǎng)之選 ，效果之道！

免費(fèi)咨詢熱線：17636682598

html表格居中代碼效果

日常在做html表格時(shí)會(huì)使用到table表格，比如有成績(jī)表、值日表、學(xué)員信息表等，會(huì)有排版需求讓文字居中，合并單元格

table邊框樣式實(shí)線虛線

  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邊框樣式實(shí)線虛線</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、首先新建一個(gè)html，點(diǎn)擊中間，先填入表格內(nèi)容；

2、style樣式控制，設(shè)置高度顏色等

  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> 

本文分類(lèi)：營(yíng)銷(xiāo)學(xué)院

瀏覽次數(shù)：91次瀏覽

發(fā)布日期：2022-07-12 15:24:58

本文鏈接：http://www.nepalimancheystudio.com/edu/2428.html