web, trends and thinking

It just another weblog :P

[tip] table data, border and textarea

leave a comment »

table with data cell at top (for column <td> tag)
– นำข้อมูลในตารางให้อยู่ด้านบน ถึงแม้อีกคอลัมน์จะมีข้อความยาวกว่า
– เป็นการจัดรูปในแนวตั้ง

vertical-align
<td style=”vertical-align:top”></td>

table column border (= <td> tag)
– ขนาดของเส้นขอบคอลัมน์

border-width, border-[position]-width
<td style=”border-top-width: 0px”></td>

textarea with full cell
– จัดรูปให้อยู่เต็มพื้นที่ ทั้ง IE, Firefox ในที่นี้คือ textarea

width: 100%
<textarea rows=”5″ style=”width:100%”></textarea>

EXAMPLE:

BEFORE

AFTER

CSS

<style type=”text/css”>
<!–
td {
font: 12px verdana;
border-width: 1px;
border-style: solid;
border-color: #000000;
padding: 3px;

text-align: center;
vertical-align:top
}
–>
</style>

HTML

<table width=”300″ cellpadding=”0″ cellspacing=”0″>
<tr>
<td colspan=”2″ bgcolor=”lightpink” style=”border-right-width:0px” width=”50″>
<font color=”black”>
0<br/>1<br/>2<br/>3<br/>4<br/>
5<br/>6<br/>7<br/>8<br/>9<br/>
</font>
</td>
<td colspan=”2″ style=”border-left-width:0px” width=”250″>
about me <br/>
<textarea rows=”5″ style=”width:100%“></textarea>
</td>
</tr>
</table>

tip think from:

Written by แมวน้ำขั้วโลก

พฤษภาคม 27, 2010 ที่ 1:50 am

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s

%d bloggers like this: