CSS表格属性

表格属性可以改善表格的外观

实例：
实例1.使用 border 属性设置表格边框
<head>
    <title>使用 border 属性设置表格边框</title>
    <style type="text/css">
       table,th,td
       {
          border:1px solid blue;
       }
       caption
       {
          font-weight:bold;
          font-size:24px;
       }
    </style>
</head>
<body>
    <table>
       <caption>淮阴工学院品牌特色专业一览表</caption>
       <tr>
          <th>序号</th>
          <th>专业名称</th>
          <th>所属单位</th>
       </tr>
       <tr>
          <td>1</td>
          <td>计算机科学与技术</td>
          <td>计算机工程学院</td>
       </tr>
       <tr>
          <td>2</td>
          <td>机械设计制造及其自动化、材料成型及控制工程</td>
          <td>机械工程学院</td>
       </tr>
       <tr>
          <td>3</td>
          <td>生物工程</td>
          <td>生命科学与化学工程学院、化学工程与工艺</td>
       </tr>
       <tr>
          <td>4</td>
          <td>电气工程及其自动化</td>
          <td style="border:1px solid blue;font-weight:normal;">电子与电气工程学院</td>
       </tr>
       <tr>
          <td>5</td>
          <td>土木工程</td>
          <td>建筑工程学院</td>
       </tr>
       <tr>
          <td>6</td>
          <td>工商管理、财务管理</td>
          <td>经济管理学院</td>
       </tr>
       <tr>
          <td >7</td>
          <td>交通运输</td>
          <td>交通工程学院</td>
       </tr>
       <tr>
          <td>8</td>
          <td>信息与计算科学</td>
          <td>数理学院</td>
       </tr>
    </table>
</body>
单击我看效果
实例2.使用 border-collapse 属性设置表格为单线条边框

上例中的表格具有双线条边框。这是由于 table、th 以及 td 元素都有独立的边框。 如果需要把表格显示为单线条边框，可以使用 border-collapse 属性。

<head>
    <title>使用 border-collapse 属性设置表格为单线条边框</title>
    <style type="text/css">
       table,th,td
       {
          border:1px solid blue;
       }
       table
       {
          border-collapse:collapse;
       }
       caption
       {
          font-weight:bold;
          font-size:24px;
       }
    </style>
</head>
<body>
    <table>
       <caption>淮阴工学院品牌特色专业一览表</caption>
       <tr>
          <th>序号</th>
          <th>专业名称</th>
          <th>所属单位</th>
       </tr>
       <tr>
          <td>1</td>
          <td>计算机科学与技术</td>
          <td>计算机工程学院</td>
       </tr>
       <tr>
          <td>2</td>
          <td>机械设计制造及其自动化、材料成型及控制工程</td>
          <td>机械工程学院</td>
       </tr>
       <tr>
          <td>3</td>
          <td>生物工程</td>
          <td>生命科学与化学工程学院、化学工程与工艺</td>
       </tr>
       <tr>
          <td>4</td>
          <td>电气工程及其自动化</td>
          <td style="border:1px solid blue;font-weight:normal;">电子与电气工程学院</td>
       </tr>
       <tr>
          <td>5</td>
          <td>土木工程</td>
          <td>建筑工程学院</td>
       </tr>
       <tr>
          <td>6</td>
          <td>工商管理、财务管理</td>
          <td>经济管理学院</td>
       </tr>
       <tr>
          <td >7</td>
          <td>交通运输</td>
          <td>交通工程学院</td>
       </tr>
       <tr>
          <td>8</td>
          <td>信息与计算科学</td>
          <td>数理学院</td>
       </tr>
    </table>
</body>
单击我看效果
实例3.使用 width 和 height 属性设置表格的宽度和高度

通过 width 和 height 属性定义表格的宽度和高度

<head>
    <title>使用 width 和 height 属性设置表格的宽度和高度</title>
    <style type="text/css">
       table,th,td
       {
          border:1px solid blue;
          height:10px;
       }
       table
       {
          border-collapse:collapse;
          width:75%;
       }
       caption
       {
          font-weight:bold;
          font-size:24px;
       }
    </style>
</head>
<body>
    <table>
       <caption>淮阴工学院品牌特色专业一览表</caption>
       <tr>
          <th>序号</th>
          <th>专业名称</th>
          <th>所属单位</th>
       </tr>
       <tr>
          <td>1</td>
          <td>计算机科学与技术</td>
          <td>计算机工程学院</td>
       </tr>
       <tr>
          <td>2</td>
          <td>机械设计制造及其自动化、材料成型及控制工程</td>
          <td>机械工程学院</td>
       </tr>
       <tr>
          <td>3</td>
          <td>生物工程</td>
          <td>生命科学与化学工程学院、化学工程与工艺</td>
       </tr>
       <tr>
          <td>4</td>
          <td>电气工程及其自动化</td>
          <td style="border:1px solid blue;font-weight:normal;">电子与电气工程学院</td>
       </tr>
       <tr>
          <td>5</td>
          <td>土木工程</td>
          <td>建筑工程学院</td>
       </tr>
       <tr>
          <td>6</td>
          <td>工商管理、财务管理</td>
          <td>经济管理学院</td>
       </tr>
       <tr>
          <td >7</td>
          <td>交通运输</td>
          <td>交通工程学院</td>
       </tr>
       <tr>
          <td>8</td>
          <td>信息与计算科学</td>
          <td>数理学院</td>
       </tr>
    </table>
</body>
单击我看效果
实例4.使用 text-align 和 vertical-align 属性设置表格中文本的对齐方式

text-align 属性设置水平对齐方式，比如左对齐、右对齐或者居中

vertical-align 属性设置垂直对齐方式，比如顶部对齐、底部对齐或居中对齐

<head>
    <title>使用text-align 和 vertical-align 属性设置表格中文本的对齐方式</title>
    <style type="text/css">
       table,th,td
       {
          border:1px solid blue;
          text-align:center;
       }
       table
       {
          border-collapse:collapse;
       }
       caption
       {
          font-weight:bold;
          font-size:24px;
       }
    </style>
</head>
<body>
    <table>
       <caption>淮阴工学院品牌特色专业一览表</caption>
       <tr>
          <th>序号</th>
          <th>专业名称</th>
          <th>所属单位</th>
       </tr>
       <tr>
          <td>1</td>
          <td>计算机科学与技术</td>
          <td>计算机工程学院</td>
       </tr>
       <tr>
          <td>2</td>
          <td>机械设计制造及其自动化、材料成型及控制工程</td>
          <td>机械工程学院</td>
       </tr>
       <tr>
          <td>3</td>
          <td>生物工程</td>
          <td>生命科学与化学工程学院、化学工程与工艺</td>
       </tr>
       <tr>
          <td>4</td>
          <td>电气工程及其自动化</td>
          <td style="border:1px solid blue;font-weight:normal;">电子与电气工程学院</td>
       </tr>
       <tr>
          <td>5</td>
          <td>土木工程</td>
          <td>建筑工程学院</td>
       </tr>
       <tr>
          <td>6</td>
          <td>工商管理、财务管理</td>
          <td>经济管理学院</td>
       </tr>
       <tr>
          <td >7</td>
          <td>交通运输</td>
          <td>交通工程学院</td>
       </tr>
       <tr>
          <td>8</td>
          <td>信息与计算科学</td>
          <td>数理学院</td>
       </tr>
    </table>
</body>
单击我看效果
实例5.使用 padding 属性控制表格中内容与边框的距离

为 td 和 th 元素设置 padding 属性控制表格中内容与边框的距离

<head>
    <title>使用 padding 属性控制表格中内容与边框的距离</title>
    <style type="text/css">
       table,th,td
       {
          border:1px solid blue;
          text-align:center;
          padding:9px;
       }
       table
       {
          border-collapse:collapse;
       }
       caption
       {
          font-weight:bold;
          font-size:24px;
       }
    </style>
</head>
<body>
    <table>
       <caption>淮阴工学院品牌特色专业一览表</caption>
       <tr>
          <th>序号</th>
          <th>专业名称</th>
          <th>所属单位</th>
       </tr>
       <tr>
          <td>1</td>
          <td>计算机科学与技术</td>
          <td>计算机工程学院</td>
       </tr>
       <tr>
          <td>2</td>
          <td>机械设计制造及其自动化、材料成型及控制工程</td>
          <td>机械工程学院</td>
       </tr>
       <tr>
          <td>3</td>
          <td>生物工程</td>
          <td>生命科学与化学工程学院、化学工程与工艺</td>
       </tr>
       <tr>
          <td>4</td>
          <td>电气工程及其自动化</td>
          <td style="border:1px solid blue;font-weight:normal;">电子与电气工程学院</td>
       </tr>
       <tr>
          <td>5</td>
          <td>土木工程</td>
          <td>建筑工程学院</td>
       </tr>
       <tr>
          <td>6</td>
          <td>工商管理、财务管理</td>
          <td>经济管理学院</td>
       </tr>
       <tr>
          <td >7</td>
          <td>交通运输</td>
          <td>交通工程学院</td>
       </tr>
       <tr>
          <td>8</td>
          <td>信息与计算科学</td>
          <td>数理学院</td>
       </tr>
    </table>
</body>
单击我看效果
实例6.制作隔行变色的表格

为 td 和 th 元素设置 padding 属性控制表格中内容与边框的距离

<head>
    <title>制作隔行变色的表格</title>
    <style type="text/css">
       #hyit
       {
          width:75%;
          border-collapse:collapse;
       }
       #hyit td, #hyit th
       {
          font-size:1em;
          border:1px solid #98bf21;
          padding:3px 7px 2px 7px;
       }
       #hyit th
       {
          font-size:1.1em;
          background-color:#A7C942;
          color:#ffffff;
       }
       #hyit tr.alt td
       {
          color:#000000;
          background-color:#EAF2D3;
       }
    </style>
</head>
<body>
    <table id="hyit">
       <tr>
          <th>序号</th>
          <th>专业名称</th>
          <th>所属单位</th>
       </tr>
       <tr>
          <td>1</td>
          <td>计算机科学与技术</td>
          <td>计算机工程学院</td>
       </tr>
       <tr class="alt">
          <td>2</td>
          <td>机械设计制造及其自动化、材料成型及控制工程</td>
          <td>机械工程学院</td>
       </tr>
       <tr>
          <td>3</td>
          <td>生物工程</td>
          <td>生命科学与化学工程学院、化学工程与工艺</td>
       </tr>
       <tr class="alt">
          <td>4</td>
          <td>电气工程及其自动化</td>
          <td style="border:1px solid blue;font-weight:normal;">电子与电气工程学院</td>
       </tr>
       <tr>
          <td>5</td>
          <td>土木工程</td>
          <td>建筑工程学院</td>
       </tr>
       <tr class="alt">
          <td>6</td>
          <td>工商管理、财务管理</td>
          <td>经济管理学院</td>
       </tr>
       <tr>
          <td >7</td>
          <td>交通运输</td>
          <td>交通工程学院</td>
       </tr>
       <tr class="alt">
          <td>8</td>
          <td>信息与计算科学</td>
          <td>数理学院</td>
       </tr>
    </table>
</body>
单击我看效果
实例7.使用 caption-side 属性设置表格标题的位置
<head>
    <title>使用 caption-side 属性设置表格标题的位置</title>
    <style type="text/css">
       caption{caption-side:bottom;}
       #hyit
       {
          width:75%;
          border-collapse:collapse;
       }
       #hyit td, #hyit th
       {
          font-size:1em;
          border:1px solid #98bf21;
          padding:3px 7px 2px 7px;
       }
       #hyit th
       {
          font-size:1.1em;
          background-color:#A7C942;
          color:#ffffff;
       }
       #hyit tr.alt td
       {
          color:#000000;
          background-color:#EAF2D3;
       }
    </style>
</head>
<body>
    <table id="hyit">
       <caption>淮阴工学院品牌特色专业一览表</caption>
       <tr>
          <th>序号</th>
          <th>专业名称</th>
          <th>所属单位</th>
       </tr>
       <tr>
          <td>1</td>
          <td>计算机科学与技术</td>
          <td>计算机工程学院</td>
       </tr>
       <tr class="alt">
          <td>2</td>
          <td>机械设计制造及其自动化、材料成型及控制工程</td>
          <td>机械工程学院</td>
       </tr>
       <tr>
          <td>3</td>
          <td>生物工程</td>
          <td>生命科学与化学工程学院、化学工程与工艺</td>
       </tr>
       <tr class="alt">
          <td>4</td>
          <td>电气工程及其自动化</td>
          <td style="border:1px solid blue;font-weight:normal;">电子与电气工程学院</td>
       </tr>
       <tr>
          <td>5</td>
          <td>土木工程</td>
          <td>建筑工程学院</td>
       </tr>
       <tr class="alt">
          <td>6</td>
          <td>工商管理、财务管理</td>
          <td>经济管理学院</td>
       </tr>
       <tr>
          <td >7</td>
          <td>交通运输</td>
          <td>交通工程学院</td>
       </tr>
       <tr class="alt">
          <td>8</td>
          <td>信息与计算科学</td>
          <td>数理学院</td>
       </tr>
    </table>
</body>
单击我看效果

©版权所有: 淮安深度人工智能科技有限公司2020, 备案号:苏ICP备2020056902号-2 | 技术支持：淮阴工学院计算机与软件工程学院《Web开发技术》教学团队