tables.md

May 9, 2016 · View on GitHub

Tables Back

  • a table represent information in a grid format.
  • each block in the grid is referred to as a table cell.

1. Basic structure

  • <table>is used to create a table
  • <tr>represents each row
  • <td>represents each element in this row
<table>
	<tr>
		<td>15</td>
		<td>20</td>
	</tr>
	<tr>
		<td>25</td>
		<td>30</td>
	</tr>
</table>
15 20
25 30

2. Headings

  • <th> is used to represent a head for each row or each column.
<table>
	<tr>
		<th></th>
		<th scope="col">a</th>
		<th scope="col">b</th>
		<th scope="col">a+b</th>
	</tr>
	<tr>
		<th scope="row">example 1</th>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
	<tr>
		<th scope="row">example 2</th>
		<td>2</td>
		<td>2</td>
		<td>t</td>
	</tr>
</table>
a b a+b
example 1 1 2 3
example 2 2 2 t

3. Panning Columns & Spanning Rows

Panning Columns(合併列)
  • Attribute colspan is set to merge.
<table>
	<tr>
		<th></th>
		<th>9am</th>
		<th>10am</th>
		<th>11am</th>
		<th>12am</th>
	</tr>
	<tr>
		<th>Monday</th>
		<td colspan="2">Geography</td>
		<td>Math</td>
		<td>Art</td>
	</tr>
	<tr>
		<th>Tuesday</th>
		<td colspan="3">Gym</td>
		<td>Home Ec</td>
	</tr>
</table>
9am 10am 11am 12am
Monday Geography Math Art
Tuesday Gym Home Ec
Spanning Rows(合併行)
  • Attribute rowspan is set to merge.
<table>
	<tr>
		<th></th>
		<th>ABC</th>
		<th>BBC</th>
		<th>CNN</th>
	</tr>
	<tr>
		<th>6pm - 7pm</th>
		<td rowspan="2">Movie</td>
		<td>Comedy</td>
		<td>News</td>
	</tr>
	<tr>
		<th>7pm - 8pm</th>
		<td>Sport</td>
		<td>Current Affairs</td>
	</tr>
</table>
ABC BBC CNN
6pm - 7pm Movie Comedy News
7pm - 8pm Sport Current Affairs

4. Long table

  • <thead> is used to be put inside all the headings of a long table.
  • <tbody> is the body of the table.
  • <tfoot> is the foot of the table
<table>
	<thead>
		<tr>
			<th>Date</th>
			<th>Income</th>
			<th>Expenditure</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>1st January</th>
			<td>250</td>
			<td>36</td>
		</tr>
		<tr>
			<th>2nd January</th>
			<td>285</td>
			<td>48</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td></td>
			<td>535</td>
			<td>84</td>
		</tr>
	</tfoot>
</table>
Date Income Expenditure
1st January 250 36
2nd January 285 48
535 84

5. Old Attributes

  • those attributes should be replaced by CSS.
  • width is used to indicate how wide the table shoud be.
  • cellpadding is used to set the padding inside each cell.
  • cellspacing is used to set the space between each cell.
  • border is used to set the border of the table
  • bgcolor is used to set the background color of each specific cell.