码迷,mamicode.com
首页 > 其他好文 > 详细

表格的基本设置

时间:2020-03-04 23:17:33      阅读:99      评论:0      收藏:0      [点我收藏+]

标签:cal   数据   姓名   htm   ble   head   initial   合并单元格   pre   

1 表格的概述

  • 在web的历史中,HTML的表格发挥了极大的作用。最初创建表格就是为了以表格的形式显示数据,后来表格变成了一个极受欢迎的布局工具。
  • 但是有了css以后,css在布局网页方面实际上会更出色,所以现在我们使用表格的作用只有一个,就是用来表示格式化的数据。
  • HTML中的表格可以很复杂,但是通常情况下我们不需要创建过于复杂的表格。

 

2 <table>、<tr>、<th>、<td>

2.1 概述

  • 使用table标签创建一个表格。
  • tr标签表示表格的一行。
  • tr标签中可以编写一个或者多个td标签。
  • th表示表头。
  • td表示表格中的一个单元格。

2.2 应用示例

  • 示例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格</title>
</head>
<body>
    <!-- 
        在HTML中,使用table标签来创建一个表格    
     -->
    <table border="1" width="40%" align="center">
        <!-- 
            在table标签中使用tr来表示表格的一行,有几行就有几个tr
         -->
        <tr>
            <!-- 
                在tr中使用th来创建表格的标题,有几个标签就有几个td
             -->
            <th>姓名</th>
            <th>省份</th>
            <th>地址</th>
        </tr>
        <tr>
            <!-- 
                在tr中使用td来创建一个单元格,有几个单元格就有几个td
             -->
            <td>张三</td>
            <td>北京</td>
            <td>秘密</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>江苏</td>
            <td>不告诉你</td>
        </tr>
    </table>
</body>
</html>

 

3 合并单元格

3.1 概述

  • 合并单元格指的是将两个或两个以上的单元格合并为一个单元格。
  • 合并单元格可以通过在th或td中设置属性来完成。
  • 横向合并:colspan。
  • 纵向合并:rowspan。

3.2 应用示例

  • 示例:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>合并单元格</title>
</head>

<body>

    <table border="1" width="40%" align="center">
        <tr>
            <th colspan="2">1</th>
            <th>2</th>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>6</td>
            <td>7</td>
            <td>8</td>
        </tr>
    </table>

</body>

</html>

 

4 表格的样式

4.1 概述

  • 之前学习的很多属性都可以用来设置表格的样式,比如color可以用来设置文本的颜色。padding可以设置内容和表格边框的距离。
  • text-align:设置文本的水平对齐。
  • vertical-align:设置文本的垂直对齐。
  • border-spacing:边框间距。
  • border-collapse:合并边框。
    • 可选值:
    • collapse:合并边框。
    • separate:不合并边框。  

4.2 应用示例

  • 示例:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格的样式</title>
    <style type="text/css">
        table {
            /* 设置表格的宽度 */
            width: 300px;
            /* 居中 */
            margin: 0 auto;
            /* 边框 */
            /* border: 1px solid black; */
            /* table和td之间默认有一个距离,通过border-spacing可以设置这个距离 */
            border-spacing: 0;
            /* 
                border-collapse可以用来设置表格的边框合并,
                如果设置了border-collapse则border-spacing自动失效
            */
            border-collapse: collapse;
        }

        table td {
            /* 边框 */
            border: 1px solid black;
        }
    </style>
</head>

<body>

    <table>
        <tr>
            <td>学号</td>
            <td>姓名</td>
            <td>性别</td>
            <td>地址</td>
        </tr>
        <tr>
            <td>1</td>
            <td>孙悟空</td>
            <td></td>
            <td>花果山</td>
        </tr>
        <tr>
            <td>2</td>
            <td>猪八戒</td>
            <td></td>
            <td>高老庄</td>
        </tr>
        <tr>
            <td>3</td>
            <td>沙和尚</td>
            <td></td>
            <td>流沙河</td>
        </tr>
    </table>

</body>

</html>

 

表格的基本设置

标签:cal   数据   姓名   htm   ble   head   initial   合并单元格   pre   

原文地址:https://www.cnblogs.com/xuweiweiwoaini/p/12416562.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!