User Name Password Register
DaniWeb IT Discussion Community
All
What is DaniWeb IT Discussion Community?
You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 401,999 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,523 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our HTML and CSS advertiser: Lunarpages Web Hosting
Views: 511 | Replies: 4
Reply
Join Date: Jan 2008
Posts: 29
Reputation: vijukumar is an unknown quantity at this point 
Rep Power: 1
Solved Threads: 0
vijukumar vijukumar is offline Offline
Light Poster

Help table using CSS and Xhtml

  #1  
Mar 19th, 2008
Please some body tell me how to display a table with two rows only using <div> tags in Xhtml using CSS. if you pass me the code it will be a great help. please dont tell me again how to desing using <tr> and <td> tags. want it in <div> tags only
AddThis Social Bookmark Button
Reply With Quote  
Join Date: Feb 2008
Location: bangalore
Posts: 19
Reputation: aravelli is an unknown quantity at this point 
Rep Power: 1
Solved Threads: 2
aravelli aravelli is offline Offline
Newbie Poster

Re: table using CSS and Xhtml

  #2  
Mar 19th, 2008
try this link

http://www.dev-archive.net/articles/table-in-css.html


i have used the code given by this site and is working fine.


i hope this will work for you.
aravelli ramesh
Reply With Quote  
Join Date: Feb 2008
Location: bangalore
Posts: 19
Reputation: aravelli is an unknown quantity at this point 
Rep Power: 1
Solved Threads: 2
aravelli aravelli is offline Offline
Newbie Poster

Solution Re: table using CSS and Xhtml

  #3  
Mar 19th, 2008
otherwise use this code


  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3. <HEAD>
  4. <TITLE> New Document </TITLE>
  5. <META NAME="Generator" CONTENT="EditPlus">
  6. <META NAME="Author" CONTENT="">
  7. <META NAME="Keywords" CONTENT="">
  8. <META NAME="Description" CONTENT="">
  9. <style type="Text/css">/* The specific style rules used to suggest rendering */
  10. /* for the CSS table design example, starts here */
  11. *{
  12.  
  13. margin-top: 0ex;
  14.  
  15. margin-right: 0ex;
  16.  
  17. margin-bottom: 0ex;
  18.  
  19. margin-left: 0ex;
  20.  
  21. padding-top: 0ex;
  22.  
  23. padding-right: 0ex;
  24.  
  25. padding-bottom: 0ex;
  26.  
  27. padding-left: 0ex;
  28.  
  29. font-family: "Trebuchet MS",sans-serif;
  30.  
  31. }
  32.  
  33. DIV.base-layer {
  34. background: none #cc9966; border: solid #333333 1px; color: #000000;
  35. margin: 0.5em 12px 0.5em 12px; padding: 0; text-align: center; width: auto;
  36. }
  37.  
  38. DIV.table-row {
  39. background: none #ffffcc; border: solid #000000 1px; color: #000000;
  40. margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;
  41. padding: 0; text-align: center; width: 96%;
  42. }
  43.  
  44. /* Style rules for the 3 x 2 table example */
  45.  
  46. DIV.left-container2 {
  47. border: none; float: left; margin: 0; padding: 0; width: 50%;
  48. }
  49.  
  50. DIV.right-container2 {
  51. border: none; float: right; margin: 0; padding: 0; width: 50%;
  52. }
  53.  
  54. /* Rules in detail that is used to suggest rendering for the */
  55. /* Nobel price winner table example. I still use some of the */
  56. /* generic rules as found above and below, but still.. */
  57.  
  58. DIV.left-container13 {
  59. border: none; float: left; margin: 0; padding: 0; width: 20%;
  60. }
  61.  
  62. DIV.left-container23 {
  63. border: none; float: left; margin: 0; padding: 0; width: 35%;
  64. }
  65.  
  66. DIV.right-container13 {
  67. border: none; float: right; margin: 0; padding: 0; width: 45%;
  68. }
  69.  
  70. /* Rules in detail that is used to suggest rendering for the 10 by 5 int. */
  71. /* product table example. I still use some of the generic rules as found */
  72. /* above and below, but still.. */
  73.  
  74. DIV.left-layer11 {
  75. border: none; float: left; margin: 0; padding: 0; width: 9%;
  76. }
  77.  
  78. DIV.right-layer11 {
  79. border: none; float: right; margin: 0; padding: 0; width: 10%;
  80. }
  81.  
  82. /* Watch out for this DIV... rule, it appears every now and then */
  83.  
  84. DIV.space-line {
  85. clear: both; margin: 0; padding: 0; width: auto;
  86. }
  87.  
  88. /* Some rules for captions, headers and running text */
  89.  
  90. H4.table-caption {
  91. background: transparent; color: #3333cc; font-family: sans-serif;
  92. font-size: 1em; font-style: italic; font-weight: bold; margin: 0;
  93. padding: 0.3em; text-align: center; width: auto;
  94. }
  95.  
  96. H5.colhdr {
  97. background: none #ffffcc; border: solid #3333cc 1px; color: #993333;
  98. font-family: sans-serif; font-size: 1em; font-style: italic;
  99. font-weight: normal; margin: 0; padding: 0.3em 0.3em 0 0.3em;
  100. text-align: center; width: auto;
  101. }
  102.  
  103. P.text {
  104. border: solid #3333cc 1px; margin: 0; padding: 0.3em 0.3em 0 0.3em;
  105. font-style: normal; font-size: 1em; text-align: center; text-indent: 0;
  106. width: auto;
  107. }
  108.  
  109. /* End of layer specific style rule set */
  110. </style>
  111. </HEAD>
  112.  
  113. <BODY><div class="base-container base-layer">
  114. <h4 class="table-caption">
  115. A 10 by 4 integer product table
  116. </h4>
  117. <div class="table-row">
  118. <div class="left-layer11">
  119. <h5 class="colhdr">
  120. x
  121. </h5>
  122. </div>
  123. <div class="left-layer11">
  124. <h5 class="colhdr">
  125. 1
  126. </h5>
  127. </div>
  128. <div class="left-layer11">
  129. <h5 class="colhdr">
  130. 2
  131. </h5>
  132. </div>
  133. <div class="left-layer11">
  134. <h5 class="colhdr">
  135. 3
  136. </h5>
  137. </div>
  138. <div class="left-layer11">
  139. <h5 class="colhdr">
  140. 4
  141. </h5>
  142. </div>
  143. <div class="left-layer11">
  144. <h5 class="colhdr">
  145. 5
  146. </h5>
  147. </div>
  148. <div class="left-layer11">
  149. <h5 class="colhdr">
  150. 6
  151. </h5>
  152. </div>
  153. <div class="left-layer11">
  154. <h5 class="colhdr">
  155. 7
  156. </h5>
  157. </div>
  158. <div class="left-layer11">
  159. <h5 class="colhdr">
  160. 8
  161. </h5>
  162. </div>
  163. <div class="left-layer11">
  164. <h5 class="colhdr">
  165. 9
  166. </h5>
  167. </div>
  168. <div class="right-layer11">
  169. <h5 class="colhdr">
  170. 10
  171. </h5>
  172. </div>
  173. <div class="space-line">
  174. </div>
  175. </div>
  176. <div class="table-row">
  177. <div class="left-layer11">
  178. <h5 class="colhdr">
  179. 1
  180. </h5>
  181. </div>
  182. <div class="left-layer11">
  183. <p class="text">
  184. 1
  185. </p>
  186. </div>
  187. <div class="left-layer11">
  188. <p class="text">
  189. 2
  190. </p>
  191. </div>
  192. <div class="left-layer11">
  193. <p class="text">
  194. 3
  195. </p>
  196. </div>
  197. <div class="left-layer11">
  198. <p class="text">
  199. 4
  200. </p>
  201. </div>
  202. <div class="left-layer11">
  203. <p class="text">
  204. 5
  205. </p>
  206. </div>
  207. <div class="left-layer11">
  208. <p class="text">
  209. 6
  210. </p>
  211. </div>
  212. <div class="left-layer11">
  213. <p class="text">
  214. 7
  215. </p>
  216. </div>
  217. <div class="left-layer11">
  218. <p class="text">
  219. 8
  220. </p>
  221. </div>
  222. <div class="left-layer11">
  223. <p class="text">
  224. 9
  225. </p>
  226. </div>
  227. <div class="right-layer11">
  228. <p class="text">
  229. 10
  230. </p>
  231. </div>
  232. <div class="space-line">
  233. </div>
  234. </div>
  235. <div class="table-row">
  236. <div class="left-layer11">
  237. <h5 class="colhdr">
  238. 2
  239. </h5>
  240. </div>
  241. <div class="left-layer11">
  242. <p class="text">
  243. 2
  244. </p>
  245. </div>
  246. <div class="left-layer11">
  247. <p class="text">
  248. 4
  249. </p>
  250. </div>
  251. <div class="left-layer11">
  252. <p class="text">
  253. 6
  254. </p>
  255. </div>
  256. <div class="left-layer11">
  257. <p class="text">
  258. 8
  259. </p>
  260. </div>
  261. <div class="left-layer11">
  262. <p class="text">
  263. 10
  264. </p>
  265. </div>
  266. <div class="left-layer11">
  267. <p class="text">
  268. 12
  269. </p>
  270. </div>
  271. <div class="left-layer11">
  272. <p class="text">
  273. 14
  274. </p>
  275. </div>
  276. <div class="left-layer11">
  277. <p class="text">
  278. 16
  279. </p>
  280. </div>
  281. <div class="left-layer11">
  282. <p class="text">
  283. 18
  284. </p>
  285. </div>
  286. <div class="right-layer11">
  287. <p class="text">
  288. 20
  289. </p>
  290. </div>
  291. <div class="space-line">
  292. </div>
  293. </div>
  294. <div class="table-row">
  295. <div class="left-layer11">
  296. <h5 class="colhdr">
  297. 3
  298. </h5>
  299. </div>
  300. <div class="left-layer11">
  301. <p class="text">
  302. 3
  303. </p>
  304. </div>
  305. <div class="left-layer11">
  306. <p class="text">
  307. 6
  308. </p>
  309. </div>
  310. <div class="left-layer11">
  311. <p class="text">
  312. 9
  313. </p>
  314. </div>
  315. <div class="left-layer11">
  316. <p class="text">
  317. 12
  318. </p>
  319. </div>
  320. <div class="left-layer11">
  321. <p class="text">
  322. 15
  323. </p>
  324. </div>
  325. <div class="left-layer11">
  326. <p class="text">
  327. 18
  328. </p>
  329. </div>
  330. <div class="left-layer11">
  331. <p class="text">
  332. 21
  333. </p>
  334. </div>
  335. <div class="left-layer11">
  336. <p class="text">
  337. 24
  338. </p>
  339. </div>
  340. <div class="left-layer11">
  341. <p class="text">
  342. 27
  343. </p>
  344. </div>
  345. <div class="right-layer11">
  346. <p class="text">
  347. 30
  348. </p>
  349. </div>
  350. <div class="space-line">
  351. </div>
  352. </div>
  353. <div class="table-row">
  354. <div class="left-layer11">
  355. <h5 class="colhdr">
  356. 4
  357. </h5>
  358. </div>
  359. <div class="left-layer11">
  360. <p class="text">
  361. 4
  362. </p>
  363. </div>
  364. <div class="left-layer11">
  365. <p class="text">
  366. 8
  367. </p>
  368. </div>
  369. <div class="left-layer11">
  370. <p class="text">
  371. 12
  372. </p>
  373. </div>
  374. <div class="left-layer11">
  375. <p class="text">
  376. 16
  377. </p>
  378. </div>
  379. <div class="left-layer11">
  380. <p class="text">
  381. 20
  382. </p>
  383. </div>
  384. <div class="left-layer11">
  385. <p class="text">
  386. 24
  387. </p>
  388. </div>
  389. <div class="left-layer11">
  390. <p class="text">
  391. 28
  392. </p>
  393. </div>
  394. <div class="left-layer11">
  395. <p class="text">
  396. 32
  397. </p>
  398. </div>
  399. <div class="left-layer11">
  400. <p class="text">
  401. 36
  402. </p>
  403. </div>
  404. <div class="right-layer11">
  405. <p class="text">
  406. 40
  407. </p>
  408. </div>
  409. <div class="space-line">
  410. </div>
  411. </div>
  412. <h4 class="table-caption">
  413. It should be Ok to go on from here
  414. </h4>
  415. </div>
  416.  
  417.  
  418. </BODY>
  419. </HTML>
Last edited by peter_budo : Mar 22nd, 2008 at 4:30 am. Reason: Keep It Organized - please use [code] tags
aravelli ramesh
Reply With Quote  
Join Date: Jan 2007
Posts: 2,537
Reputation: MidiMagic is on a distinguished road 
Rep Power: 7
Solved Threads: 109
MidiMagic's Avatar
MidiMagic MidiMagic is offline Offline
Posting Maven

Re: table using CSS and Xhtml

  #4  
Mar 22nd, 2008
Why don't you just use the table tags? They are not deprecated.

What the W3C wants you to do is to stop using tables to do the jobs of margins, borders, and padding.
Daylight-saving time uses more gasoline
Reply With Quote  
Join Date: Feb 2008
Location: Kingston, Jamaica
Posts: 87
Reputation: knight fyre is an unknown quantity at this point 
Rep Power: 1
Solved Threads: 1
knight fyre's Avatar
knight fyre knight fyre is offline Offline
Junior Poster in Training

Re: table using CSS and Xhtml

  #5  
Mar 24th, 2008
<html>
	<head><title>Tables with CSS</title>

<!-- Used to create the outer borders of the table and setting the size -->
<style type="text/css"> #outer_table {border: solid red; width: 60px; height:60px;} </style>

<!-- Used to highlight the low border of the first div to create the illustion of a table row -->
<style type="text/css"> #first_row {border-bottom: solid blue; height:50%;} </style>
       </head>
	<body>
		<div id="outer_table">
			<div id="first_row">
			</div>
			<div id="second_row">
			</div>
	</body>
</html>
Last edited by knight fyre : Mar 24th, 2008 at 8:15 pm.
Reply With Quote  
Reply

Only community members can participate in forum threads. You must register or log in to contribute.

DaniWeb HTML and CSS Marketplace
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

 

Thread Tools Display Modes

Similar Threads
Other Threads in the HTML and CSS Forum

All times are GMT -4. The time now is 8:54 pm.
Forum system based on vBulletin Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
©2003 - 2008 DaniWeb® LLC