ساخت جدول در HTML

درود
<br>

چطوری اون مثلث کوچولو اون بالا سمت راست ایجاد شده ؟

<br>

.bubble:after 
{
	content: "";
	position: absolute;
	top: 15px;
	left: 405px;
	border-style: solid;
	border-width: 8px 0 8px 15px;
	border-color: rgba(221, 238, 248, 0) #DDEEF8;
	display: block;
	width: 0;
	z-index: 1;
}

<br> > چطوریه که وقتی پیام نوشتاری زیاد بود ،میره سطر بعد و جدول رو از پایین دراز میکنه ؟ <br> `word-break: break-all;` <br> > چطوری جای اون ساعت ها عوض نمیشه ؟ <br> وقتی که width رو تعیین کنی و word-break: break-all; بذاری. <br> > چطوریه که توی پیام آخری ساعتِ تشخیص داده و اومده پایین؟ <br> `vertical-align: bottom;`

یه چیزی شبیه همون البته با راههای مختلف میشه چنین چیزی درست کرد بدون استفاده از جدول هم میشه.

<style>
body {
	background: #9B9171;
}

#speech-cont {
	width: 100%;
	font: 13px tahoma;
	padding: 5px;
}

#speech-cont tr td {
	padding: 5px;
}

#speech-cont tr td:first-child {
	width: 85%;
	word-break: break-all;
}

#speech-cont tr td:last-child {
	vertical-align: bottom;
}

#speech-cont tr td {
	border-bottom: 1px solid #E4E1E1;
}

#speech-cont tr:last-child td {
	border-bottom: none;
}

.bubble {
	position: relative;
	width: 405px;
	padding: 0px;
	background: #DDEEF8;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}

.bubble:after 
{
	content: "";
	position: absolute;
	top: 15px;
	left: 405px;
	border-style: solid;
	border-width: 8px 0 8px 15px;
	border-color: rgba(221, 238, 248, 0) #DDEEF8;
	display: block;
	width: 0;
	z-index: 1;
}
</style>

<div class="bubble">
<table id="speech-cont">
<tbody>
<tr>
<td>hello</td>
<td>20:00</td>
</tr>
<tr>
<td>hello</td>
<td>20:00</td>
</tr>
<tr>
<td>helloooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</td>
<td>20:00</td>
</tr>
</tbody>
</table>
</div>

دمت گرم داداش، اگه بخوام اون مثلثه بیاد سمت چپ چی؟
و راستی اگه بخوام کناره اون مثلثه یه عکس 64x64 هم بیاد چیکار کنم؟(یعنی هر بار مثلثه وجود داشت بیاد)

<br> > دمت گرم داداش، اگه بخوام اون مثلثه بیاد سمت چپ چی؟ و راستی اگه بخوام کناره اون مثلثه یه عکس 64x64 هم بیاد چیکار کنم؟(یعنی هر بار مثلثه وجود داشت بیاد) <br> 1:

.bubble:after {
content: "";
position: absolute;
top: 15px;
right: 405px;
border-style: solid;
border-width: 8px 15px 8px 0px;
border-color: rgba(221, 238, 248, 0) #DDEEF8;
display: block;
width: 0;
z-index: 1;
}

2: background-image بذار.
البته نمیشه خوب نمایش داد میشه بگی واسه چی میخوای؟
مثال:

background: url('http://www.softafzar.net/images/misc/im_yahoo.gif') no-repeat center center;

ممنون،
واسه مسنجر !!!
با استفاده از کدهایی که دادی میشه به زیبایی چت فرم ساخت :دی
اما یه بدی داره اونم اینه که اون مثلثه رو توی چت فرم نشون نمیده و اصلا اشکالی نداره ، چون با گذاشتن این خط کد ، عکس دقیقا وسط اولین پیام میوفته>
[CSHARP]

<tbody><center><img src="http://www.softafzar.net/images/misc/im_yahoo.gif" /></center><tr><td> [/CSHARP]

ممنونم