HTML自适应表格制作

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

HTML自适应表格制作
Table_表格随屏幕自适应
HTML表格制作
HTML表格制作
HTML：复杂表格制作
网页常用布局方式
表格与表单
关于表格的css
HTML表格-13
# 使用HTML添加表格2（表格头部与脚部）——零基础自学网页制

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>