HTML表格常用属性

table:表名的开始和结束

caption:表格的大标题

tr:进行(hang行)的添加 一行一组

th、td:单元格 表示的是列

th:列标题,标题。 有加粗,有居中的默认效果

td:普通单元格

border:实现边框

width:表格宽度

单词column:列

rowspan:表示横跨行(上下合并)
colspan:表示横跨列(左右合并)
rowspan   //列的合并左边的为依据,合并行
colspan   //行的合并是以上面的为依据,合并列

上代码:

表格演示源码:


<html>
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
    <table border="1px" width="1000px">
        <caption>商品信息表caption>
        <thead>
            <tr>
                <th>商品类别th>
                <th>商品名称th>
                <th>单位th>
                <th>数量th>
            tr>
        thead>
        <tbody>
            <tr>
                <td rowspan="2">家电类td>
                <td valign="top">冰箱td>
                <td>td>
                <td align="center">520td>
            tr>
        <tr>
            
            <td>洗衣机td>
            <td>td>
            <td align="center">13td>
        tr>
            <tr>
                <td>辅料td>
                <td>插线板td>
                <td>td>
                <td align="center">14td>
            tr>
        tbody>
        <tfoot>
            <tr>
                <td colspan="4">备注:td>
                
                
                
            tr>
        tfoot>
    table>
body>
html>

表格演示图:

HTML表格常用属性_第1张图片

属性:

caption 商品库存表
thead 页眉部分,标题
tbody 主体部分
tfoot 页脚部分
align
char
charoff
span
valign
width
border 1px                  设置边框
width   npx,n %             表格宽度
bgcolor             颜色值   表格背景
align   left,center,right    表格在文档中的对齐方式
cellpadding   n px           内容和边框之间的间距
cellspacing   n px           单元格之间的间距

属性名称:frame

属性值:
viod        不显示外边框
border      四周都显示
above       显示上部的外边框
below       显示下部的外边框
hsides      显示上下的外边框
lhs         显示左部的外边框
rhs         显示右部的外边框
vsides      显示左右的外边框

常用属性演示源码:

img标签
<html>
    <head>
        <title>title>
    head>
    <body>
        <h1>img变迁的使用h1>
        <h2>img标签的重要属性h2>
        <p>
            src:指向需要打开的图片地址,(地址个超链接的地址一样)
            <div>
                <img src="1~J6I0FT(V5{7]QA@K)@@1I.png" alt="图片没找到的替代文字" title="鼠标悬浮文字" width="100px" height="200px">
                <img src="]{2R[[Y5]WNVF8[JFVX1XY3.png" >
                

            div>
        p>
    body>
html>
input 标签

<div>
    文本框:<input type="text" value="999999">
div>

<div>
    密码框:<input type="password">
div>
<div>
    复选框:<input type="checkbox" value="1" name="ho">
    <input type="checkbox" value="1" name="ho">
div>

<div>
    单选框:<input type="radio" name="sex" checked><input type="radio" name="sex"><br>
            说明:相同的name属性,表示是同一个组的单选框。那么最多只能被选中一个。
div>
<hr>
<div>
    文件选择框:<input type="file">
    <br>
    主要用于文件上传!
div>
<hr>
<div>
    隐藏域:<input type="hidden"><br>
    用户不可见,但是程序能使用。一般用于在页面记录隐藏信息(不用给用户看,但是程序又需要的数据)
div>
<hr>
<div>
    <input type="submit" value="提交按钮">用于提价form表单到服务器。
    <input type="reset" value="重置按钮">将form表单中的控件值置为初始状态
    <input type="button" value="普通按钮" onclick="javascript:alert('我是');">没有特定的功能,主要用于触发js事件
div>
<hr>
<div>
    多行文本域:<textarea cols="20" rows="20" style="height: 40px;widows: 400px;">textarea>
    <br>
    备注:cols,设置列,rows,设置行(可以控制文本域的大小)。但是一般使用height,width,来控制大小
div>
<hr>
<div>
    下拉列表:
    <select>
        <option value="">一年级option>
        <option value="">二年级option>
        <option value="">三年级option>
        <option value="">四年级option>
        <option value="">五年级option>
        <option value="">六年级option>
    select>
div>

常用属性演示图:

HTML表格常用属性_第2张图片

你可能感兴趣的:(HTML,html)