（HTML学习）MDN测验——表格基础测验

最新推荐文章于 2025-02-08 23:26:17 发布

juice会blue

最新推荐文章于 2025-02-08 23:26:17 发布

阅读量215

点赞数

分类专栏：前端学习文章标签： html 学习前端

本文链接：https://blog.csdn.net/ED_LAI/article/details/128886257

版权

前端学习专栏收录该内容

4 篇文章

订阅专栏

总结

表格元素及其属性
	1. <table>——<tr>——<th>/<td>
	2. <table>——<colgroup>——<col>
	3. style 定义样式
	4. span 同时将col中定义的样式英语于多列
	5. colspan 占多个单元格宽度
	6. rows 占多个单元格高度

css样式
	1. border-collapse: collapse; 为表格设置合并边框模型
						separate
						inherit 继承
	2. letter-spacing 字符间距

代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>mozilla宣传主页</title>
    <!--[if lt IE 9]>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
    <![endif]-->
    
    <style>
      html {
        font-family: sans-serif;
      }
  
      table {
        border-collapse: collapse; 
        border: 2px solid rgb(200,200,200);
        letter-spacing: 1px;
        font-size: 0.8rem;
      }
  
      td, th {
        border: 1px solid rgb(190,190,190);
        padding: 10px 20px;
      }
  
      td {
        text-align: center;
      }
  
      caption {
        padding: 10px;
      }
      </style>
  </head>
  <body>
    <h1>School timeable</h1>
    <table>
      <colgroup>
        <col span="2">
        <col style="background-color: #97DB9A;">
        <col style="width: 42px">
        <col style="background-color: #97DB9A;">
        <col style="background-color: #DCC38E; border: 4px solid #c1437a;">
        <col style="width: 42px">
      </colgroup>
      <tr>
        <th>&nbsp;</th>
        <th>Mon</th>
        <th>Tues</th>
        <th>Wed</th>
        <th>Thur</th>
        <th>Fri</th>
      </tr>
      <tr>
        <td>1st period</td>
        <td>English</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>German</td>
        <td>Dutch</td>
      </tr>
      <tr> 
        <td>2nd period</td>
        <td>English</td>
        <td>English</td>
        <td>&nbsp;</td>
        <td>German</td>
        <td>Dutch</td>
      </tr>
      <tr>
        <td>3rd period</td>
        <td>&nbsp;</td>
        <td>German</td>
        <td>&nbsp;</td>
        <td>German</td>
        <td>Dutch</td>
      </tr>
    </table>
  </body>
</html>