(HTML学习)MDN测验——表格基础测验

总结

表格元素及其属性
	1. ————
/ 2. ————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>
    
    
    <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 timeableh1>
    <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> th>
        <th>Month>
        <th>Tuesth>
        <th>Wedth>
        <th>Thurth>
        <th>Frith>
      tr>
      <tr>
        <td>1st periodtd>
        <td>Englishtd>
        <td> td>
        <td> td>
        <td>Germantd>
        <td>Dutchtd>
      tr>
      <tr> 
        <td>2nd periodtd>
        <td>Englishtd>
        <td>Englishtd>
        <td> td>
        <td>Germantd>
        <td>Dutchtd>
      tr>
      <tr>
        <td>3rd periodtd>
        <td> td>
        <td>Germantd>
        <td> td>
        <td>Germantd>
        <td>Dutchtd>
      tr>
    table>
  body>
html>

你可能感兴趣的:(前端学习,html,学习,前端)