ساخت جدول در HTML

HTML/XHTML

توسط thearrow در 4 سال پیش
0 913 4 4 سال پیش
thearrowdanielrezamax
0

سلام ، کد ساخت جدولی مثل جدول زیر چیه ؟

چطوری هلال شده ؟ چطوری اون مثلث کوچولو اون بالا سمت راست ایجاد شده ؟ چطوریه که وقتی پیام نوشتاری زیاد بود ،میره سطر بعد و جدول رو از پایین دراز میکنه ؟ یعنی این پیام رو >

salaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaamaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

چطوری جای اون ساعت ها عوض نمیشه ؟ چطوریه که توی پیام آخری ساعتِ تشخیص داده و اومده پایین؟

ممنون میشم اگه کمک کنید

0

درود

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


.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;
}

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

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

0

> دمت گرم داداش، اگه بخوام اون مثلثه بیاد سمت چپ چی؟ و راستی اگه بخوام کناره اون مثلثه یه عکس 64x64 هم بیاد چیکار کنم؟(یعنی هر بار مثلثه وجود داشت بیاد)
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;
0

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

<tbody><center></center><tr><td> [/CSHARP]

ممنونم

خوش آمدید

برای طرح سوال، ایجاد بحث و فعالیت در سایت نیاز است ابتدا وارد حساب کاربری خود شوید. در صورتی که هنوز عضو سایت نیستید میتوانید در عرض تنها چند ثانیه ثبت نام کنید.

لطفا ابتدا لاگین کنید