Talk:Table (HTML)

This article was nominated for deletion on 20 November 2006. The result of the discussion was Redirect to HTML element.

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 keycodes. 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://wiki.riteme.site/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 keycodes. 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, across different web browser software. 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]

That is right, but, it also forces you to use the left-right scroller bar to view the codes which goes beyond the web-browser window's width. To reduce this, <ttstyle="border: 1px dashed #2f6fab; background-color: #f9f9f9; padding: 1px;"><tt> and <ttstyle="border: 1px dashed #2f6fab; background-color: #f9f9f9; padding: 1px;"><br /> are used here, so that, codes can fit into any width, whatever the viewer is using. ~Tarikash 18:57, 29 September 2006 (UTC).[reply]

cleanup

cleanup : many elements are not defined