ساخت جدول در HTML

HTML

توسط thearrow در 6 سال پیش
0 19.9k 4 6 سال پیش
thearrow daniel rezamax
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]

ممنونم

خوش آمدید

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