HTML表格学习

HTML学习笔记二

HTML表格:

HTML 表格由

标签来定义。

HTML 表格是一种用于展示结构化数据的标记语言元素。

  • tr:表示表格的一行。
  • td:表示表格的数据单元格。
  • th:表示表格的表头单元格。

数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<table border="1" align="center" cellpadding="10px" cellspacing="0px">
    <tr>
        <th>姓名th>
        <th>年龄th>
        <th>邮箱th>
        <th>地址th>
    tr>
    <tr>
        <td>张三td>
        <td>21td>
        <td>[email protected]td>
        <td>杭州td>
    tr>
    <tr>
        <td>张三td>
        <td>21td>
        <td>[email protected]td>
        <td>杭州td>
    tr>
table>

HTML表格学习_第1张图片

 元素表示整个表格,它包含两个主要部分: 和 。
 用于定义表格的标题部分.
 用于定义表格的主体部分

例子一:表格内的标签

DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)title> 
head>
<body>

<table border="1">
<tr>
  <td>
   <p>这是一个段落p>
   <p>这是另一个段落p>
  td>
  <td>这个单元格包含一个表格:
   <table border="1">
   <tr>
     <td>Atd>
     <td>Btd>
   tr>
   <tr>
     <td>Ctd>
     <td>Dtd>
   tr>
   table>
  td>
tr>
<tr>
  <td>这个单元格包含一个列表
   <ul>
    <li>applesli>
    <li>bananasli>
    <li>pineapplesli>
   ul>
  td>
  <td>HELLOtd>
tr>
table>

body>
html>

HTML表格学习_第2张图片

例子二:跨行或跨列的表格单元格

DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)title> 
head>
<body>

<h4>单元格跨两列:h4>
<table border="1">
<tr>
  <th>Nameth>
  <th colspan="2">Telephoneth>
tr>
<tr>
  <td>Bill Gatestd>
  <td>555 77 854td>
  <td>555 77 855td>
tr>
table>

<h4>单元格跨两行:h4>
<table border="1">
<tr>
  <th>First Name:th>
  <td>Bill Gatestd>
tr>
<tr>
  <th rowspan="2">Telephone:th>
  <td>555 77 854td>
tr>
<tr>
  <td>555 77 855td>
tr>
table>

body>
html>

HTML表格学习_第3张图片

单元格边距:

<table border="1" cellpadding="10">

使用 cellpadding 来创建单元格内容与其边框之间的空白。

单元格间距:

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

使用 cellspacing 增加单元格之间的距离。
HTML表格学习_第4张图片

表格例子:

DOCTYPE html>
<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>小说排行榜title>
head>

<body>
    <h2>小说排行榜h2>
    <table border="1" cellspacing="0" cellpadding="10px">
        <thead>
            <tr>
                <th>排名th>
                <th>书名th>
                <th>作者th>
                <th>今日搜索量th>
                <th>相关链接th>
            tr>
        thead>
        <tbody>
            <tr>
                <td>1td>
                <td>斗罗大陆td>
                <td>唐家三少td>
                <td>1200td>
                <td>
                    <a href="http://www.baidu.com">贴吧a>
                    <a href="http://www.baidu.com">图片a>
                    <a href="http://www.baidu.com">百科a>
                td>
            tr>
            <tr>
                <td>2td>
                <td>完美世界td>
                <td>辰东td>
                <td>1120td>
                <td>
                    <a href="http://www.baidu.com">贴吧a>
                    <a href="http://www.baidu.com">图片a>
                    <a href="http://www.baidu.com">百科a>
                td>
            tr>
            <tr>
                <td>3td>
                <td>盗墓笔记td>
                <td>南派三叔td>
                <td>860td>
                <td>
                    <a href="http://www.baidu.com">贴吧a>
                    <a href="http://www.baidu.com">图片a>
                    <a href="http://www.baidu.com">百科a>
                td>
            tr>
        tbody>
    table>
body>

html>

你可能感兴趣的:(前端,html,学习,笔记)