|
|
A Unit of Aim Clear Technologies Ltd.
Advertise with us
 |
|
neha
Marketing Executive 
Joined:
Mon Aug 24, 2009 10:57 pm
Beans: 767
In Bank: 10965
College: IET
Degree: B.E
Position: Teacher
|
|
Sun Sep 27, 2009 6:38 pm
|
Post subject: How do you build an HTML table from scratch? 
Question: How do you build an HTML table from scratch?
HTML tables can be very tricky to build in a text editor, but once you learn how to build them you'll be glad you did. Knowing HTML tables is a good indication that you're an intermediate or advanced HTML author.
Answer:
HTML tables require only three tags to build:
<table> - the table
<tr> - table row
<td> - table cell (or column)
The best way to start is to think about tables as being a group of cells in a row, and a group of rows in a table.
First create the table:
<table> </table>
Then, within that table, create your first row:
<table>
<tr> </tr>
</table>
Finally, create your cells within the row:
<table>
<tr> <td> </td> </tr>
</table>
And then add the text within the cell:
<table>
<tr><td>cell 1</td></tr>
</table>
|
|
|
|
neha
Marketing Executive
Joined:
Mon Aug 24, 2009 10:57 pm
Beans: 767
In Bank: 10965
College: IET
Degree: B.E
Position: Teacher
|
|
Sun Sep 27, 2009 6:39 pm
|
Post subject: Build a 2x2 Table
HTML tables are easy to create once you understand the basics of rows and columns. After you have built a 2x2 table, you can build any size table you would like.
Difficulty: Average
Time Required: 10 minutes
Here's How:
First open the table
Open the first row with the tr tag
Open the first column with the td tag
Write the second row  as the first
Then close the table
Write the contents of the cell
Close the first cell and open the second
Write the contents of the second cell
Close the second cell and close the row
Tips:
Use the border='1' attribute to add a border to your table.
Tables can be used to display data or to arrange the layout of a page.
|
|
|
|
neha
Marketing Executive
Joined:
Mon Aug 24, 2009 10:57 pm
Beans: 767
In Bank: 10965
College: IET
Degree: B.E
Position: Teacher
|
|
Sun Sep 27, 2009 6:44 pm
|
Post subject: Simple Table Styles
Start with a Standard Table
If you don't know how to build a table with HTML, you should first read the HTML Tables Tutorial before starting in on this article.
When you build a basic table without any styles or attributes, modern browsers display them very plainly. They don't include any borders or colors. The only nod to style or layout that most browsers use is to bold and center any header cells.
For the purposes of this article, I created a two-column, four-row table with table head and table body sections defined.
<table>
<thead>
<tr><th>Name</th><th>Alias</th></tr>
</thead>
<tbody>
<tr><td>Jennifer Kyrnin</td><td>Web Design / HTML Guide</td></tr>
<tr><td>Mark Kyrnin</td><td>PC Hardware / Reviews Guide</td></tr>
<tr><td>Shasta</td><td>Moe</td></tr>
<tr><td>McKinley</td><td>Kinkin</td></tr>
</tbody>
</table>
First, Let's Define the Borders
Before CSS, when you defined the border attribute on a table, this affected all the borders around the table as a whole as well as in between sections, rows, and columns. So many people think that CSS will act the same way, but it doesn't. Instead, CSS puts a border on the table itself - not around any of the cells.
So, to put a border around the cells of the table, you need to define that in your CSS:
td, th { border: 1px #ccc solid; }
And as you can see, this puts a grey border around every cell. But it looks somewhat strange. After all, the cells are all separated from one another - they don't look like a standard spreadsheet or table.
Collapse Your Table Borders
The HTML tables specification provides two ways of handling table borders: collapsed and separated. This gets really complicated really quickly, but suffice it to say that most browsers will display tables with the cells separated if you don't specify a preference. To fix this, you need to put a border-collapse style on your table:
table { border-collapse: collapse; }
When you use this style, your table borders will display as you might expect - simple lines between each cell. As you can see here.
Add Color
Adding color to your tables makes them much easier to read. And the benefit of using the thead and tbody tags means that you don't have to define a style for every row or cell - you just assign a background color to the thead and the tbody and your table cells will be colorized. It can be more complicated if you want to alternate row colors but even that is possible.
Make Your Table Responsive
One of the things you might notice about Web 2.0 pages is that they often use tabular data with visual feedback. In other words, the table rows or columns change color depending upon where your mouse is hovering.
With just a small amount of JavaScript and a line or two of CSS, you can create a table that highlights the row that the mouse is hovering over or changes color when it's clicked on.
Don't Be Afraid of Tables
When you need to post tabular data, don't leave it up to the browser to define how it will look. Instead use the CSS and JavaScript tools at your disposal to create a table that looks as good as the rest of your Web site.
|
|
|
|
neha
Marketing Executive
Joined:
Mon Aug 24, 2009 10:57 pm
Beans: 767
In Bank: 10965
College: IET
Degree: B.E
Position: Teacher
|
|
Sun Sep 27, 2009 6:45 pm
|
Post subject: How can I include one table inside another?
Question: How can I include one table inside another?
Including one table inside another table on a Web page is called "nesting tables". This is one way to generate complex table layouts without creating extremely complex tables.
Answer:
It's easier than you might think to include one HTML table inside another. You just have to think about each table cell (<td>) as a whole new space to place your next table.
First create a 2 column by 2 row table[/a]. The HTML will look like this:
<table>
<tr><td>column 1 row 1</td>
<td>column 2 row 1</td></tr>
<tr><td>column 1 row 2</td>
<td>column 2 row 2</td></tr>
</table>
Decide which cell you want to place the nested table. I'll put mine in column 2 row 2.
Replace the text in that cell with your second table. The HTML will look like this (I've bolded the second table):
<table>
<tr><td>column 1 row 1</td>
<td>column 2 row 1</td></tr>
<tr><td>column 1 row 2</td>
<td>
<table>
<tr><td>column 1 row 1</td>
<td>column 2 row 1</td></tr>
<tr><td>column 1 row 2</td>
<td>column 2 row 2</td></tr>
</table>
</td></tr>
</table>
The trick to nested tables is to always close your inner table before you close the outer table cells.
Nested Tables Slow Pages Down
Remember that nested tables slow page rendering. This means that the more tables you have on a page, especially nested inside one another, the longer it will take for the browser to build the page. Always consider if you really need that table[/a] before you add it to your design. There may be a less complex way to get the same result if you think carefully.
|
|
|
|
neha
Marketing Executive
Joined:
Mon Aug 24, 2009 10:57 pm
Beans: 767
In Bank: 10965
College: IET
Degree: B.E
Position: Teacher
|
|
Sun Sep 27, 2009 6:47 pm
|
Post subject: What do the colspan and rowspan attributes do?
Question: What do the colspan and rowspan attributes do?
Answer:
Once you have a table with many rows and columns, you may end up with a situation where you want the data in one cell to flow across several rows or columns. This is where the attributes collspan and rowspan come into play. They are attributes of the <td> and <th> tags. In other words, you create a cell and then have it span the number of columns or rows you'd like.
First create your table, with several rows and columns:
<table border="1">
<tr><th>header cell 1</th><th>header cell 2</th><th>header cell 3</th></tr>
<tr><td>col 1 row 1</td><td>col 2 row 1</td><td>col 3 row 1</td></tr>
<tr><td>col 1 row 2</td><td>col 2 row 2</td><td>col 3 row 2</td></tr>
<tr><td>col 1 row 3</td><td>col 2 row 3</td><td>col 3 row 3</td></tr>
<tr><td>col 1 row 4</td><td>col 2 row 4</td><td>col 3 row 4</td></tr>
</table>
What is Colspan?
Colspan tells the browser to create a cell that spans more than one column. Cells with a multiple colspan will be wider and cross over column boundaries. If the table border is not zero, there will be no separator in the middle of the columns of a cell with multiple colspan.
When you set the colspan on a cell, you need to remove the cells in that row that the colspan cell is taking over. For example, if you are setting the colspan to 2, then you'll need to remove 1 cell from the row:
<table border="1">
<tr><th>header cell 1</th><th>header cell 2</th><th>header cell 3</th></tr>
<tr><td colspan="2">col 1 row 1</td><td>col 3 row 1</td></tr>
<tr><td>col 1 row 2</td><td>col 2 row 2</td><td>col 3 row 2</td></tr>
<tr><td>col 1 row 3</td><td>col 2 row 3</td><td>col 3 row 3</td></tr>
<tr><td>col 1 row 4</td><td>col 2 row 4</td><td>col 3 row 4</td></tr>
</table>
If you're making the colspan 3, then you'll need to remove 2 cells from the row:
<table border="1">
<tr><th>header cell 1</th><th>header cell 2</th><th>header cell 3</th></tr>
<tr><td colspan="3">col 1 row 1</td></tr>
<tr><td>col 1 row 2</td><td>col 2 row 2</td><td>col 3 row 2</td></tr>
<tr><td>col 1 row 3</td><td>col 2 row 3</td><td>col 3 row 3</td></tr>
<tr><td>col 1 row 4</td><td>col 2 row 4</td><td>col 3 row 4</td></tr>
</table>
What is Rowspan?
Rowspan acts in the same way as colspan, only instead of spanning the columns in a table, the cell will span 2 or more rows in the table.
<table border="1">
<tr><th>header cell 1</th><th>header cell 2</th><th>header cell 3</th></tr>
<tr><td rowspan="2">col 1 row 1</td><td>col 2 row 1</td><td>col 3 row 1</td></tr>
<tr><td>col 2 row 2</td><td>col 3 row 2</td></tr>
<tr><td>col 1 row 3</td><td>col 2 row 3</td><td>col 3 row 3</td></tr>
<tr><td>col 1 row 4</td><td>col 2 row 4</td><td>col 3 row 4</td></tr>
</table>
Just like with colspan, if you span a row, you need to remove cells from the row(s) below the rowspan cell. If you span 2 rows, you'll need to remove 1 cell, and if you span 3 rows, you'll need to remove 2 cells.
<table border="1">
<tr><th>header cell 1</th><th>header cell 2</th><th>header cell 3</th></tr>
<tr><td rowspan="3">col 1 row 1</td><td>col 2 row 1</td><td>col 3 row 1</td></tr>
<tr><td>col 2 row 2</td><td>col 3 row 2</td></tr>
<tr><td>col 2 row 3</td><td>col 3 row 3</td></tr>
<tr><td>col 1 row 4</td><td>col 2 row 4</td><td>col 3 row 4</td></tr>
</table>
Spanning Rows and Columns Together
One cell can also span both rows and columns in a table.
<table border="1">
<tr><th>header cell 1</th><th>header cell 2</th><th>header cell 3</th></tr>
<tr><td rowspan="2" colspan="2">col 1 row 1</td><td>col 3 row 1</td></tr>
<tr><td>col 3 row 2</td></tr>
<tr><td>col 1 row 3</td><td>col 2 row 3</td><td>col 3 row 3</td></tr>
<tr><td>col 1 row 4</td><td>col 2 row 4</td><td>col 3 row 4</td></tr>
</table>
Remember that table cells can only span in a rectangular shape, so if you span 3 columns and 2 rows, the cell will take up all 3 columns in both rows - not just the first row.
|
|
|
|
neha
Marketing Executive
Joined:
Mon Aug 24, 2009 10:57 pm
Beans: 767
In Bank: 10965
College: IET
Degree: B.E
Position: Teacher
|
|
Sun Sep 27, 2009 6:49 pm
|
Post subject: Button Tag Examples
Button Tag Examples
Examples of How the <button> Tag Works
Return to the <button> Tag Information Page
Button with an Image
<form action="#">
<button type="submit" name="button1" value="clicked">
<img src="cecb2.gif" width="32" height="32" alt="submit" border="0" />
</button>
</form>
Return to the <button> Tag Information Page
Button with Text
Submit
<form action="#">
<button type="submit" name="button1" value="clicked">
Submit
</button>
</form>
Return to the <button> Tag Information Page
|
|
|
|
neha
Marketing Executive
Joined:
Mon Aug 24, 2009 10:57 pm
Beans: 767
In Bank: 10965
College: IET
Degree: B.E
Position: Teacher
|
|
Sun Sep 27, 2009 6:53 pm
|
Post subject: Styling Links with CSS
Examples
Use the following CSS to change your link styles.
Change Hover Color
Hold your mouse over this link to see it change color: change hover color
a:hover { color: #0f0; }
Return to Styling Links with CSS
Change Active Color
Click and hold your mouse on this link to see the active color: change active color
a:active { color: #f00; }
Return to Styling Links with CSS
Change Visited Color
Click on this link, then return to this page and reload and it should change from blue to pink. If you've already been to this page, it will be pink right now: change visited color
a:visited { color: #f0f; }
Return to Styling Links with CSS
Change Hover, Active, and Visited Colors
This link will have a hover, active, and visited link color set on it: change all of them
a:link { color: #00f; }
a:hover { color: #0f0; }
a:active { color: #f00; }
a:visited { color: #f0f; }
A Link with a Bullet Icon
This link will have an icon beside it: link with an icon
a {
padding: 0 2px 1px 15px;
background: #fff url(ball.gif) left center no-repeat;
color: #c00;
}
The Bullet Icon Changes on Hover and Active
Hover over the link and activate the link to see the bullet icon change: hover and active icon
a { padding: 0 2px 1px 15px; color: #c00; }
a:link { background: #fff url(ball.gif) left center no-repeat; }
a:hover { background: #fff url(ball2.gif) left center no-repeat; }
a:active { background: #fff url(ball3.gif) left center no-repeat; }
Style Borders to Create Buttons Out of Links
button 1
a {
border: 4px outset;
padding: 2px;
text-decoration: none;
}
Return to Styling Links with CSS
Button with Colored Borders
button 2
a {
border-style: solid;
border-width : 1px 4px 4px 1px;
text-decoration : none;
padding : 4px;
border-color : #69f #00f #00f #69f;
}
|
|
|
|
neha
Marketing Executive
Joined:
Mon Aug 24, 2009 10:57 pm
Beans: 767
In Bank: 10965
College: IET
Degree: B.E
Position: Teacher
|
|
Sun Sep 27, 2009 7:27 pm
|
Post subject: Ways to Submit Your Forms
HTML forms are an advanced way to add dynamic aspects to your site. You can solicit questions and answers from your readers and provide them with additional information from databases and other sources. There are a number of tags you can use to build your HTML forms. (See the sidebar for more articles on form tags.) Once you've built your form, there are several ways you can have your readers submit their data to the server.
<input type="submit">
This is the most common method of getting data to the server. But it can be very plain looking and hard to customize to a site
<input type="image">
Using an image makes it very easy to make your submit button fit with the style of your site. But some customers don't recognize it as a submit button.
<input type="button">
The button tag gives a lot of the same options as the image tag, but looks more like the standard submit type. But, it doesn't work well with all browsers, and requires JavaScript to activate.
The <input type="submit" /> tag is really easy to use. In fact, <input type="submit" /> is all you need. If you want to change the default text, simply add a value="text here" attribute. Such as <input type="submit" value="Click Here" />
Use an Image to Submit
The submit button in a form can be of type="image" to use that image as your submit button. This type of button acts like an image map and sends the coordinates that were clicked to the server, as well as the name and value of the button.
Using an image for your submit button is a great way to integrate your form seamlessly into your site. You can make your submit button say what you want it to say. It is like an image on your site.
The biggest drawback to using an image as a submit button is how your readers respond to it. It is often not apparent that the image is what should be clicked to submit the form. This is true even for experienced Web surfers.
Usage:
<input name="button name" type="image" src="location of image" alt="image alt text" />
The Button Tag
A new form tag that came in with HTML 4.0 is the <button> tag. This tag allows you to define a submit button that is completely controlled by JavaScript or another client-side scripting agent.
Some of the nice features of this tag are that it can contain content like text and images. The closing </button> tag is required.
If you build a form that you want to require the use of JavaScript, you can use the button tag (with type="button") to submit the form results to a JavaScript validation script (see my article on Form Validation) When the form has validated correctly, then you send the form elements to the CGI.
**** NOTE *****
This tag is only compatible with Netscape 4.0 and I.E. 3.0 and 4.0.
Usage:
<button name="button name" value="submit" type="submit"> <img src="location of image" alt="image alt text"> </button>
|
|
|
|
neha
Marketing Executive
Joined:
Mon Aug 24, 2009 10:57 pm
Beans: 767
In Bank: 10965
College: IET
Degree: B.E
Position: Teacher
|
|
Sun Sep 27, 2009 7:28 pm
|
Post subject: How do you change the background color of a table?
Question: How do you change the background color of a table?
Answer:
The attribute bgcolor will change the background color of the table, the current table row, or the current table cell. But the bgcolor attribute is deprecated in favor of style sheets. The better way to change the background color is to add the style property background-color to the table, row, or cell tag.
<table style="background-color: #ff0000;">
<tr style="background-color: yellow;">
<td style="background-color: #000;">
Or you can set the styles in a style sheet in the head of your document or an external style sheet.
table { background-color: #ff0000; }
tr { background-color: yellow; }
td { background-color: #000; }
The best way to set the background color on a column is to create a style class and then assign that class to the cells in that column.
The CSS:
td.blueCol { background-color: blue; }
The HTML:
<table>
<tr><td class="blueCol">cell 1</td><td>cell 2</td></tr>
<tr><td class="blueCol">cell 1</td><td>cell 2</td></tr>
</table>
|
|
|
|
neha
Marketing Executive
Joined:
Mon Aug 24, 2009 10:57 pm
Beans: 767
In Bank: 10965
College: IET
Degree: B.E
Position: Teacher
|
|
Sun Sep 27, 2009 7:30 pm
|
Post subject: Thoughts on HTML Email
What is HTML email?
These days, most email is HTML email. If you put colors or bold text in your email messages, 9 times out of 10 you'll be sending HTML email. So asking how to write HTML email is challenging to answer - the simple answer is "open up your email client and start typing".
I've been getting a bunch of comments from my post about HTML email asking me to explain what it is and how to do it. Here are some tips regarding HTML email that might help clarify things for you:
If you don't know if you're using HTML email, chances are, unless you're using a very old email client, you are sending HTML email.
Most modern email clients like Outlook, Eudora, Yahoo! Mail, Hotmail, Gmail, and Thunderbird are set up to send email as HTML unless you change your settings. The only exception to this is UNIX text email clients like Pine and Elm - and you can send HTML email with those, but you would know you were doing it.
In those same clients, any time you bold the text in your email, it's sent as HTML.
HTML is used because it's widely understood by many email clients. This is also true if you use background images, embed pictures, or change the colors of your text. This is usually done with HTML.
It can be very difficult, if not impossible, to write HTML in a separate editor, and then send that as "HTML email".
Most email clients are not built to support that. Most email clients expect you to write your email right in the client - so they have buttons for "bold" and "italics" and a few other options like bullets, indenting and images.
Most of the time, when people think of HTML email, they envision an HTML editor like Dreamweaver or FrontPage where they can design and compose their email messages. In general, this doesn't exist.
Instead, as I mentioned above, you have to use the editor built into the client which may or may not have the styles and functions you want and may or may not send your message as HTML.
As a last resort, you can write your email as HTML in your HTML editor, and then attach it to the message.
Some email clients will then open that attachment in the message window, and so it will appear as an HTML message. But some won't. Personally, I don't use HTML email for my work or personal messages. But you can do what you like. If you really must write HTML email, and don't want to use your email client to do so, then you can read my article Sending HTML Email and the second part that discusses some ways to send the mail in your client. I am not the Email Guide at About.com. Please don't write to me asking about your specific email client. I don't know how to send HTML email in it, because I don't send HTML email.
 
|
|
|
|
Bookmark & Share
Who is online |
Users browsing this forum: No registered users and 0 guests |
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum
|
| |
