前端学习笔记73-长表格

前端学习笔记73-长表格


有些表格很长,就需要长表格,例如银行流水。
这种表格分为3个部分,表头thead、主体tbody、底部tfoot。
看代码,


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>

<body>
    <table border="1">
        <thead>
            <tr>
                <td>日期td>
                <td>收入td>
                <td>支出td>
                <td>合计td>
            tr>
        thead>
        <tbody>
            <tr>
                <td>2000.1.1td>
                <td>500td>
                <td>200td>
                <td>300td>
            tr>
            <tr>
                <td>2000.1.1td>
                <td>500td>
                <td>200td>
                <td>300td>
            tr>
        tbody>
        <tfoot>
            <tr>
                <td>td>
                <td>td>
                <td>合计td>
                <td>600td>
            tr>
        tfoot>
    table>
body>

html>

前端学习笔记73-长表格_第1张图片
这里看上去除了有thead、tbody、tfoot外,好像和上一节的没啥区别。
但是如果我把这三个部分的位置换一下,显示的效果实际上是一样的。所以这就是长表格的特点。

此外,可以把thead中的td换成th,这样表头中的文字会加粗居中。

        <thead>
            <tr>
                <th>日期th>
                <th>收入th>
                <th>支出th>
                <th>合计th>
            tr>
        thead>

前端学习笔记73-长表格_第2张图片

你可能感兴趣的:(小白前端学习,html,css)