HTML(的简单表格)的案例

1、简单的表格

代码:


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
head>
<body>
	<table border="2" width="400px" height="200px" align="center" bordercolor="red" bgcolor="#cccccc" background="../../img/bg.gif" cellspacing="10" cellpadding="0px">
		<tr align="right" valign="top">
			<td>hellotd>
			<td>hellotd>
			<td>hellotd>
		tr>

		<tr align="center" valign="middle" bgcolor="blue">
			<td>hellotd>
			<td bgcolor="yellow" valign="bottom">hellotd>
			<td>hellotd>
		tr>


		<tr valign="bottom" background="../../img/heihei.gif">
			<td>hellotd>
			<td>hellotd>
			<td>hellotd>
		tr>
	table>
body>
html>

案例:HTML(的简单表格)的案例_第1张图片

2、合并单元格

代码:


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
head>
<body>
	
	<table border="1" width="500px" height="300px">
		<tr>
			<td colspan="4" align="center">hello1td>
		tr>
		<tr>
			<td rowspan="3">hello1td>
			<td>hello2td>
			<td>hello3td>
			<td>hello4td>
		tr>
		<tr>
			
			<td>hello2td>
			<td rowspan="2" colspan="2">hello3td>
			
		tr>
		<tr>
			
			<td>hello2td>
			
			
		tr>
	table>
body>
html>

案例:HTML(的简单表格)的案例_第2张图片

3、高级的表格

代码:


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
head>
<body>
	<table border="1" width="600px" height="300px" align="center">
		<caption><h2>学生基本信息表h2>caption>

		<thead bgcolor="cyan">
			<th>学号th>
			<th>姓名th>
			<th>年龄th>
			<th>性别th>
		thead>
		<tbody bgcolor="#cccccc">
			<tr>
				<td>1001td>
				<td>阿牛td>
				<td>21td>
				<td>td>
			tr>
			<tr>
				<td>1002td>
				<td>阿花td>
				<td>20td>
				<td>td>
			tr>
			<tr>
				<td>1003td>
				<td>张三td>
				<td>19td>
				<td>td>
			tr>
			<tr>
				<td>1004td>
				<td>李四td>
				<td>22td>
				<td>td>
			tr>
		tbody>

		<tfoot bgcolor="yellow" align="center">
			<tr>
				<td width="25%">总计人数td>
				<td colspan="3">4td>
				
			tr>
		tfoot>
	table>
body>
html>

案例:HTML(的简单表格)的案例_第3张图片

你可能感兴趣的:(HTML(的简单表格)的案例)