HTML 表格

文章目录

    • 基础表格
    • 背景色
    • 水平对齐
    • 垂直对齐
    • 合并单元格
    • 表格嵌套
    • 样式预览

基础表格

<table>
	<caption>我是表格的标题caption>
	<thead>
	    <tr>
	        <th>编号th>
	        <th>姓名th>
	        <th>性别th>
	    tr>
    thead>
    <tbody>
	    <tr>
	        <td>1td>
	        <td>张三td>
	        <td>td>
	    tr>
	    <tr>
	        <td>2td>
	        <td>李四td>
	        <td>td>
	    tr>
    tbody>
table>

标签介绍

  • table:表示一个表格的开始和结尾,所有表格的内容全部被嵌套在 table元素中,必须

  • tr:表示一行,被table嵌套,内部嵌套td,必须

  • td:表示一列,被tr嵌套,必须

  • thead:不是必须,多嵌套表头,也就是表格的第一行 一般搭配css使用

  • th:效果同td,只不过内部文本自动居中加粗

  • tbody:一般嵌套表格的主体部分,不是必须,多搭配css使用

  • caption:用来设置表格标题,不是必须

注意:table、tr、td以上三个元素在表格中缺一不可 横行竖列

运行效果

默认无边框 通过

设置边框

HTML 表格_第1张图片HTML 表格_第2张图片

背景色

bgcolor: 颜色
在html中设置颜色时可以使用以下三种方式

  • 直接使用颜色的单词
  • 色号 #FFFFFF - #000000
  • 使用IDE工具提供的选色工具
  • 使用rgb三原色设置
<tr bgcolor="coral">
	<th>列1th>			
tr>

水平对齐

align:水平对齐单元格内部的内容 right left center注意默认是局左对齐

<td align="right">列1td>

垂直对齐

valign:垂直对齐 top bottom middle

<td valign="top">列1td>
<td valign="middle">列2td>
<td valign="bottom">列3td>

合并单元格

在表格中一行多少列是固定不变的如果需要进行单元格的增减,则可以使用合并单元格的形式
不能随意少写或者不写单元格 colspan=“合并单元格的个数”

<td colspan="5">列1td>

表格嵌套

在一个表格中可以再次嵌套一个表格,但是注意,被嵌套的表格必须放置在td中

<td>
	<table bgcolor="greenyellow" cellspacing="0" 
		border="1px" width="100%" height="100%" bordercolor="red">
		<tr>
			<td>内部列1td>
			<td>内部列2td>
			<td>内部列3td>
		tr>
		<tr>
			<td>内部列1td>
			<td>内部列2td>
			<td>内部列3td>
		tr>
		<tr>
			<td>内部列1td>
			<td>内部列2td>
			<td>内部列3td>
		tr>
	table>
td>

样式预览

DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<title>表格title>
	head>
	<body>
		
		<table width="500px" height="400px" border="1px"
		cellspacing="0">
			<caption>我是表格的标题caption>
			<thead>
			
				<tr bgcolor="coral">
					<th>列1th>
					<th>列2th>
					<th>列3th>
					<th>列4th>
					<th>列5th>
				tr>
			thead>
			<tbody>
				<tr>
				
					<td align="right">列1td>
					<td align="left">列2td>
					<td align="center">列3td>
					<td>列4td>
					<td>列5td>
				tr>
				<tr>
					
					<td valign="top">列1td>
					<td valign="middle">列2td>
					<td valign="bottom">列3td>
					<td>列4td>
					<td>列5td>
				tr>
				<tr>
				
					<td colspan="5">列1td>
				tr>
				<tr>
					<td>列1td>
					<td>列2td>
					<td>
						<table bgcolor="greenyellow" cellspacing="0"
						border="1px" width="100%" height="100%"
						bordercolor="red">
							<tr>
								<td>内部列1td>
								<td>内部列2td>
								<td>内部列3td>
							tr>
							<tr>
								<td>内部列1td>
								<td>内部列2td>
								<td>内部列3td>
							tr>
							<tr>
								<td>内部列1td>
								<td>内部列2td>
								<td>内部列3td>
							tr>
						table>
					td>
					<td>列4td>
					<td>列5td>
				tr>
				<tr>
					<td>列1td>
					<td>列2td>
					<td>列3td>
					<td>列4td>
					<td>列5td>
				tr>
				<tr>
					<td>列1td>
					<td>列2td>
					<td>列3td>
					<td>列4td>
					<td>列5td>
				tr>
				<tr>
					<td>列1td>
					<td>列2td>
					<td>列3td>
					<td>列4td>
					<td>列5td>
				tr>
			tbody>
		table>
	body>
html>

运行效果

HTML 表格_第3张图片

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