This HTML table tutorial demonstrates how to create tables in HTML. It assumes you know how to create an HTML page.
Basic table tags
In HTML, you create tables using the table tag, Ini in conjunction with the trand td tags. Although there are other tags for creating tables, these are the basics for creating a table in HTML.
Type this HTML code... |
<table border="1">
<tr>
<td>Table cell 1</td><td>Table cell 2</td>
</tr>
</table>
|
It should result in something like this in your browser... |
|
You'll notice that we added a border attribute to the table tag. This particular attribute allows us to specify how thick the border will be. If we don't want a border we can specify 0 (zero). Other common attributes you can use with your table tag include
Ini adalah akhir postingan saya
width, width, cellspacing and cellpadding.
You can also add attributes to the tr and td tags. For example, you can specify the width of each table cell.
Widths can be specified in either pixels or percentages. Specifying the width in pixels allows you to specify an exact width. Percentages allows the table to "grow" or "shrink" depending on what else is on the page and how wide the browser is.
Add some attributes to your table... |
<table border="1" cellpadding="5" cellspacing="5" width="100%">
<tr>
<td width="20%">Table cell 1</td><td>Table cell 2</td>
</tr>
</table>
|
It should result in something like this in your browser... |
|
Table Headers
Many tables, particularly those with tabular data, have a header row or column. In HTML, you can use the th tag.
Most browsers display table headers in bold and center-aligned.
Add a table header row... |
<table border="1" cellpadding="5" cellspacing="5" width="100%">
<tr>
<th>Table header</th>
<th>Table header</th>
</tr>
<tr>
<td width="20%">Table cell 1</td><td>Table cell 2</td>
</tr>
</table>
|
It should result in something like this in your browser... |
Table header | Table header |
|---|
Table cell 1 | Table cell 2 |
|
Colspan
You can use the colspan attribute to make a cell span multiple columns.
Add colspan... |
<table border="1" cellpadding="5" cellspacing="5" width="100%">
<tr>
<th colspan="2">Table header</th>
</tr>
<tr>
<td width="20%">Table cell 1</td><td>Table cell 2</td>
</tr>
</table>
|
It should result in something like this in your browser... |
Table header |
|---|
Table cell 1 | Table cell 2 |
|
Rowspan
Similar to what colspan is for columns, rowspan enables you to make a cell span multiple rows.
Add rowspan... |
<table border="1" cellpadding="5" cellspacing="5" width="100%">
<tr>
<th rowspan="2">Table header</th><td>Table cell 1
</tr>
<tr>
<td>Table cell 2</td>
</tr>
</table>
|
It should result in something like this in your browser... |
Table header | Table cell 1
|
|---|
Table cell 2 |
|
Labels: html
|
