zoukankan      html  css  js  c++  java
  • HTML设置表格

    1. 设置表格内容对齐方式

    在HTML中通常通过align设置对齐方式,文字是: text-align ,表格是:align

    如果将align属性设置给<table>标签,只能改变<table>整体的对齐方式,不会影响内容的对齐方式,如下图所示:

    <table class="one" align="center">
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
      <tr>
        <td>张三</td>
        <td>18</td>
        <td>男</td>
      </tr>
      <tr>
        <td>王五</td>
        <td>22</td>
        <td>男</td>
      </tr>
    </table>
    

      

    如果希望表格中的内容对齐,那么将align属性设置给<tr>或者<td>就可以实现了,如下图所示:

    <table class="one">
      <tr align="center">
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
      <tr align="center">
        <td>张三</td>
        <td>18</td>
        <td>男</td>
      </tr>
      <tr align="center">
        <td>王五</td>
        <td>22</td>
        <td>男</td>
      </tr>
    </table>
    

      

    2.去除表格单元格之间的空隙

    从上面两个表格中我们发现单元格与单元格之间存在空隙,去除空隙的代码和效果图如下:

    table,td,th {
        border: 1px solid black;
        border-collapse: collapse;
    }
    

      

  • 相关阅读:
    拼图
    事件处理和手势
    分栏控制器2
    分栏控制器
    数据保存
    常用小控件
    导航
    人人界面按钮,页面跳转,传值
    TextField
    image
  • 原文地址:https://www.cnblogs.com/belongs-to-qinghua/p/10951021.html
Copyright © 2011-2022 走看看