编程知识 cdmana.com

Front end learning notes - HTML table Tags

Preface

Forms are one of the most frequently used tools in web page creation , When making web pages , Use tables to arrange data more clearly . But in the actual production process , Tables are more used to locate the layout of web pages . Many web pages are laid out in tables . This is because the table has a strong function in text and image position control .

# 1. The basic structure of the form

The form consists of lines 、 Column 、 And cells 3 Part of it is made up of , Usually by 3 Tags to create , They are table marks <table>、 Line marker <tr>、 And cell markers <td>. All the attributes of a table should be marked at the beginning of the table <table> And the end of the form </table> It works between .

Create four elements of the table :

table、tr、th、td

<tabel>...</table>: The whole table is filled with <table> Mark the beginning 、</table> Mark the end .

<tr>...</tr>: One line of the form , So I think there are several pairs of <tr></td>, There are just a few lines in the form .

<td>...</td>: One cell of the table , There are several pairs in one line <td></td>, Explain how many columns are in a row .

<th></th>: A cell in the head of a table , Table header .

The number of columns in the table , Depends on the number of data cells in a row

<table>
    <tr>
        <th> Animal name </th>
        <th> species </th>
        <th> Living habits </th>
        <th> Feeding habits </th>
    </tr>
    <tr>
        <td> The tiger </td>
        <td> catamount </td>
        <td> Alone </td>
        <td> carnivorous </td>
    </tr>
    <tr>
        <td> The lion </td>
        <td> catamount </td>
        <td> colony </td>
        <td> carnivorous </td>
    </tr>
    <tr>
        <td> Elephant </td>
        <td> Mammals </td>
        <td> Live in groups </td>
        <td> herbivorous </td>
    </tr>
</table>

 form

# Table properties
## Table title caption

A table can only have one title

In the above code <table></table> Add <caption> The world of animals </caption>

 form

## Table width and height

The width of the table is width, The height is height

The grammar is <table width="500" height="130">

## Table header alignment align

The grammar is <table align=" Alignment mode ">

Fill in the alignment with the corresponding attribute values :

left: Align left
center: In the middle
right: Right alignment

## Table border width border

border Value is not set or set to 0 when , Show as borderless

The grammar is <table border="5"> , 5 For border width

## Table border color bordercolor

The grammar is <table bordercolor="#66ccff"> , The specific coding of each color can be found on the Internet

## Width of the inner frame of the table cellspacing

The width property of the inner box of a table is used to set the spacing between each cell in the table

The grammar is <table cellspacing=" Width value of inner frame ">

## The margin between the text and the border in the table cellpadding

By default , The contents of the cell will be close to the border of the table , It looks very crowded , You can use the word method to set the distance

The grammar is <table cellspadding=" The distance between text and border is ">

## Table background color bgcolor

The grammar is <table bgcolor="7fffaa">

## Table background image background

The grammar is <table background=" Picture links ">

## Mark at the beginning of the table thead

The beginning of the style is <thead>, The closing mark is </thead>. It is used to define the top style of the table , You can set the background color 、 text alignment 、 Text vertical way, etc .

## Table body tags tbody

The function of table body tag is similar to that of table head tag , Table body styles are used to unify the styles of table body parts , Marked as <tbody>

## Mark at the end of the table tfoot

<tfoot> Used to define footer style

# Line properties
## Table row property settings

The setting of row attribute in the table is similar to that of the table , Just add the relevant attribute values to the row labels , Such as <tr width="5" height="3" align="content" bordercolor="#66ccff" cellspacing="3">
Multiple parameter values are separated by spaces

## Table row alignment

The row alignment in the table is in addition to the horizontal alignment described above in heading alignment align, And vertical alignment valign

The grammar is <tr valign=" Alignment mode ">

There are three settable values :topmiddlebottom

valign It can also be used for cell properties

# Cell properties
## Cell size

The grammar is <td width="8" height="5">

## Horizontal span colspan

When designing forms , Sometimes you need to combine two or more adjacent cells into one cell

The grammar is <td colspan=" The number of columns in the span ">

## Vertical span rowspan

Cells can span columns horizontally , You can also straddle in the vertical direction

The grammar is <td rowspan=" Rows of span ">

Give an example code :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Demo</title>
</head>
<body>
    <table width="500" height="300" align="content" border="5" bordercolor="#66ccff" cellspacing="3" bgcolor="7fffaa">
        <caption> The world of animals </caption>
    <tr>
        <th> Animal name </th>
        <th> species </th>
        <th> Living habits </th>
        <th> Feeding habits </th>
    </tr>
    <tr align="center">
        <td> The tiger </td>
        <td> catamount </td>
        <td> Alone </td>
        <td rowspan="2"> carnivorous </td>
    </tr>
    <tr align="center">
        <td> The lion </td>
        <td> catamount </td>
        <td> colony </td>

    </tr>
    <tr align="center">
        <td> Elephant </td>
        <td> Mammals </td>
        <td> Live in groups </td>
        <td> herbivorous </td>
    </tr>
</table>
</body>
</html>

版权声明
本文为[Front end sweeper]所创,转载请带上原文链接,感谢
https://cdmana.com/2020/12/20201225141244684D.html

Scroll to Top