web头歌 html5-表格基本结构

Yang enjoy

于 2023-12-15 18:22:44 发布

阅读量572

点赞数 8

文章标签：前端 html5 html

本文链接：https://blog.csdn.net/m0_74243656/article/details/135023206

版权

一、网页表格的基本概念

二、创建简单的表格

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
  <title>创建表格</title>
 </head>
 <body>
   <!-- ********* Begin ******* -->
  <table width="200" border="4px" background="https://www.educoder.net/api/attachments/1208912">
    <caption>成绩表</caption>
        <tr>
            <th  width="100">姓名</th>
            <th  width="100">成绩</th>
        </tr>
        <tr>
            <td  width="100">张三</td>
            <td  width="100">90</td>
        </tr>
    </table>

  
   <!-- ********* End ********* -->
 </body> 
</html>

三、表格行样式的设置

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>表格行样式的设置</title>
</head>
<body>
    <table border="4px" background="https://www.educoder.net/api/attachments/1208912" width="200">
       <caption>成绩表</caption>
       <!-- ********* Begin ********* -->
         <tr height="40" align="center" valign="middle" bgcolor="00ffff">
       <!-- ********* End ********* -->
       <!-- ********* End ********* -->
            <th width="100">姓名</td>
            <th width="100">成绩</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>90</td>
        </tr>
    </table>
    
</body>
</html>

四、表格中单元格样式的设置

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>表格单元格样式的设置</title>
</head>
<body>
    <!-- ********* Begin1 ********* -->
    <table border="4px" cellspacing="0" cellpadding="8" width="200">
    <!-- ********* End1 ********* -->
       <caption>成绩表</caption>
        <tr height=40 align=center  valign=middle bgcolor=00ffff>
            <th>姓名</th>
            <th>成绩</th>
        </tr>
        <tr bgcolor=00ff00>
            <!-- ********* Begin2 ********* -->
            <td width="120">张三</td>
            <td align="center" >90</td>
            
            <!-- ********* End 2********* -->
        </tr>
    </table>   
</body>
</html>