Điện thoại: 0944210999
An HTML table is an element comprised of table rows and columns, much like you'd see when working with an application such as Excel. Tables are container elements, and their sole purpose is to house other HTML elements and arrange them in a tabular fashion -- row by row, column by column.
Tables may seem difficult at first, but after working through this lesson, you'll see that they aren't so horrible. A table element consists of three different HTML tags including the <table> tag, <tr> (table rows), and the <td> (table columns) tags.
HTML Table Code:
<table border="1">
<tr>
<td>Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
</tr>
<tr>
<td>Row 2 Cell 1</td>
<td>Row 2 Cell 2</td>
</tr>
</table>
Basic HTML Table Layout:
| Row 1 Cell 1 | Row 1 Cell 2 |
| Row 2 Cell 1 | Row 2 Cell 2 |
We've adjusted the formatting of the code by adding additional spaces before some of the table elements, but this has no bearing on the rendering of the element. It simply helps keep track of each tag/element and helps us ensure we don't miss an opening or closing tag which would prevent our table element from rendering correctly. We've also added a border attribute to ensure the table cells/rows are more visible to our readers.
Content elements like HTML lists, images, and even other table elements can be placed inside each table cell. Doing so aligns the elements in a tabular fashion and provides structure.
HTML Table Code:
<table border="1">
<tr>
<td width="50%">
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
</td>
<td>
<ul>
<li>List Item 4</li>
<li>List Item 5</li>
<li>List Item 6</li>
</ul>
</td>
</tr>
<tr>
<td>
<p>Avoid losing floppy disks with important school...</p>
</td>
<td>
<a href="http://www.espn.com" target="_blank" rel="nofollow">
<img src="http://www.tizag.com/pics/htmlT/ahman.gif" class="linksESPN" />
</a>
</td>
</tr>
</table>
HTML Table 2:
|
|
Avoid losing floppy disks with important school...
|  |
HTML tables allow the web designer to align page content in a tabular fashion while spanning elements horizontally across the web page, rather than stacking them up one on top of another.
html - table rows & table columns
A table can contain an infinite number of table rows. Each table row is essentially a table element itself, with an opening and closing tag (<tr> </tr>). Table columns are also considered child elements of HTML tables, and like table rows, an HTML table may contain an infinite number of table data cells (<td> <tr>).
Table rows and columns are container elements that house other HTML elements such as text links, images, and lists, as we've seen in previous examples. Below, we've applied a background color to the table example in order to help distinguish the different table elements.
HTML Table Code:
<table border="1">
<tr title="You are looking at Row 1" bgcolor="silver">
<td>Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
</tr>
<tr title="You are looking at Row 2" bgcolor="aqua">
<td>Row 2 Cell 1</td>
<td>Row 2 Cell 2</td>
</tr>
</table>
HTML Table Code Example:
| Row 1 Cell 1 | Row 1 Cell 2 |
| Row 2 Cell 1 | Row 2 Cell 2 |
html - tables: spanning multiple rows and cells
Use rowspan to span multiple rows merging together table rows and colspanto span across multiple columns.
HTML Table Rowspan Attribute:
<table border="1">
<tr>
<td><b>Column 1</b></td>
<td><b>Column 2</b></td>
<td><b>Column 3</b></td>
</tr>
<tr>
<td rowspan="2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan="3">Row 3 Cell 1</td>
</tr>
</table>
HTML Colspan and Rowspan Attributes:
| Column 1 | Column 2 | Column 3 |
| Row 1 Cell 1 | Row 1 Cell 2 | Row 1 Cell 3 |
| Row 2 Cell 2 | Row 2 Cell 3 | |
| Row 3 Cell 1 | ||
cell padding and spacing
With the cellpadding and cellspacing attributes, you will be able to adjust the spacing between table cells. Setting the cellpadding attribute determines how much space will exist between a table cell border and the elements contained within it, whereas cellspacing determines how much space will exist between each table cell. Color has been added to the table below to emphasize these attributes.
HTML Cellpadding/Cellspacing Code:
<table border="1" cellspacing="10" bgcolor="rgb(0,255,0)">
<tr>
<td><b>Column 1</b></td>
<td><b>Column 2</b></td>
</tr>
<tr>
<td>Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
</tr>
<tr>
<td>Row 2 Cell 1</td>
<td>Row 2 Cell 2</td>
</tr>
</table>
HTML Cellspacing and Padding:
| Column 1 | Column 2 |
| Row 1 Cell 1 | Row 1 Cell 2 |
| Row 2 Cell 1 | Row 2 Cell 2 |
And now we will change the cellpadding of the table and remove thecellspacing from the previous example. This should clearly demonstrate the difference between cellpadding and cellspacing.
HTML Code:
<table border="1" cellpadding="10" bgcolor="rgb(0,255,0)">
<tr>
<td><b>Column 1</b></td>
<td><b>Column 2</b></td>
</tr>
<tr>
<td>Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
</tr>
<tr>
<td>Row 2 Cell 1</td>
<td>Row 2 Cell 2</td>
</tr>
</table>
HTML Cell Pads:
| Column 1 | Column 2 |
| Row 1 Cell 1 | Row 1 Cell 2 |
| Row 2 Cell 1 | Row 2 Cell 2 |
The value you specify for padding and spacing is interpreted by the browser as a pixel value. So a value of 10 is simply 10 pixels wide. Most HTML attributes that use numeric values for their measurements represent a pixel value.
0 nhận xét: