美文网首页
HTML自适应表格制作

HTML自适应表格制作

作者: 无力giaogiao | 来源:发表于2018-07-12 12:52 被阅读0次

    Dreamweaver的“表格式数据导入(T)”功能
    依据:Dw的“表格式数据导入(T)”功能可以将存有表格数据的UTF-8编码的TXT文档导入到软件当中

    制作UTF-8编码的TXT文档
    我们将表格数据直接拷贝到新建的TXT面板中,文件>另存为...,在“另存为”菜单面板右下角的“编码(E)”选择“UTF-8”,保存


    TIM截图20180712123853.png

    Dw的“表格式数据导入(T)”功能
    在Dw中点击菜单 文件>导入>表格式数据导入(T),选择TXT文件,导入
    这时候表格的基本数据已经导入到DW中了,剩下的工作我们就可以编辑表格的基本样式

    三、表格的自适应和单元格数据居中
    以一个6X4的表格为例

    <head>
    <meta charset="utf-8">
      <style>
         td {text-align:center}
      </style>
      <!--CSS:所有单元格数据全部居中-->
    <title>无标题文档</title>
    </head>
    <body>
    <table id="example" cellspacing="0" width="100%" border="1">
    <!--建立一个ID为“example”的表格,文字内容离边框距离为0,宽度为100%(自适应填充整个页面),边框线宽为1-->
    <thead>
    <tr>
        <td>编号</td>
        <td>准考证号</td>
        <td>姓 名</td>
        <td>专业名称</td>
        <td>指导教师</td>
        <td>联系电话</td>
    </tr>
    </thead>
     <tr>
        <td>10001</td>
        <td>0121********</td>
        <td>王思贤</td>
        <td>会  计</td>
        <td>孟翠湖</td>
        <td>137********</td>
    </tr>
    <tr>
        <td>10002</td>
        <td>1027********</td>
        <td>丁洪利</td>
        <td>会  计</td>
        <td>孟翠湖</td>
        <td>137********</td>
    </tr>
    <tr>
        <td>10003</td>
        <td>0106********</td>
        <td>张春霞</td>
        <td>会  计</td>
        <td>孟翠湖</td>
        <td>137********</td>
    </tr>
    </table>
    

    相关文章

      网友评论

          本文标题:HTML自适应表格制作

          本文链接:https://www.haomeiwen.com/subject/uvmlpftx.html