educoder平台实训----html5-表格基本结构

最新推荐文章于 2022-04-14 13:38:05 发布

白夜的月亮

最新推荐文章于 2022-04-14 13:38:05 发布

阅读量640

点赞数

CC 4.0 BY-SA版权

分类专栏： educoder平台实训html-web实训文章标签： python 开发语言后端 html

本文链接：https://blog.youkuaiyun.com/m0_59076472/article/details/121589976

educoder平台实训html-web实训专栏收录该内容

30 篇文章

订阅专栏

这篇博客介绍了HTML5中创建和设置表格样式的基础。从网页表格的基本概念开始，逐步展示如何创建简单的表格，设置表格行的样式，以及调整表格单元格的样式。内容包括表格的边框、宽度、背景图片、标题、单元格宽度、对齐方式、背景颜色等属性的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

educoder平台实训----html5-表格基本结构

第1关：网页表格的基本概念
DBCDB

第2关：创建简单的表格

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

第3关：表格行样式的设置

<!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 ********* -->
            <th width="100">姓名</td>
            <th width="100">成绩</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>90</td>
        </tr>
    </table>
    
</body>
</html>

第4关：表格中单元格样式的设置

<!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>