HTML 表格

5.1表格

表格
表头的部分
表格的主体
表尾,汇总信息
一行
表格的标题
表头有加粗样式
表中信息,主体部分没有加粗样式
的rowspan和colsoan分别定义单元格跨行的行数、跨列的列数
合并几列
合并几行
表格的间距

<table border="1" cellspacing="0" cellpadding="6">

    <caption>华鑫信息科技有限公司caption>
    <thead>
    <tr>
        <th>姓名th>
        <th>性别th>
        <th>出生年月th>
        <th>职务th>
        <th>电话th>
        <th>部门th>

    tr>
    thead>
    <tbody>
    <tr>
        <td>李东华td>
        <td>td>
        <td>1995-01-01td>
        <td>学生td>
        <td>12345678901td>
        <td rowspan="4">市场部td>
    tr>
    <tr>
        <td>李永刚td>
        <td>td>
        <td>1996-01-01td>
        <td>学生td>
        <td>12345678901td>
    tr>
    <tr>
        <td>李壮壮td>
        <td>td>
        <td>1997-01-01td>
        <td>学生td>
        <td>12345678901td>
    tr>
    <tr>
        <td>李东华td>
        <td>td>
        <td>1995-01-01td>
        <td>学生td>
        <td>12345678901td>
    tr>
    <tr>
        <td>孟玉磊td>
        <td>td>
        <td>1996-01-01td>
        <td>总经理td>
        <td>12345678901td>
        <td rowspan="2">总经理办公室td>
    tr>
    <tr>
        <td>孟玉磊td>
        <td>td>
        <td>1996-01-01td>
        <td>总经理td>
        <td>12345678901td>
    tr>
    tbody>
    <tfoot>
    <tr>
        <td colspan="6">共计40人td>
    tr>
    tfoot>
table>

5.2 table布局
布局:是页面的整体结构。
结构特点:从上往下,从左往右。一般每一行的高度是一样的。

<table width="800px" border="1">
    <tbody>
    <tr>
        <td colspan="3"><img src="img/logo.png" alt="">td>
        
        
    tr>
    <tr>
        <td colspan="3">
            <table border="1">
                <tr>
                    <td width="260">td>
                    <td>首页td>
                    <td>学院概况td>
                    <td>机构设置td>
                    <td>新闻公告td>
                    <td>教学科研td>
                    <td>招生就业td>
                    <td>数字校园td>
                tr>
            table>
        td>
        
        
    tr>
    <tr>
        <td><img src="img/row_2_left.png" alt="">td>
        <td colspan="2"><img src="img/row_2_right.png">td>
        
    tr>
    <tr>
        <td><img src="img/row_3_links.png">td>
        <td><img src="img/row_3_new.png">td>
        <td><img src="img/row_3_info.png">td>
    tr>
    tbody>
table>

效果图如下

首页 学院概况 机构设置 新闻公告 教学科研 招生就业 数字校园
   页面的布局可以通过table来实现,一个单元格就是一个布局区域单位。该区域的大小可以通过height和width属性来设置,位置是通过单元格的相对位置来体现。同时可以结合rowspan和colspan两个属性来完成。
   当布局比较复杂的时候可以使用teble的嵌套来实现,即在某个单元格在嵌入一个table进行划分

你可能感兴趣的:(HTML)