使用table标签制作常用的html表格

table 标签用于定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元。

合并单元格

使用table标签制作常用的html表格_第1张图片


<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>title>
head>

<style>
    body{
        text-align: center;
    }

    .table-class table{
        margin: 0px auto;/* table在页面的居中属性*/
        width: 30%;
        height: 100px;
        border-width: 1px; /*外边框粗细  */
        border-collapse: collapse; /* 合并边框  border一定要存在且不为零 */
    }
style>

<body>
    <p>Table Demop>
    <div class="table-class">
        <table width="400" border="1px">
            <tr><td width="105">站名td><td width="181">网址td><td width="112">说明td>tr>
            <tr><td>BAIDUtd><td>www.baidu.comtd><td>搜索td>tr>
        table>
    div>
body>
html>

这种方式有个不好的地方 就是需要设置边框颜色时候 无法设置

给table的边框设置颜色属性

使用table标签制作常用的html表格_第2张图片


<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>title>
head>

<style>
    body{
        text-align: center;
    }
    .table-class table{
        margin: 0px auto;/* table在页面的居中属性*/
        width: 30%;
        border-collapse: collapse;
    }
    .table-class td{
        margin: 0px auto;/* table在页面的居中属性*/
        width: 30%;
        height: 50px;
        border:3px #FF0000 solid;
    }
style>

<body>
<div class="table-class">
    <table width="400" border="0" cellspacing="0" cellpadding="0">
        <tr><td>站名td><td>网址td><td>说明td>tr>
        <tr><td>BAIDUtd><td>www.baidu.comtd><td>搜索td>tr>
    table>
div>
body>
html>
使用th(table header)标签添加表头以及使用css的类选择器给对应的单元格添加背景色

使用table标签制作常用的html表格_第3张图片


<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>title>
head>

<style>
    body{
        text-align: center;
    }

    .table-class table{
        margin: 0px auto;/* table在页面的居中属性*/
        width: 30%;
        border-collapse: collapse;
    }

    .table-class td, th{
        margin: 0px auto;/* table在页面的居中属性*/
        width: 30%;
        height: 50px;
        border:3px #FF0000 solid;
    }

    .color_gray{
        background-color: #d7d7d7;
    }
style>

<body>
<div class="table-class">
    <table width="400" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <th class="color_gray">站名th>
            <th>网址th>
            <th>说明th>
        tr>
        <tr>
            <td>BAIDUtd>
            <td class="color_gray">www.baidu.comtd>
            <td>搜索td>
        tr>
    table>
div>

body>
html>
在单元格中加入其它控件并铺满单元格

这里写图片描述


<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>title>
head>

<style>
    body{
        text-align: center;
    }
    .table-class table{
        margin: 0px auto;/* table在页面的居中属性*/
        width: 50%;
        border-collapse: collapse;
    }
    .table-class td{
        margin: 0px auto;/* table在页面的居中属性*/
        height: 50px;
        border:1px #000000 solid;
    }
    .cell{
        margin: 0px auto;
        height: 100%;
        width : 100%;
        border:0px;
    }
    .cellbutton{
        margin: 0px auto;
        height: 100%;
        width : 100%;
    }

    .select_style{
        width: 100%;
        height:100%;
        font-size:20px;
    }
style>

<body>
<div class="table-class">
    <table width="400" border="0" cellspacing="0" cellpadding="0">
        <tr>
                <td>测试1td>
                <td>测试2td>
                <td>测试3td>
                <td style="width:200px">测试4td>
                <td style="width:200px">测试5td>
                <td>保存td>
                <td>删除td>
        tr>
        <tr><td>1td><td>2td><td>1td>
        <td><input name="textAlarm12" type="text" class="cell">input>td>
        <td>
                <select name="textSameTimeCall1" class="select_style">
                <option value="">option><option value="1">开启option><option value="0">关闭option>
                select>
        td>
        <td><button name="buttonSave" type="button" class="cellbutton">保存button>td>
        <td><button name="buttonDel" type="button" class="cellbutton">删除button>td>tr>
    table>
div>
body>
html>

最后关于单元格的组合问题,建议使用单元格合并的属性(colspan和rowspan)而不是使用单元格嵌套

你可能感兴趣的:(web前端)