Talk:Table (HTML)

What to include in this page/article ?

This article is to contain/display info on the HTML/CSS/XHTML table. As info on wiki table can be found in Help:Table, this page will contain info on html table mostly, equivalent wiki table code can be placed too. But please focus on real / actual HTML/CSS/XHTML table. Thanks. ~ Tarikash.

The wiki code need some introduction in the text. And some of the links are cross-namespace and might need to be reworked it this is an encyclopedia article rather than a how-to page --Henrygb 01:24, 24 September 2006 (UTC)[reply]

How to display HTML Table Codes ?

HTML code displayed at the left side generates the right side table:

<table border="5" cellspacing="5" cellpadding="2"> <tr> <td> <img src="gnome-system.png" /> </td> </tr> <tr> <td> Computer </td> </tr> <tr> <td> Processor Speed: 2.5 GHz </td> </tr> </table>

Computer

Processor Speed: 2.5 GHz

To display the above, left side code, on a web page, use (or enter) below codes in the edit box when you're editing web page, by replacing the < (less than sign) with < (HTML decimal code) or, replacing it with < (HTML entity code) and replace only those / (forward slash) which are before the > (greater than) symbol with /. Place the codes inside the <tt>...</tt> HTML tags, to display the codes with a fixed width text/font, for easier reading. For more on HTML decimal, hexadecimal codes, please see Windows Alt codes. HTML tag <br /> is used, to display (or bring) next codes, starting from the next line.

<tt> <table border="5" cellspacing="5" cellpadding="2"> <br />  <tr> <td> <img src="gnome-system.png" /> </td> </tr> <br />  <tr> <td> Computer </td> </tr> <br />  <tr> <td> Processor Speed: 2.5 GHz </td> </tr> <br /> </table> </tt>

Above codes are using   HTML entity codes to display space characters. If you want to start a line after one or more spaces, then use   (or,  ) by replacing each space character.

How to display blue color dashed border around the codes ?

To create a blue color dashed border around the codes, (see below,) specially where <tt> and <br /> tags were used, in those cases, HTML tags <p> with the below mentioned CSS (style sheet) properties can be used.

<p style="padding: 1em; border: 1px dashed #2f6fab; color: Black; background-color: #f9f9f9; line-height: 1.1em;"> <tt> <table border="5" cellspacing="5" cellpadding="2"> <br />  <tr> <td> <img src="gnome-system.png" /> </td> </tr> <br />  <tr> <td> Computer </td> </tr> <br />  <tr> <td> Processor Speed: 2.5 GHz </td> </tr> <br /> </table> </tt> </p>

HTML tag <pre> uses these properties, to display the blue color dashed border around the text or code line(s). These properties are pre-defined in the http://en.wikipedia.org/style/monobook/main.css style sheet file. When any user uses, a space before any text line(s) in the edit box with the source codes of web page(s), then <pre> HTML tag is used for that appearance.

How to display Wiki Table markup Codes ?

Wiki table markup code displayed at the left side generates the right side table. For more on wiki table markup codes, please see Help:Table.

{| border="5" cellspacing="5" cellpadding="2" | [[Image:gnome-system.png]] |- ! Computer |- | Processor Speed: 1.8 GHz |}

Computer

Processor Speed: 1.8 GHz

To display the above, left side code, on a web page, use (or enter) below codes in the edit box when you're editing web page, by replacing each | (pipe symbol) with | (HTML decimal code), replace each ! (exclamation mark) with !, replace { (beginning curly/second bracket) with { and replace } (closing curly/second bracket) with }. Place the codes inside the <tt>...</tt> HTML tags, to display the codes with a fixed width text/font, for easier reading. For more on HTML decimal, hexadecimal codes, please see Windows Alt codes. To display the wiki image markup code, replace [ (beginning square/third bracket) with [ and replace ] (closing square/third bracket) with ]. HTML tag <br /> is used, to display (or bring) next codes, starting from the next line.

<tt> {| border="5" cellspacing="5" cellpadding="2" <br /> | [[Image:gnome-system.png]] <br /> |- <br /> ! Computer <br /> |- <br /> | Processor Speed: 1.8 GHz <br /> |} </tt>

Page layout needs to be corrected

When viewing this article in Mozilla Firefox, the page is more or less unreadable having lines much longer than the width of my display. __meco 12:31, 27 September 2006 (UTC)[reply]

This happened, because, the bot "WinBot" has done WRONG EDITING. Codes used here are for a reason, to display each code or the resulted appearance, properly. So i've reverted it back to the previous state. And have added back few corrections done in this period, by other users. ~Tarikash 18:48, 29 September 2006 (UTC).[reply]

I fixed one section earlier today. The use <pre> and </pre> makes it easier to see the sample code: ADH 15:42, 27 September 2006 (UTC)[reply]