Cách tŕnh bày một “bảng” (“table”) bằng ngôn ngữ HTML
Cách tŕnh bày một “bảng” (“table”) bằng ngôn ngữ HTML
Đă từ lâu, bà con ḿnh trên diễn đàn đă biết đánh gơ rất đẹp mắt, như tŕnh bày chữ màu, chữ đậm nét, chữ nghiêng,v.v… khiến cho h́nh thức cuả diễn đàn này trông “bắt mắt” hơn, sinh động hơn, và thực tế là dễ đọc hơn, thậm chí c̣n lôi cuốn được chú ư cuả người đọc vào một điểm nào đó trong bài đăng cuả ḿnh…
Nay xin giới thiệu một ứng dụng nho nhỏ khác cuả ngôn ngữ HTML trong việc lập một “bảng” (“table”), điển h́nh như một mẫu tờ lịch tháng dưới đây:
Lịch Tháng 2 năm 2012
Chủ Nhật
Thứ Hai
Thứ Ba
Thứ Tư
Thứ Năm
Thứ Sáu
Thứ Bảy
29/1
30/1
31/1
1
2
3
4
5
6
7
8
9
10
11
..........
Trong mẫu này, tôi sẽ lần lượt giới thiệu từng thành tố (tag) cuả một bảng, như thế nào là “chiều rộng cuả bảng” (table width), thế nào là một ô (cell), một dữ liệu (data), một hàng ngang (row), một cột dọc (column), một đường viền (border) v.v...
Tuởng cũng nên nói, ngôn ngữ HTML được soạn thảo bằng tiếng Anh, nên bắt buộc ai muốn dùng chút chút HTML, th́ cũng phải biết chút chút tiếng Anh, chứ không dùng tiếng Việt được.
Đến đây, tôi cũng xin phép ban Quản Lư cuả website cho phép anh chị em chúng tôi được “nghịch ngợm” một chút để t́m hiểu về ngôn ngữ HTML, nên nếu vô t́nh gây trở ngại cho thiết kế cuả trang Nhịp Cầu Duyên, xin các “Admin” cứ thẳng tay xoá giùm nhé
Cháu chào bác OT, cháu cám ơn bác OT đă mở topic, đề nghị pác Admin đừng có xóa vội nghen, để chúng em học xong rùi hăy xóa ạ......hihi.
ototot
member
REF: 626408
02/07/2012
Như đă nói, thực t́nh là tôi chẳng muốn đem đề tài HTML vào tiết mục chuyện vui cười cuả bạn mariposa nên mới mở ra tiết mục này.
Cũng thực t́nh mà nói, tôi chẳng có tham vọng học ngôn ngữ HTML, v́ đâu có làm web, mà chỉ lướt web cho vui thôi! Vậy nói chi “dạy” ai học ngôn ngữ này!
Và cũng đúng như bác hưutrínon đă nói, ḿnh vui chơi th́ ... đụng đâu nói đó, chứ muốn học HTML th́ phải ghi tên đến trường lớp mà học, th́ mới mong làm được cho có bài bản!
Vậy th́ ở đây, ta chỉ cần học để làm được một cái bảng, từ đó ứng dụng đánh gơ những bài song ngữ...
Xin đăng lại câu chuyện vui cuả mariposa như ở tiết mục kia, để lấy nó mà thuyết minh cho cách làm!
TRIỆU PHÚ
Một phụ nữ nói với bạn:”Chính tôi là người làm chồng tôi thành một triệu phú.”
“Và ông là ǵ trước khi bạn cưới ông?” người bạn hỏi.
Người phụ nữ đáp:”Một tỉ phú...”
MILLIONAIRE
A woman was telling her friend, "It is I who made my husband a millionaire."
"And what was he before you married him?" asked the friend.
The woman replied, "A billionaire..."
Để đánh gơ mẩu chuyện song ngữ trên, xin ai muốn biết, th́ hăy theo từng bước hướng dẫn dưới đây:
Bước 1: Hăy đánh cái khung sườn căn bản như sau (chưa cần hiểu các chi tiết làm ǵ!):
Bước 2:Ngay kế tiếp cái chữ td thứ nhất mà ta thấy nó ở trong 2 dấu <>, hăy chép và dán bài tiếng Việt vào (Dĩ nhiên ta chọn border=0, nghiă là không có những đường kẻ; font color=blue cho nó có màu xanh, size=2 cho nó nhỏ bớt đi, nếu không chữ nó sẽ mặc định mà cở size=3 th́ hơi lớn quá...)
Bước 3: Hăy chép và dán phần tiếng Anh vào sau chữ td thứ nh́, như sau:
Thế là xong, và sau cùng chỉ cần bấm vào gởi đi là hoàn tất
Một phụ nữ nói với bạn:”Chính tôi là người làm chồng tôi thành một triệu phú.”
“Và ông là ǵ trước khi bạn cưới ông?” người bạn hỏi.
Người phụ nữ đáp:”Một tỉ phú...”
MILLIONAIRE
A woman was telling her friend, "It is I who made my husband a millionaire."
"And what was he before you married him?" asked the friend.
The woman replied, "A billionaire..."
code copy
<br>
<table width="700px" cellspacing="2" <br>
cellpadding="0" border= 1px ;solid black><br>
<tbody><tr><td><font size="2" color="blue"><br>
Trieu phu<br/><br>
Mot phu nu noi voi ban :”Chinh toi lam nguoi <br>
chông toi thanh mot trieu phu.”<br/><br>
“Và ong lam gi truoc khi ban cuoi toi?” <br>
Nguoi an hoi.<br/><br>
Nguoi phu nu dap:”Mot trieu phu..” <br>
</font></td><td><font size="2" color="red"><br>
MILLIONAIRE<br/><br>
<br>
A woman was telling her friend, <br>
"It is I who made my husband a millionaire."<br/><br>
"And what was he before you married him?" <br>
asked the friend.<br/><br>
The woman replied, "A billionaire..." <br>
</font></td></tr></tbody></table><br/><br>
thui hết giờ ăn trưa rùi
đi mần thui
ototot
member
REF: 626414
02/07/2012
Như tôi đă nói, chúng ḿnh không làm web. Vậy khi nào chơi với ngôn ngữ HTML, cái ǵ đơn giản, dễ hiểu th́ làm; cái ǵ khó, rắc rối … th́ thôi!
Bây giờ giả sử tôi có cái “joke” dưới đây, muốn tŕnh bày thành 2 cột, dạng song ngữ, th́ hăy làm cho thật đơn giản, tức là bỏ qua đi những thứ không cần thiết như cellpadding, cellspacing, border; những chữ tắt như br
TRIỆU PHÚ
Một phụ nữ nói với bạn:”Chính tôi là người làm chồng tôi thành một triệu phú.”
“Và ông là ǵ trước khi bạn cưới ông?” người bạn hỏi.
Người phụ nữ đáp:”Một tỉ phú...”
MILLIONAIRE
A woman was telling her friend, "It is I who made my husband a millionaire."
"And what was he before you married him?" asked the friend.
The woman replied, "A billionaire..."
Tôi sẽ chỉ viết border=0, v́ không muốn có đường viền; “td” là viết tắt cuả “table data” = “dữ liệu cuả bảng” th́ phải viết, và hết data th́ cũng phải viết “/td” (Ở đây, td thứ 1 chính là đoạn văn tiếng Việt, và td thứ 2 là đoạn văn tiếng Anh); “tr” là viết tắt cuả “table row” = “hàng ngang cuả bảng” th́ cũng phải viết, và cuối hàng ngang th́ cũng phải viết “/tr”; “table” là mở bảng, th́ cũng phải đỏng nó lại bằng “/table”. Trong “table” có ghi bề rộng là 100% (width=100), tức là đúng như thiết kế cuả trang mạng Nhịp Cầu Duyên.
Đơn giản vậy thôi, và hăy đánh nguyên xi như thế này:
Bây giờ copy và dán đoạn tiếng Việt nhé:
Tiếp theo, bây giờ copy and paste ngay sau cái td thứ nh́, tức là đoạn văn tiếng Anh!
Nhiêu thôi!
Kết quả là:
TRIỆU PHÚ
Một phụ nữ nói với bạn:”Chính tôi là người làm chồng tôi thành một triệu phú.”
“Và ông là ǵ trước khi bạn cưới ông?” người bạn hỏi.
Người phụ nữ đáp:”Một tỉ phú...”
MILLIONAIRE
A woman was telling her friend, "It is I who made my husband a millionaire."
"And what was he before you married him?" asked the friend.
The woman replied, "A billionaire..."
Chú thích: Chữ hơi to, có thể dễ dàng làm nhỏ bằng cách ghi font size=2; c̣n màu xanh đỏ sưả lại đâu có khó (ví dụ font color=blue hay font color=red...), phải không?
Thân ái,
mainuong1
member
REF: 626428
02/07/2012
Cảm ơn chú rất nhiều về cách hướng dẫn tŕnh bầy khi viết bài trên Website, năm nay cháu sẽ cố gắng học hỏi thiệt nhiều để khi viết Web được hay và đẹp hơn.
CHÚC CHÚ PHƯƠNG XA LUÔN KHOẺ VUI VẠN SỰ NHƯ Ư TỐT LÀNH ĐỂ GIÚP CHO CÁC BẠN THAM GIA DIỄN ĐÀN ĐƯỢC HỌC HỎI NHIỀU ĐIỀU TỪ CHÚ...!!!
calinhoem
member
REF: 626431
02/07/2012
Cá nhân tôi lười đọc code nên dùng software hay tool họ cho sẵn như ḿ ăn liền vậy, mời bà con ghé vào
Quậy chút nữa
hihi
Link th́ trên web rất nhiều
Song muốn hoc đuợc th́ ít ra phải biết sinh ngữ
củng như những bài hoc th́ cần phải ghi danh member +đóng tiền th́
mới tới nơi tới chốn
đay code của chú Ot chỉ thêm border và viết chu4ưviệt để dễ hiểu
dấu nhỏ hơn < có nghiă trong HTML là chữ less than sign
có thể đánh như sau
&rùi tới lt; hay &#và 60;
dấu lớn hơn >có nghiă trong HTML là chữ greater than sign
đánh như sau
&và gt;
or
&và #62;
nhờ mấy kiểu này nguời ta không cần phải in
như xưa kia
Chú Ot đánh thử đi không cần in đâu
PS: KHI ĐẺ BORDER=1 Là muốn chia ra cho nguời chưa biết dễ xem - thế thôi
Híh́
ototot
member
REF: 626445
02/07/2012
Cảm ơn bác nhà quê đă đồng cảm mà góp ư về html code để đánh bảng, mà thực chất là để ứng dụng mà tŕnh bày đánh gơ cho dễ đọc...
Như tôi cũng đă nói, html nó soạn bằng tiếng Anh, nên xài nó th́ cũng phải biết chút chút tiếng Anh, th́ mới hiểu được những thuật ngữ (terminology) cuả nó, khi tất cả những attribute cuả nó đều viết tắt. Ví dụ th là viết tắt cuả table header, rồi lại có tr là table row, và td là table data, v.v..., rồi lại nói đến những tag với opening tag, closing tag, v.v...
Thực ra, html là chuyên môn cuả những người làm web (web designer), học cho bài bản, và sử dụng cho sâu sắc, chính xác, thích hợp..., là cả một công phu, một nghệ thuật..., chứ đâu phải chỉ cần ... "học lỏm" mà biết xài! (Photoshop cũng vậy, học cho đến nơi đến chốn, chắc đến lúc ... xuống lỗ cũng chưa xong! Chỉ đáng tiếc là dân chơi Photoshop bây giờ hầu hết là mù tịt về các chuyên ngành như hoá học, vật lư học, quang học, đồ hoạ, tạo h́nh, in ấn..., nên nhiều khi chơi Photoshop mà thực ra lại ... phản khoa học, phản nghệ thuật, phản ... Photoshop!)
Trở lại đề tài cuả tiết mục này, tôi chỉ muốn đem ứng dụng một chút xíu về html trong việc tŕnh bày cách đánh gơ bài đăng trên diễn đàn cho "bắt mắt" một chút, coi như giới thiệu ... một hạt cát trong băi sa mạc!
Thân ái,
vitbuocno
member
REF: 626487
02/08/2012
Cháu chào bác OT, em chào Thầy và cả nhà, cháu thực tập với mí câu thơ dzui đây ạ.....hihi
Đêm qua thức đến canh hai
Vừa mới chợp mắt thấy vài giấc mơ
Không gian chỉ có ba chiều
Đàn ông chỉ được phép yêu hai bà
Kiện quan, là việc của dân
Xử dân, là việc rất cần của quan
Mà có cái cháu chưa rơ là cái ǵ, cái cellspacing th́ cháu hiểu là để chia ra các cột, nhưng mà cellpadding th́ để làm ǵ ạ?
ototot
member
REF: 626491
02/08/2012
Đúng như tôi vẫn thường nhận định, Vịt lúc nào cũng chứng tỏ thông minh, sáng dạ..., nên học ǵ cũng nhanh thật!
Về câu hỏi, xin trả lời để tự Vịt suy ra nha!
"Cell" th́ biết rồi, là "tế bào", là "ngăn", là "ô",... có cạnh này tiếp xúc với cạnh kia ở kế bên.
"Pad" là đệm lót, tức là khoảng cách tính bằng "pixel", tính từ món đồ (dữ liệu, data ở trong "cell"), đến cái thành vách cuả "cell" đó; từ đó có thuật ngữ "cellpadding".
Cũng suy ra, "cellspacing" là khoảng cách cũng tính bằng "pixel" giưă "cell" này với "cell" kế cận.
"Cellpadding" và "cellspacing" chỉ quan sát thấy rơ khi có đường viền (border) xung quanh "cell". Border=0 có nghiă là không vẽ đường viền. Border=3 có nghiă là đường viền có nét đậm đo được 3 pixel; số càng lớn, nét càng đậm.
Hăy tự thử làm và tự khám phá thêm, sau khi tôi cho cellpadding=5, cellspacing=10 và border=20 cho những câu thơ cuả Vịt!
Đêm qua thức đến canh hai
Vừa mới chợp mắt thấy vài giấc mơ
Không gian chỉ có ba chiều
Đàn ông chỉ được phép yêu hai bà
Kiện quan, là việc của dân
Xử dân, là việc rất cần của quan
Thân ái,
tennhaque
member
REF: 626502
02/08/2012
Cài ń là rơ nhứt ń
CELLPADDING là khoảng cách từ 1 cái row (table) hay( 1 khung ở trong :Bg chẳng hạn )cho tới cạnh mép lề bên ngoài
(hihi dich tiếng Việt khó á )Nh́n h́nh hiểu liền
khi để CELLPADDING="5"
Café sua
20 ngàn
cà fé đen
10 ngàn
khi để CELLPADDING="25"
Café sua
20 ngàn
cà fé đen
10 ngàn
cellpadding="10"
=
Đêm qua thức đến canh hai
Vừa mới chợp mắt thấy vài giấc mơ
Không gian chỉ có ba chiều
Đàn ông chỉ được phép yêu hai bà
Kiện quan, là việc của dân
Xử dân, là việc rất cần của quan
==
cellpadding="25"
Đêm qua thức đến canh hai
Vừa mới chợp mắt thấy vài giấc mơ
Không gian chỉ có ba chiều
Đàn ông chỉ được phép yêu hai bà
Kiện quan, là việc của dân
Xử dân, là việc rất cần của quan
Dzễ không - đơn giản hơn nấu ḿ gói
vitbuocno
member
REF: 626571
02/09/2012
Cháu chào bác OT, em chào Thầy, cháu làm cũng không được nhanh lắm nhưng v́ bác bảo rất dễ hiểu từ đơn giản tới phức tạp, bác c̣n giải thích từ ngữ tiếng Anh nữa nên cháu mới làm được như vậy ạ...h́ h́. Giờ cháu hiểu cellpadding là ǵ rùi, cháu cám ơn bác đă giải thích thêm cho cháu, em cám ơn Thầy ạ. Cháu thử thực tập phần này với mấy câu thơ vui nữa.
Trung thu là Tết thiếu nhi. Cớ sao người lớn lại đi chơi nhiều. Đi nhiều rồi lại làm liều. Làm liều rồi lại thêm nhiều thiếu nhi.
Mưa rơi ướt áo ướt quần.... Làm sao ướt được tinh thần dân chơi.... Dân chơi sợ ǵ mưa rơi.... Mưa rơi to quá dân chơi đi về ... hehe
Bác OT ui, cháu thấy cái border của bác có mầu xanh th́ làm như thế nào ạ ?
ototot
member
REF: 626579
02/09/2012
Đơn giản lắm, sau khi đánh border=10 th́ đánh tiếp bordercolor=green, sẽ có ngay màu xanh lá.
Dưới đây tôi đánh bordercolor=red nè:
Trung thu là Tết thiếu nhi. Cớ sao người lớn lại đi chơi nhiều. Đi nhiều rồi lại làm liều. Làm liều rồi lại thêm nhiều thiếu nhi.
Mưa rơi ướt áo ướt quần.... Làm sao ướt được tinh thần dân chơi.... Dân chơi sợ ǵ mưa rơi.... Mưa rơi to quá dân chơi đi về ... hehe
CODE Ǹ <br>
<table style="width: 600px; height: 200px; <br>
border-width: thick 10px 10px; <br>
-moz-border-top-colors: none; <br>
-moz-border-right-colors: none; <br>
-moz-border-bottom-colors: none; <br>
-moz-border-left-colors: none; <br>
-moz-border-image: none; <br>
border-style: solid; border-color: <br>
red green blue orange;"><br>
<tbody><tr><td><center><font size="4"> <br>
<b><font color="blue"><br>
<br/>viet o day </font><br>
</tbody></tr></td></table>
Ghi chú
khi copy = cách bôi đen xong th́ phải bỏ mấy cái br đi
v́ khi ghi code Tui fảicho nó xuống hàng ,
EX:
--- 10px; <br>
................bỏ br như trên ...
nên nó ghi nhiều br
nếu không xuống hàng **Th́ hàng chữ chạy dài
sẽ làm topic giản ra
=
viet o day
ototot
member
REF: 626589
02/09/2012
Nhân dịp tôi đang có tiết mục tŕnh bày những đoạn văn song ngữ, để ta đọc được cả nguyên bản lẫn bài dịch, để ta đối chiếu được sự chính xác cuả nguồn tin, để ta trau giồi thêm được kiến thức ngoại ngữ, để ta trao đổi kinh nghiệm dịch thuật, để ta tiếp cận với những tinh hoa cuả văn hoá bốn phương…, ... th́ đây là cơ hội bác LyNhat đă giúp tôi làm chuyện đó, mà tôi vô cùng cảm ơn.
Mời bà con cùng đọc:
You find what you look for in life.
If you look for the good things in life, you will find them.
If you look for opportunities to grow and prosper, you will find them.
If you look for positive, enthusiastic friends and associates who will support you, you will find them.
On the other hand, if you look for ways to cheat, you will cheat.
If you look for ways to justify leaving your spouse, you will find them.
If you look for justifiable reasons to hold a grudge against another person, you will find those, too.
It is a natural tendency of us all to look for things that will justify what we think we need or want.
If you are not living by the foundation stones of honesty, character, integrity, faith, love, and loyalty, you will be drawn to seeking selfish gratification, and that leads to misery and unfulfilled dreams.
Whatever you have will never be enough.
Always look for the good and for ways to help others.
Trên đời, đi kiếm ǵ sẽ t́m được nấy.
Nếu đi kiếm điều lành trên đời, sẽ t́m được điều lành mà làm.
Nếu đi kiếm cơ hội để phát triển và giàu có, cũng sẽ t́m được cơ hội.
Nếu muốn kiếm bạn và đối tác tích cực, nhiệt t́nh, để họ ủng hộ ḿnh, sẽ t́m được những người đó.
Ngược lại, nếu đi kiếm sự lường đảo, sẽ đi lường đảo.
Nếu đi kiếm cớ để bỏ vợ bỏ chồng, sẽ t́m được cớ để bỏ.
Nếu đi kiếm lư do viện ra được để thù ghét ai, th́ cũng sẽ t́m ra ngay lư do.
Chúng ta ai cũng có khuynh hướng tự nhiên đi kiếm những thứ mà ta nghĩ sẽ bào chưă được những ǵ ta cần hay muốn.
Nếu ta không sống trên nền tảng vững chắc là lương thiện, tính tốt, trung trực, niềm tin, t́nh yêu, và chung thuỷ, th́ sẽ bị cuốn hút đi t́m những thoả măn ích kỷ, từ đó đi đến khổ đau và những mộng ước tan vỡ.
Có bấy nhiêu cũng sẽ là chưa đủ.
Hăy luôn luôn đi t́m những điều lành và phương cách giúp người
Cháu chào bác OT, em chào Thầy ạ, em cám ơn Thầy đă giải thích thêm cho em ạ.....h́ h́, bác OT ui, hóa ra đấy là từ khóa bordercolor ạ, bài dịch hay quá, cháu có đọc qua rùi mà c̣n đang lần ṃ từ ngữ nên chưa hiểu hết, may quá bác đă dịch ra rồi, đúng là việc tŕnh bày song ngữ nh́n dễ hiểu và đẹp mắt nữa ạ, ông Zig Ziglar viết đúng quá, ư nghĩa của nó có lẽ cũng có một phần nào đó giống câu mà các cụ nhà ḿnh đă đúc kết sau rất nhiều năm: "ngưu tầm ngưu, mă tầm mă" ạ.
Cháu cám ơn bác, cháu chúc bác mạnh khỏe và một cuối tuần thiệt là dzui dzẻ ạ.
